A webes képtípusok gyakori példái a következők GIF, JPG, és PNG. SVG fájlok. Ezek a különböző formátumok különféle lehetőségeket kínálnak a webtervezőknek a weboldal látványosságának optimalizálására.
GIF képek
Használjon GIF fájlokat olyan képekhez, amelyek kicsi, rögzített számú színnel rendelkeznek. A GIF fájlok mindig legfeljebb 256 egyedi színre redukálódnak. A GIF fájlok tömörítési algoritmusa kevésbé összetett, mint a JPG fájloké, de ha sík színes képeken és szövegeken használják, nagyon kis fájlméret.
A GIF formátum nem alkalmas fényképészeti vagy színátmenetes képekhez. Mivel a GIF formátumnak korlátozott számú színe van, az átmenetek és a fényképek sávozással és pixelezéssel végződnek, ha GIF fájlként mentik őket.
JPG képek
Használjon JPG képeket fényképekhez és egyéb képekhez, amelyek milliónyi színnel rendelkeznek. Összetett tömörítési algoritmust használ, amely lehetővé teszi kisebb grafikák készítését a kép minőségének egy részének elvesztésével. Ezt "veszteséges" tömörítésnek nevezzük, mivel a kép tömörítésekor a képinformációk egy része elvész.
A JPG formátum nem alkalmas szöveges képekhez, nagy egyszínű blokkokhoz és egyszerű, éles szélű formákhoz. Ennek oka az, hogy a kép tömörítésekor a szöveg, a szín vagy a vonalak elmosódhatnak, így a kép nem olyan éles, mint más formátumban mentené.
PNG Képek
A PNG formátumot a GIF formátum helyettesítésére fejlesztették ki, amikor kiderült, hogy a GIF képekre jogdíj fizetendő. A PNG grafikák tömörítési aránya jobb, mint a GIF képeké, ami kisebb képeket eredményez, mint ugyanaz a fájl, amelyet GIF formátumban mentettek el. A PNG fájlok alfa átlátszóságot kínálnak, vagyis a képek olyan részei lehetnek, amelyek teljesen átlátszók, vagy akár az alfa átlátszóságot is használhatják. Például egy árnyékoló egy sor átlátszó effektust használ, és alkalmas lenne PNG-re (vagy egyszerűen csak befejezhet minket CSS árnyékok használatával).
A PNG-képek, csakúgy, mint a GIF-ek, nem alkalmasak fényképek készítésére. Meg lehet kerülni a sávosítást, amely a GIF fájlként mentett fényképeket valódi színekkel érinti, de ez nagyon nagy képeket eredményezhet. A PNG képeket a régebbi mobiltelefonok és a többfunkciós telefonok sem támogatják jól.
SVG Images
Az SVG jelentése Scalable Vector Graphic. A JPG, GIF és PNG fájlokban található raszteralapú formátumokkal ellentétben ezek a fájlok vektorok segítségével nagyon kicsi fájlokat hoznak létre, amelyek bármilyen méretben megjeleníthetők, minőségük csökkenése nélkül a fájlméret növekedésével. Olyan illusztrációkhoz készültek, mint az ikonok és még a logók is.
Képek előkészítése a webes szállításhoz
Függetlenül attól, hogy melyik képformátumot használja, győződjön meg arról, hogy a webhelyen található összes kép az felkészült a webes szállításra. A túl nagy képek miatt a webhely lassan fut, és befolyásolhatja az általános teljesítményt. Ennek leküzdésére ezeket a képeket optimalizálni kell hogy megtalálja az egyensúlyt a kiváló minőség és az ezen a minőségi szinten elérhető legkisebb fájlméret között.
A megfelelő képformátum kiválasztása a csata része, de a fájlok előkészítésének biztosítása is a következő lépés ebben a fontos webes kézbesítési folyamatban.