Számos olyan képformátum létezik, amely a weboldalakon használható. Néhány gyakori példa a GIF , a JPG és a PNG . Az SVG fájlokat ma is gyakran használják a weboldalak, így a webes tervezők még egy lehetőséget kínálnak az online kép számára.
GIF képek
Használjon GIF fájlokat olyan képekhez, amelyeknek kicsi, fix színszáma van. A GIF fájlok mindig 256 egyedülálló színre redukálódnak. A GIF fájlok tömörítési algoritmusa kevésbé bonyolult, mint a JPG fájlok esetében, de sík színű képek és szövegek esetén nagyon kis méretű fájlokat hoz létre.
A GIF formátum nem alkalmas fényképes képekhez vagy színátmenetes színekkel rendelkező képekhez. Mivel a GIF formátum korlátozott számú színnel rendelkezik, a színátmenetek és a fotók a GIF-fájlba mentve lesznek kötegelve és pixelezve.
Dióhéjban csak GIF-eket használsz egyszerű képekhez, csak néhány színnel, de PNG-eket is használhatsz (annál hamarabb).
JPG képek
Használjon JPG képeket fényképekhez és egyéb képekhez, amelyek több millió színnel rendelkeznek. Komplex tömörítési algoritmust használ, amely lehetővé teszi kisebb grafika létrehozását a kép minőségének elvesztésével. Ezt nevezik "veszteséges" tömörítésnek, mivel a kép tömörítése során elveszett képinformációk egy része.
A JPG formátum nem alkalmas szöveges képekhez, nagyméretű, tömör színű tömbökhöz és egyszerű formákhoz, éles szélekkel. Ennek oka, hogy a kép tömörítése esetén a szöveg, a szín vagy a vonalak elmosódhatnak, ami olyan képhez vezet, amely nem olyan éles, mint más formátumban.
A JPG képeket leginkább olyan fényképek és képek felhasználására használják, amelyek sok és sok természetes színnel rendelkeznek.
PNG képek
A PNG formátumot úgy alakították ki, hogy helyettesítse a GIF formátumot, amikor úgy tűnt, hogy a GIF-képek díjat fizetnek. A PNG grafikáknak jobb tömörítési arányuk van, mint a GIF-képek, amelyek kisebb képeket eredményeznek, mint a GIF-ként mentett fájlok. A PNG fájlok alfa átláthatóságot biztosítanak, vagyis olyan képeket tartalmazhatnak, amelyek teljesen átlátszóak vagy akár alfa áttetszőségűek. Például egy csepp árnyék átláthatóság-hatásokat használ, és alkalmas lenne egy PNG-re (vagy csak CSS árnyékokat használhat fel).
A PNG képek, például a GIF-k, nem alkalmasak a fényképek használatára. Lehetőség van arra, hogy megkerüljék a zeneszámok problémáját, amely a valódi színekkel GIF-fájlként elmentett fényképeket érinti, de ez nagyon nagy képekhez vezethet. A PNG-képeket a régebbi mobiltelefonok és a telefonok sem támogatják.
PNG-t használunk minden olyan fájlt, amely átláthatóságot igényel. A PNG-8-at is használjuk olyan fájlok esetén, amelyek GIF-nek alkalmasak lennének, ezzel a PNG formátummal.
SVG képek
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 vektorokat használnak, hogy nagyon kis méretű fájlokat hozzanak létre, amelyek bármilyen méretűvé alakíthatók, a fájlméret minőségének csökkenése nélkül. Olyan illusztrációkhoz készültek, mint az ikonok és a logók.
Képek készítése a webes kézbesítéshez
Függetlenül attól, hogy melyik képformátumot használja, és webhelye biztosan számos különböző formátumot használ az összes oldalán, meg kell győződnie arról, hogy az adott webhelyen lévő összes kép készen áll a webszállításra . A túl nagy képek miatt a webhely lassan futhat, és hatással lehet az általános teljesítményre. Ennek leküzdéséhez ezeket a képeket optimalizálni kell, hogy megtalálják az egyensúlyt a kiváló minőségű és a legalacsonyabb fájlméret között.
A megfelelő képformátum kiválasztása a csata része, de annak biztosítása is, hogy elkészítette ezeket a fájlokat a következő lépés a fontos webszállítási folyamat során.
Jennifer Krynin eredeti cikke. Szerkesztette Jeremy Girard.