L; d művészet; optimalizálja a képeket az internetes formátumválasztáshoz, a tömörítéshez és a bevált gyakorlatokhoz
A képek azok az elemek, amelyek a legtöbbet mérik a weboldalakon. A képek azonban elengedhetetlenek a cikkek vagy termékek bemutatásához (ha Ön e-kereskedő). Ha javítani szeretné webhelye teljesítményét és betöltési sebességét, akkor elsőbbséggel kell rendelkeznie: csökkentse képei súlyát és a hozzájuk társított HTTP kérések számát. Ez magában foglalja mind a tartalmába integrált képeket, mind a weboldal tervezésének részét képező képeket (logó, ikonok stb.).
Ez a cikk a képek webes optimalizálására irányul. Több részre osztottuk. Először visszatérünk a három fő képformátumra az interneten: JPEG, GIF és PNG. Mi jellemzi ezeket a formátumokat? Mikor részesítsük előnyben egyiket a másikkal szemben? Milyen korlátozások vannak társítva az egyes formátumokkal? Mindezekre a kérdésekre válaszolunk.
Ezután három tippet adunk a képek webes mentésére és azok súlyának csökkentésére, valamint a weboldal teljesítményének optimalizálására (a betöltési sebesség szempontjából). Végül röviden áttekintünk néhány technikát a képekhez kapcsolódó HTTP-kérelmek számának csökkentésére a weboldalak betöltésekor (spritek, CSS3, Data URI-k).
Készen áll a képek webes optimalizálására ?
Új képbankokat keres webhelye látványának javítása érdekében? Meghívjuk Önt, hogy fedezze fel a Top 10 képbankokat és fotóoldalakat.
Válassza ki a képeinek megfelelő formátumot: JPEG vagy GIF vagy PNG ?
Az interneten három fő képformátum létezik: JPEG, GIF és PNG formátum. Ez az egyetlen három formátum, amely minden böngészőben helyesen jelenik meg. Bemutatjuk Önnek ezeknek a formátumoknak a főbb erősségeit és gyengeségeit, azok használatának kontextusát, tippeket a megfelelő használatukhoz és a képek ezen különböző formátumokra történő optimalizálásához.
JPEG formátum (kiváló minőségű, gyengén összenyomható)
A JPEG formátum 1986-ban jött létre, így a legrégebbi formátum. Ez a formátum ideális fényképekhez (ezt a formátumot használja a legtöbb digitális fényképezőgép), és általánosabban olyan képekhez, amelyek nagyon széles szín- és kontrasztspektrumot használnak (több mint 16 millió szín kezelhető). Másrészt a JPEG tömörítése információvesztéshez vezet (ellentétben a PNG formátummal). Ha a JPEG kép gyenge minőségű, mert túl tömörített, akkor megjelenik (pixeles és elmosódott kép). A JPEG formátum a tömörítés során elég gyorsan elveszíti minőségét. Ezenkívül a tömörítés esetén törölni kívánt információk meghatározásához használt algoritmus nem túl hatékony. Az elnyomott információkat gyakran a kép alacsony kontrasztú területein választják ki. Ha képe nagy pixel-pixel kontraszt különbségeket tartalmaz, a megjelenítés gyenge lesz: egyes területek sértetlenek maradnak a tömörítés során, mások pedig ennek következtében nagyon észrevehető információvesztést szenvedtek el. Ami hirtelen kontrasztot és nem kívánt hatásokat eredményez. Minél több különböző színt és színt tartalmaz a kép, annál kevésbé tömöríthető a JPEG súlya.
Ezen hibák ellenére a JPEG továbbra is a web kiemelt formátuma. Különösen azért, mert lehetővé teszi a kiváló minőségű képek nagyon kielégítő renderelését, és nagyobb információsűrűséget kínál, mint más formátumok. Konkrétan több információra lesz szüksége egy 500 KB-os JPEG formátumban, mint egy 500 KB-os PNG-ben. Ez az információsűrűség vizuálisan gazdag és nagyon minőségi képek készítését teszi lehetővé az optimalizált súly érdekében.
A weboldal képeinek optimalizálása az egyik fő módszer a webhelye oldalainak betöltési idejének csökkentésére. Ha tovább szeretne lépni, és ha webhelye a WordPress alatt van, fedezzen fel 9 technikát a WordPress webhelyének betöltési sebességének javításához.
Javasoljuk, hogy a Photoshop "Mentés webre" funkciójával tesztelje a JPEG-képek minőségi különbségét a választott méret és tömörítési szint függvényében. Valóban, amikor képet ment a Photoshopba, akkor választhat a „Mentés másként” és a „Mentés webre” között. Ha a „Mentés webre” gombra kattint, a Photoshop olyan funkciókat kínál, amelyek optimalizálják a képet és a minőséget. Az előnézeti funkció lehetővé teszi az optimalizálás eredményének azonnali megtekintését. A "Mentés az internetre" funkció célja, hogy sikeresen kombinálja a jó minőséget és a csökkentett súlyt.
Azt is tudni kell, hogy az interneten található JPEG-fájlok többsége progresszív JPEG-fájl. Ez azt jelenti, hogy a kép rossz minőségben kezd megjelenni az oldalon, mielőtt normál állapotban megjelenne. Ez lehetővé teszi az oldal gyorsabb betöltését. Minden böngésző támogatja a progresszív JPEG fájlokat, de egyesek hosszú ideig tartanak a képek megjelenítéséig. A progresszív JPEG formázása a lejátszási eszközöktől (és azok processzorától) is függ. Például a progresszív JPEG-ek (egyelőre) nem működnek a Mobile Safari-n, amely az iPhone és iPad alapértelmezett böngészője. E néhány támogatási probléma ellenére a progresszív JPEG még mindig jó módszer a felhasználói élmény optimalizálására és a JPEG tömörítésére az információk elvesztése nélkül.