Bezár
Hírek

Hogyan csökkentsük egy kép méretét?

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.

Kép méretének csökkentése, kutyákkal szemléltetve

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 file. Lássuk tehát, hogyan csökkenthető egy kép mérete!

 

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)

 

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!

 

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.

HTML / CSS
16 Szept.
19 Szept.
28 Szept.
Python
10 Szept.
21 Szept.
2 Október
PHP
24 Június
3 Szept.
28 Szept.
Full-stack
16 Szept.
19 Szept.
24 Szept.
C#
14 Szept.
23 Szept.

Tanfolyam-naptár