Ha a weblapunk nem tölthető le 10-15 másodperc alatt, látogatóink jelentős része továbbkattint, még mielőtt weblapunk megjelenhetett volna a képernyőjén. A weblapok méretének legnagyobb részét a képek alkotják, ezért fontos a képek optimalizálása.
Ahhoz, hogy gyorsan letöltődő weblapokat készthessünk oldalainkat három fő területen kell optimalizálnunk: a weboldal kódja, az alkalmazott scriptek és az oldalon használt képek. Mindhárom közül a túl nagy méretű képek befolyásolhatják leginkább a letöltéshez szükséges időt, így ezen a területen lehet a leglátványosabb eredményeket elérni az oldalak sebességre történő optimalizálása során.
A webes képek típusai
Az Interneten számtalan képformátummal találkozhatunk. Ezek közül a leginkább elterjedt típusok a GIF és a JPEG. Ide sorolhatnánk az egyre szélesebb körben terjedő Flash grafikai objektumokat (animációkat) is, de korlátozzuk le most vizsgálódásunk tárgyát az előbbi két fő típusra, és ezen belül is csak a statikus állóképekre.
Mindegyik képtípusnak megvannak a maga előnyei és hátrányai. A GIF (Graphics Interchange Format) a CompuServe fejlesztése, ami még az Internet tömeges elterjedése előtti időkben jött létre, a képek közzétételét szolgálva a CompuServe hálózatán. A kor technikai színvonalának megfelelő képernyő felbontás és színmélység következtében a GIF képek maximum 256 féle színárnyalatot tudnak megjeleníteni. A használhatóságot növeli, hogy képenként külön színpalettát alkalmazhatunk.
A GIF képekben alkalmazott tömörítési eljárás azoknak a képeknek tudja a fájlméretét leginkább lecsökkenteni, ahol sok azonos színű képrészlet található, és viszonylag gyenge hatásfokkal működik színátmeneteket esetén. Úgy érdemes elképzelni a GIF tömörítési eljárást, hogy pontról pontra végigpásztázza a képet, és ha egymás mellett egyforma színű képpontokat talál, akkor a fájlba azt írja, hogy itt pl. 200 darab piros színű pont következik. Tehát vonalas ábrák, illusztrációk (pl: grafikonok) esetében jó hatásfokkal használhatók a GIF képek, viszont fényképek és színátmenetes illusztrációk esetében, nagy fájlméretet és gyenge minőséget kapunk, ha GIF képeket alkalmazunk. A GIF képekhez hasonló tulajdonságokkal rendelkezik - a GIF formátum egy továbbfejlesztett változatának is tekinthető - a PNG formátum, ami már több millió színárnyalat megjelenítésére is képes, azonban a Microsoft Internet Explorer nem támogatja teljes körűen a PNG szabványt.
A JPEG formátum újabb keletű, mint a GIF formátum. A színárnyalatok millióit képes megjeleníteni, és különösen alkalmas fényképek és színátmenetes illusztrációk közreadásához, viszont a tömörítési eljárás következtében nem ideális határozott kontúrok megjelenítésére. Úgy érdemes elképzelni a JPEG tömörítési eljárást, hogy a tömörítési szinttől függő sűrűségben kiválaszt a képen néhány pontot, és az egymás melletti pontok közötti területet a pontok színe közötti színátmenettel tölti ki megjelenítéskor.
A képek letöltési sebességének gyorsítása
Alapvetően egy kép letöltési sebességét úgy tudjuk gyorsítani, hogy csökkentjük a fájlméretét. Ezt kétféleképpen is megtehetjük: vagy csökkentjük a kép méreteit; vagy változtatunk a tárolásához használt kódoláson.
A legegyszerűbb módja egy kép fájlméretének csökkentésére a kép fizikai dimenzióinak csökkentése. Másként megfogalmazva minél kisebb egy kép, annál kisebb lesz a fájlmérete. Vegyünk például egy 80x80 képpont (pixel) méretű négyzet alakú képet. Ez a kép 6400 képpontból áll. Ha lecsökkentjük a kép méretét 40x40 képpontra, akkor már csak 1600 képpontból fog állni az új kép. Tehát felére csökkentve az eredeti kép méreteit a képpontok száma a negyedére csökken. Megközelítően hasonló arányú a fájlméret csökkenése is.
Ez az első alapelve a fájlméret csökkentésnek: mindig a legkisebb még használható képméretet kell használnunk weboldalainkon. Természetesen egy weboldalon minél kevesebb kép van, annál kevesebb a képpont, kisebb az összesített fájlméret, így a weblap letöltése is gyorsabb lesz.
Mivel a GIF képek csak 256 féle színt tartalmazhatnak, és ez tovább korlátozható 128, 64, 32… színre is, az azonos színű egybefüggő foltokat tartalmazó képeken kívül, a kis fizikai méretű képek esetén is kisebb fájlméret érhető el a GIF formátum használatával, mint ha JPEG formátumban mentenénk el az adott képeket. Egyéb esetekben általában a JPEG formátum eredményez kisebb fájlméretet.
Tehát a második alapelv: használjuk a megfelelő fájl formátumot a fájlméret csökkentése érdekében. A legtöbb weboldal esetében GIF és JPEG képek kombinációit érdemes alkalmazni.
A képek tömörítését a GIF és a JPEG formátum is lehetővé teszi. A GIF formátum esetében az alkalmazott színek számát lehet csökkenteni, a JPEG formátum esetében pedig szoftveres algoritmusok segítségével eltávolítható néhány redundáns információ a fájlból.
A fenti tömörítések minden esetben a kép minőségének romlásával járnak együtt. Arra kell törekednünk, hogy megtaláljuk az egyensúlyt a kis fájlméret és a még elfogadható képminőség között.
Ez a képek fájlméret csökkentésének harmadik alapelve: találjuk meg a legalacsonyabb elfogadható képminőséget. A legtöbb kép bizonyos mértékben tömöríthető szinte észrevehetetlen minőségvesztéssel, és szinte minden kép veszíthet a minőségéből úgy, hogy még elfogadható maradjon. Minél alacsonyabb a minőség, annál kisebb a fájlméret.
A GIF képek általában 256 szín helyett 128 vagy kevesebb színre is csökkenthetők. Minél kevesebb színt használunk, annál kisebb a fájlméret.
A JPEG képek szinte minden esetben használhatók 80%-os részletgazdagság mellett, és gyakran még akár 15-30%-os részletgazdagsággal is megfelelő minőséget adnak. Minél kisebb a részletgazdagság, annál kisebb lesz a fájlméret.
Kísérletezzünk a képekkel. Próbáljuk ki egyre kisebb és kisebb beállításokkal, és használjuk a legkisebb még elfogadható minőségű verziót.
Ha a weblapunk nem tölthető le 10-15 másodperc alatt, látogatóink jelentős része továbbkattint, még mielőtt weblapunk megjelenhetett volna a képernyőjén. A weblapok méretének legnagyobb részét a képek alkotják, ezért fontos a képek optimalizálása.
Ahhoz, hogy gyorsan letöltődő weblapokat készthessünk oldalainkat három fő területen kell optimalizálnunk: a weboldal kódja, az alkalmazott scriptek és az oldalon használt képek. Mindhárom közül a túl nagy méretű képek befolyásolhatják leginkább a letöltéshez szükséges időt, így ezen a területen lehet a leglátványosabb eredményeket elérni az oldalak sebességre történő optimalizálása során.
A webes képek típusai
Az Interneten számtalan képformátummal találkozhatunk. Ezek közül a leginkább elterjedt típusok a GIF és a JPEG. Ide sorolhatnánk az egyre szélesebb körben terjedő Flash grafikai objektumokat (animációkat) is, de korlátozzuk le most vizsgálódásunk tárgyát az előbbi két fő típusra, és ezen belül is csak a statikus állóképekre.
Mindegyik képtípusnak megvannak a maga előnyei és hátrányai. A GIF (Graphics Interchange Format) a CompuServe fejlesztése, ami még az Internet tömeges elterjedése előtti időkben jött létre, a képek közzétételét szolgálva a CompuServe hálózatán. A kor technikai színvonalának megfelelő képernyő felbontás és színmélység következtében a GIF képek maximum 256 féle színárnyalatot tudnak megjeleníteni. A használhatóságot növeli, hogy képenként külön színpalettát alkalmazhatunk.
A GIF képekben alkalmazott tömörítési eljárás azoknak a képeknek tudja a fájlméretét leginkább lecsökkenteni, ahol sok azonos színű képrészlet található, és viszonylag gyenge hatásfokkal működik színátmeneteket esetén. Úgy érdemes elképzelni a GIF tömörítési eljárást, hogy pontról pontra végigpásztázza a képet, és ha egymás mellett egyforma színű képpontokat talál, akkor a fájlba azt írja, hogy itt pl. 200 darab piros színű pont következik. Tehát vonalas ábrák, illusztrációk (pl: grafikonok) esetében jó hatásfokkal használhatók a GIF képek, viszont fényképek és színátmenetes illusztrációk esetében, nagy fájlméretet és gyenge minőséget kapunk, ha GIF képeket alkalmazunk. A GIF képekhez hasonló tulajdonságokkal rendelkezik - a GIF formátum egy továbbfejlesztett változatának is tekinthető - a PNG formátum, ami már több millió színárnyalat megjelenítésére is képes, azonban a Microsoft Internet Explorer nem támogatja teljes körűen a PNG szabványt.
A JPEG formátum újabb keletű, mint a GIF formátum. A színárnyalatok millióit képes megjeleníteni, és különösen alkalmas fényképek és színátmenetes illusztrációk közreadásához, viszont a tömörítési eljárás következtében nem ideális határozott kontúrok megjelenítésére. Úgy érdemes elképzelni a JPEG tömörítési eljárást, hogy a tömörítési szinttől függő sűrűségben kiválaszt a képen néhány pontot, és az egymás melletti pontok közötti területet a pontok színe közötti színátmenettel tölti ki megjelenítéskor.
A képek letöltési sebességének gyorsítása
Alapvetően egy kép letöltési sebességét úgy tudjuk gyorsítani, hogy csökkentjük a fájlméretét. Ezt kétféleképpen is megtehetjük: vagy csökkentjük a kép méreteit; vagy változtatunk a tárolásához használt kódoláson.
A legegyszerűbb módja egy kép fájlméretének csökkentésére a kép fizikai dimenzióinak csökkentése. Másként megfogalmazva minél kisebb egy kép, annál kisebb lesz a fájlmérete. Vegyünk például egy 80x80 képpont (pixel) méretű négyzet alakú képet. Ez a kép 6400 képpontból áll. Ha lecsökkentjük a kép méretét 40x40 képpontra, akkor már csak 1600 képpontból fog állni az új kép. Tehát felére csökkentve az eredeti kép méreteit a képpontok száma a negyedére csökken. Megközelítően hasonló arányú a fájlméret csökkenése is.
Ez az első alapelve a fájlméret csökkentésnek: mindig a legkisebb még használható képméretet kell használnunk weboldalainkon. Természetesen egy weboldalon minél kevesebb kép van, annál kevesebb a képpont, kisebb az összesített fájlméret, így a weblap letöltése is gyorsabb lesz.
Mivel a GIF képek csak 256 féle színt tartalmazhatnak, és ez tovább korlátozható 128, 64, 32… színre is, az azonos színű egybefüggő foltokat tartalmazó képeken kívül, a kis fizikai méretű képek esetén is kisebb fájlméret érhető el a GIF formátum használatával, mint ha JPEG formátumban mentenénk el az adott képeket. Egyéb esetekben általában a JPEG formátum eredményez kisebb fájlméretet.
Tehát a második alapelv: használjuk a megfelelő fájl formátumot a fájlméret csökkentése érdekében. A legtöbb weboldal esetében GIF és JPEG képek kombinációit érdemes alkalmazni.
A képek tömörítését a GIF és a JPEG formátum is lehetővé teszi. A GIF formátum esetében az alkalmazott színek számát lehet csökkenteni, a JPEG formátum esetében pedig szoftveres algoritmusok segítségével eltávolítható néhány redundáns információ a fájlból.
A fenti tömörítések minden esetben a kép minőségének romlásával járnak együtt. Arra kell törekednünk, hogy megtaláljuk az egyensúlyt a kis fájlméret és a még elfogadható képminőség között.
Ez a képek fájlméret csökkentésének harmadik alapelve: találjuk meg a legalacsonyabb elfogadható képminőséget. A legtöbb kép bizonyos mértékben tömöríthető szinte észrevehetetlen minőségvesztéssel, és szinte minden kép veszíthet a minőségéből úgy, hogy még elfogadható maradjon. Minél alacsonyabb a minőség, annál kisebb a fájlméret.
A GIF képek általában 256 szín helyett 128 vagy kevesebb színre is csökkenthetők. Minél kevesebb színt használunk, annál kisebb a fájlméret.
A JPEG képek szinte minden esetben használhatók 80%-os részletgazdagság mellett, és gyakran még akár 15-30%-os részletgazdagsággal is megfelelő minőséget adnak. Minél kisebb a részletgazdagság, annál kisebb lesz a fájlméret.
Kísérletezzünk a képekkel. Próbáljuk ki egyre kisebb és kisebb beállításokkal, és használjuk a legkisebb még elfogadható minőségű verziót.
Tartalmi kategóriák: