Kép méretének csökkentése - 5 jó módszer
A képek mérete a webfejlesztés során fontosabb, mint elsőre gondolnánk: A képek méretének csökkentésével lehet elérni a letöltendő adatmennyiség radikális csökkentését, és ezzel jelentősen gyorsítani az oldal betöltési idejét.
A képek mérete a webfejlesztés során fontosabb, mint elsőre gondolnánk: SEO szempontból ugyanis kritikus, hogy milyen gyorsan töltődik be a weboldalunk. A legkönnyebben és legnagyobb mértékben pedig általában a képek méretének csökkentésével lehet elérni a letöltendő adatmennyiség radikális csökkentését, és ezzel jelentősen gyorsítani az oldal betöltési idejét. De ezen felül, sima irodai munkában is például problémát tud okozni egy, a benne lévő képek miatt hatalmas Word fájl. Lássuk tehát, miként érhető el egy kép méretének csökkentése!
1) Levágás.
Akár evidens, akár nem: ha egy képnek levágjuk a 40%-át, mert nem fontos, ami azon a részen van, akkor a kép mérete is kb. 40%-kal csökkenni fog. MacBook-on az alap Preview, Windowson a default Photo Viewer (magyarul: Fényképek) is alkalmas rá, hogy levágjuk a képünk felesleges részeit (magyarul gyakran körülvágás, angolul: crop). Ez az egyszerű, de hatékony módszer bátran használható, ha sok "holt tér" található a képen. Aggódni viszont nem kell, nem muszáj a legjobb barátodat vagy a nagymamádat levágni a kép széléről, hogy SEO-barátabb mérete legyen -- erre vannak más módszerek is!
2) Pixel szám csökkentése.
Más néven átméretezés. Ha a pixelek számát csökkentjük, a képünk általában kisebb is lesz, de ez gyakran nem baj. Nézzük meg a készítendő weblapon, hogy maximum mekkora méretű kép jelenhet meg az adott pozícióban! A kép méret általában reszponzív módon változik, de CSS-sel van ennek egy felső határa. Annál nagyobb méretű képet teljesen felesleges megjeleníteni a weboldalon, nem lesz tőle szebb. Tehát a CSS (vagy a html tag) meghatározza, hogy mekkorára, hány pixelesre vágjuk a képünket. Persze figyeljünk a kép arányainak megtartására! A MacBook Preview és a Windows Fényképek is ad lehetőséget a pixelszám beállítására átméretezés néven. A Windows Paint is alkalmas erre a Tulajdonságoknál, de nem ajánljuk, mert ott nem alapértelmezett az oldal arányok megtartása.
Olyan asztali alkalmazásokkal, mint pl. Az Irfanview, akár tömegesen is átszabhatjuk sok képnek a méretét.
3) Tömörítés
Szinte mindenhol valamilyen tömörített formában találkozunk képekkel, ezek közül a legismertebb a jpg formátum. A tömörítés mértéke azonban állítható. Az viszont legyen a fejünkben, hogy a tömörítés a kép minőségének romlásával jár, a megfelelő szintű tömörítésnél viszont ez a minőség romlás egyáltalán nem észrevehető. A Windows Fényképek alkalmazás alkalmas (az átméretezés menüponton belül) a tömörítés növelésére vagy csökkentésére, és az új file kilobyteban mért méretét is láthatjuk közben. Ellenben a Microsoft Office Picture Managert nem ajánljuk. Apple készüléken a Preview az Export menüponton ajánlja fel a lehetőséget.
Mindezek helyett vagy mellett leginkább az ingyenes online alkalmazásokat javasoljuk, amik éppen optimális méretűre igyekeznek csökkenteni a képek méretét. Ilyen például a tinyjpg.com, a tinypng.com, a compressjpeg.com, a compressor.io, stb. Ezek mind a képméret változtatása nélkül csökkentik kép méretét, ráadásul több képet is optimalizálhatunk velük egyszerre!
4) Formátum megváltoztatása
Különböző kép tömörítési formátumok léteznek, ezek közül a legelterjedtebb a .jpg és a .png fileok. A jpg fileok kisebbek, mint a png fileok, ezért jelentős méretcsökkenést érhetünk el, ha egy png filet jpg-vé alakítunk. Sajnos a jpg-nek van egy hátránya: a png-vel szemben nem tudja az átlátszó színt kezelni, ezért átlátszó hátterű képek (pl. ikonok) esetében kevésbé használjuk őket.
Jelenleg már bátran ajánlhatjuk a még tömörebb .webp formátumot, amivel még jobban csökken a kép mérete, ráadásul nagy mértékben.
A webp formátum hátránya, hogy a gépünkön a sima filekezelő és legtöbb képnézegető program nem tudjam megnyitni, mert ez egy kifejezetten webes megjelenésre kitalált formátum. Másik hátránya, hogy nagyon régi Safari böngészők, 14-es verzió alattiak nem tudják megjeleníteni!
A formátum megváltoztatása különböző desktop programokkal többnyire az Export vagy esetleg a Save as menüpont alatt érhető el, de az is tökéletes megoldás, ha beírjuk a böngészőbe, hogy pl. png to jpg online vagy jpg to webp online és máris egy csomó nagyon egyszerű és ingyenes online megoldás között válogathatunk! Használatukhoz még angolul sem kell igazán tudni, hiszen néhány kattintás alatt meg is van a művelet.
5) Színmélység csökkentése
Kezdetben a képek színének információját egy byteon tárolták. Ez 256 szín megjelenítését tette lehetővé. Mivel 8 bit egy byte, ezért ezt 8 bites színmélységnek hívjuk. A jelenleg elterjedt 16 bites színmélység már az előző négyzetét, 65536 színt tud megkülönböztetni, a 24 bites színmélység pedig 16,7 milliót, amit True Color néven is ismerünk. A 16 bites színmélység már két byteot használ fel minden egyes képpont tárolásához, a 24 bites pedig hármat, így a színmélység csökkenésével is jelentős képméret csökkenést érhetünk el (persze a minőség rovására). A Photoshoppal ezt gond nélkül megoldhatjuk, de az Irfanview is tökéletesen megfelelő e célra.
Egy sok képet megjelenítő oldal esetében, mint amilyen például egy galéria, egyenesen kötelező a képek méretét optimalizálni, különben a nagy felbontású fotók a használhatatlanságig képesek lelassítani az oldal működését. De a fenti módszerek kombinációjával a képek méretét drasztikusan csökkenthetjük egy szokványos weboldalakon is, és ez által érezhetően gyorsabban fognak működni az általunk készített weblapok.
