tanácsadó
A weboldalon használt képeket általában grafikus vagy webdesigner készíti, akik számára a minőség az elsődleges szempont (mert ez az a szabvány, amely alapján általában megítélik őket). Ezért nem meglepő, hogy a kép optimalizálása gyakran figyelmen kívül hagyják. 10 kép vagy 20 KB-tal csökkenthetjük a kép súlyát látható minőségromlás nélkül. A képek mérete közvetlenül befolyásolja a képet egy weboldal betöltési sebessége, vagy ami ugyanaz, az egy pozicionáló tényező.
Ha a grafikusok e tekintetben hibásak lehetnek az alagút látásában, akkor vigyáznia kell, hogy ne essen ugyanabba a csapdába. Bár a méret a fő gondunk, és a minőség romlása valószínűleg elfogadható, ellen kell állnunk a túloptimalizálás kísértésének.

A MÁSOK MEGÉRTÉSE
KÉPFORMÁTUMOK
Hosszú ideig két képformátumot használtak főleg az interneten: JPEG és GIF.
Jpeg (ami a rövidítése Közös fényképészeti szakértői csoport) fényképekhez és GIF (betűszó: Grafikus csereformátum) számítógéppel generált képekhez, például ikonokhoz használható.
A tömörítési módszer az 1990-es évek közepén került napvilágra Lempel-Ziv Welch (LZW) a GIF használta és szabadalmaztatták. 1996-ban jelent meg az új formátum első specifikációja: PNG (betűszó: Hordozható hálózati grafika). Később abban az évben ajánlássá vált a World Wide Web Consortium (W3C), évtized végéig a fő böngészők támogatásával. Bár az LZW szabadalom 2003-ban lejárt, a PNG kiváló formátumnak bizonyult, és a GIF-et soha nem sikerült teljesen helyreállítani.
Bár a JPEG és a GIF funkciói jól körülhatároltak, a PNG célja pontatlan. A PNG formátum használható a JPEG és a GIF helyettesítésére.

Felülvizsgáljuk ezt a három formátumot.

Jpeg
A JPEG veszteséges tömörítési módszer (van veszteségmentes mód, de nem támogatott széles körben), és jól alkalmazható olyan fényképészeti képekhez, amelyek általában sokféle színnel és színátmenettel rendelkeznek. A JPEG esetén összefüggés van a fájlméret és a képminőség között, de még a legalacsonyabb tömörítés (azaz a legnagyobb fájlméret) esetén is a JPEG-képek még mindig lényegesen kisebbek, mint a sima formátumúak. Formátum).
A JPEG tömörítési szinteket százalékban adják meg (ahol a 0 százalék a legkisebb fájlméret, de a legalacsonyabb minőség, és a 100 százalék a legjobb minőségű, de a legnagyobb méret). A körülbelül 60–80 százalékos értéket általában jó középpontnak tekintik a webes képeknél.

GIF
A GIF 1987 óta létezik, és gyakran használják logók, írások és clipart készítéséhez.
A GIF képek színes táblázatot (más néven palettát) használnak, amely legfeljebb 256 színt tartalmazhat. A GIF kép minden egyes képpontját ezután egy szám helyettesíti, amely jelzi, hogy a színek melyikét tartalmazzák. A nyilvánvaló korlátozás itt az, hogy egy GIF legfeljebb 256 színt tartalmazhat. De meglepő módon ez gyakran elég, különösen azért, mert a színtábla nincs előre meghatározva, és a képen használt színek alapján van feltérképezve (a kép például 256 vörös árnyalatot tartalmazhat).
Érdekes megjegyezni azt is, hogy a GIF tömörítés az LWZ-re épül, az LZ78 algoritmus átdolgozott változatára, amelyet a gzip és deflate alkalmazásban használnak.
Mivel a tömörítés vízszintes sorokban történik (balról jobbra), a vízszintes színátmenetet tartalmazó képek rosszabban tömörülnek, mint a függőleges színátmenetűek.

PNG
A PNG egy veszteségmentes formátum, amelyet a GIF helyettesítésére terveztek. A PNG a deflate algoritmust használja (amely viszont az LW77-hez hasonló, ami hasonló az LWZ-hez).
A PNG támogatja az RGB és RGBA (alfa csatornás RGB) palettát és nem paletta képeket. A különböző palettákat gyakran PNG8-nak (PNG esetén), PNG24-nek (RGB esetén) és PNG32-nek (RGBA esetén) nevezik. A számok a pixelenkénti bitek számára vonatkoznak.

  • A PNG8 a leginkább hasonló a GIF-hez. Használjon 8 bites színpalettát (azaz 256-ot). A legtöbb esetben felülmúlja a GIF-et.
  • Az RGB módot (PNG24) néha veszteségmentes alternatívaként használják a JPEG-nek, bár a nagy fájlméret miatt nem használják általában az interneten.
  • A PNG32 hasonló az RGB módhoz, de tartalmaz alfa csatornát. Bár ezt a módot nem használják széles körben, vannak olyan helyzetek, amikor ez az egyetlen életképes formátum. A sok színátmenettel rendelkező, átlátszóságot igénylő képhez sem a JPEG, sem a GIF, sem a PNG8 nem ideális (mivel a JPEG nem támogatja az átlátszóságot, míg a GIF és a PNG8 színe mélységű) A PNG32 remekül kezeli ezt a képet, de a mérete nem lesz kicsi.

Bár a PNG a 90-es évek vége óta létezik, az Internet Explorernek számos hibája volt ennek a formátumnak a támogatásában, különösen a PNG32 esetében. Például az IE 6.0 és a korábbi verziók nem oldják meg megfelelően az alfa átlátszóságot, míg az IE 7.0 problémákat okoz, ha az átlátszóságot a félig átlátszó HTML elemek tetején használják. (Lásd: http://support.microsoft.com/kb/265221)

SGV
A fent tárgyalt képformátumok hasonló alapelvek mentén dolgoznak: a kép egyes pixeleinek színinformációin. Ami különbözik az információ kódolásának módjától.
A Scalable Vector Graphics (SVG) teljesen más megközelítést alkalmaz, XML segítségével írja le a képet geometriai formák szerint. Ha valaha is rajzolt a kedvenc programozási nyelvén, akkor ismeri a sokszög méretének megadásának, a kitöltési szín beállításának, a szövegfedvény stb. Ötletét. Ez egy egyszerű SVG fájl tartalma: