Hogyan csökkenthető a webes képek mérete és felbontása a FastStone Resizer segítségével
Ebben a cikkben elmagyarázom hogyan lehet optimalizálni a képeket az internethez. Miből áll? Nos, hogy az egyes képek méretét a weboldalunk méretéhez igazítsuk (most meglátjuk, mi ez), és csökkentse a felbontását hogy a kép kevesebb "súlyú". Vagyis csökkentse méretét pixelben és bájtban. Most, hogy világos, Menjünk a rendetlenségbe!
A képek mérete befolyásolja weboldalunk sebességét és helyzetét
Bárki, aki használt mérési eszközöket betöltési sebesség a webhelyén, ezt észreveszed képek nagyon magas százalékáért felelősek betöltési idő és méret weboldalunkról. Ez az egyik első tényező, amelyet optimalizálnunk kell A Google megbünteti a magas betöltési időket.
Jesús AF barátom ebben a cikkében olyan eszközöket és tippeket találhat, amelyek segítenek Önnek javítsa webhelye sebességét.
A kép betöltési ideje alapvetően két tényezőtől függ:
- A kép mérete bájtokban. Ez a méret annál nagyobb, minél nagyobb a kép (pixelben), és annál nagyobb a felbontása (dots per inch vagy dpi).
- Ha a méret pixelben (szélesség és magasság) pontosan megegyezik a képtárolóval
Az első dolog az, hogy tisztázzuk, hogy a képpontok mérete és a kép felbontása különböző dolog. Ha itt mélyebbre akarunk menni, akkor (angolul).
NAK NEK gyakorlati hatások ami érdekel bennünket, az a tudat, hogy muszáj állítsa be a képet a tároló méretéhez, ahová be fogja helyezni és az a felbontást 72 dpi-re kell csökkenteni hogy egyensúlyt találjon a kép minősége és mérete között a weboldalunkon. Ha nem így csináljuk, két hatásunk van:
- A nagyobb méretű bájtokban teszi a böngésző hosszabb ideig tart letölteni. Majd meglátjuk azokat a konkrét számokat, amelyekről beszélünk.
- Ha ő a kép pixelben (szélességben és magasságban) való mérete nem egyezik meg a benne lévő elemet, a felhasználó böngészőjének (legyen az Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera vagy bármi más) számításokat kell végeznie a kép méretének csökkentése és megfelelő megjelenítése érdekében. Ez folyamatidővé változik, ami weboldalunk megjelenése hosszabb ideig tart.
Hogyan optimalizálhat egy képet az internethez
Sokfélét használhatunk eszközök a kép méretének és felbontásának megváltoztatásához, de a Facebookon folytatott beszélgetésnek köszönhetően felfedeztem egy nagyszerű eszközt, a FastStone Resizer nevet.
Ez az egyszerű program lehetővé teszi a képek webes optimalizálását nagyon egyszerű módon. És lehetővé teszi a kötegelt munkát is, vagyis ugyanazon beállítások alkalmazását egyszerre több képre.
Mekkora a kép a weboldalamon
Jól attól függ, hogy mely elem tartalmazza. Itt megtudhat egy kicsit többet a "div" címkéről, amely a legáltalánosabb tároló, amelyet találni fogunk, de technikai tény, hogy a legtöbb felhasználónak nem is kell tudnia 😉
Tudni a pontos méretadatokat Vannak eszközeink, vannak általánosabbak és mások specifikusabbak, de a legegyszerűbb módszer a elemellenőr ma szinte az összes nagyobb böngésző használja. Az elemellenőr segít nekünk programozóknak bizonyos technikai feladatokban.
Meg kell keresnünk (vagy a semmiből kell létrehoznunk) egy olyan képet, amelynek maximális szélessége érdekel minket a weboldalunkon. Esetemben általában a cikk oszlopának teljes szélességét használom, ami 795 pixel, de előfordulhat, hogy kisebb képet akarunk beilleszteni, és a folyamat ugyanaz lesz.