Képek a honlapon

A honlap dizájn elkészítéséhez is szükség lehet képekre és a majdani működtetés során is célszerű (amennyiben ezt a honlap adottságai lehetővé teszik) képeket használni a tartalom kihangsúlyozásához, dekorációként, illusztráicóként.

Egyetlen kockázatos pontjuk van, a megjelenítés ideje, ezért optimalizálni kell őket a webre kerülés előtt, hogy a megjelenítésük ideje a lehető legkisebb legyen.

Az optimalizálás ebben az esetben méret csökkentést jelent, ezzel gyorsíthatjuk az oldalak letöltését, többféle képpen érhetünk el.

Az ajánlataim a következők:

Megfelelő fájl típus kiválasztása

A szóbajöhető fájl típusok a jpg, png és gif.

A fájl típusok más típusú kódolást és tárolást jelentenek, ebből adódik ugyanazon kép különböző mérete.

Irányelv: válasszunk megfelelő típust a használt fájlokhoz.

A különböző típusok között konvertálást hajthatunk végre úgy, hogy az erre alkalmas programból más típusúként mentjük el a képet. (a Paint windows-os program pl ismeri mindhárom említett kép típust - gif, jpg és png)

GIF típus

Az ebben a fájl típusban tárolt kép maximálisan 256 színt alkalmazhat, s tovább korlátozható a használt színek száma (a színek számának csökkentése természetesen minőségi csökkenést is okoz), ezért kis méret társul hozzá.

Ha a kép megjelenítéséhez elegendő ez a max 256 szín, akkor a gif adja a legkisebb fizikai méretet, a legkisebb bájt mennyiséget. 

A gif típus egy régi fájlformátum, amely valójában azért maradt fenn, mivel mozgóképet tartalmazhat, s háttere átlátszó is lehet.

 

JPG típus

Szoftveres úton tömörített tárolást valósít meg, s amint az ilyen eljárásoknál mindig, természetesen minőség romlással jár. Minél erőteljesebb a tömörítés, annál kisebb a fájl méret és gyengébb a kép minősége.

Irányelv: találjuk meg a képeknél azt a legkisebb méretet, amelynél még nem zavaró a minőség csökkenés.

PNG típus

A JPG-hez hasonlóan, csak éppen más módszerrel, tömörített kép tárolási típus. Előnye a Jpg-hez képest, hogy átlátszó háttérrel képes tárolni.

Célszerű ugyanazon képet png és jpg típusban létrehozni, majd ezekből a kisebb méretűt feltölteni a honlapra.

A fizikai méret csökkentése

Minél kisebb a kép pixelekben meghatározott mérete, annál  kisebb a bájtokban mért mérete is, és annál gyorsabban képes betöltődni a böngészőben.

Egy 800 x 600 pixel felbontású képfájl 480 000 pixelben tárolja az adott képet. Ha fele méretűre kicsinyítem, akkor máris csak 400 x 300 px vagyis összesen 120 000 pixelt kell tárolni, vagyis felére csökkentett kép fizikai mérete a negyedére csökkenhet. 

Az irányelv: csökkentsük a kép felbontását a lehető legkisebbre amelyben még használható a honlapon.

Általában néhány képméret használatos egy honlapon, s valamennyi kép ezen méretekben tekinthető meg. Ha például a legnagyobb méret, amelyben megjelenhet még 800 x 800 akkor ez legyen a feltöltött képek mérete. A kisebb képméreteket maga a honlap generálja le és tárolja.

A dizájnhoz fejlesztéskor leadott fotóknak sem kell a felhasználásukat illetően nagy méretűnek lenniük, ám ebben az esetben nyugodtan rábízhatjuk a dizájnerre a méret problémát. Könnyen előfordulhat, hogy a fotónk egy részlete kerül csupán a honlapra, megfelelő módon kivágva és átalakítva...

A probálkozást, kísérletezgetést mindenképpen megéri egyszer megejteni a honlapunk érdekében.

Egy kapcsolódó írás a GevaPC honlapon: FastStone Photo Resizer képszerkesztő program és használata a webes képek optimalizálásáról.