Egyetlen nem optimalizált hero kép többet nyomhat, mint egy teljes weboldal HTML-je, CSS-e és JavaScriptje együttvéve. A képek az átlagos weboldal összes bájtjának körülbelül 50%-át teszik ki, így ezek a legnagyobb egyedi eszközöd a teljesítmény javításához. Mégis a képoptimalizálás a webfejlesztés és a tartalomkészítés egyik legkevésbé megértett aspektusa marad.
A hatás messze túlmutat a betöltési sebességen. A képméret befolyásolja a keresőrangsorodat, a tárhelyszámládat, a felhasználóid adatcsomagjait, sőt a konverziós arányaidat is.
A teljesítmény-kapcsolat: Core Web Vitals és LCP
A Google Core Web Vitals mutatók olyan metrikák, amelyek közvetlenül befolyásolják a keresőrangsorolást. Közülük a Largest Contentful Paint (LCP) méri, mennyi idő alatt jelenik meg a legnagyobb látható elem a képernyőn. A legtöbb esetben ez az elem egy kép.
A Google a 2,5 másodperc alatti LCP-t tekinti „jónak". A 2,5 és 4 másodperc közötti „fejlesztésre szorul". A 4 másodperc feletti „gyenge". Egy 3 MB-os hero kép normál kapcsolaton könnyen átlökheti az LCP-t a 4 másodperces küszöb fölé, az egész oldaladat a „gyenge" kategóriába húzva.
A következmények kézzelfoghatók:
- SEO rangsor-esés — a Core Web Vitals rangsorolási jelzés; a lassú oldalak pozíciót veszítenek
- Magasabb visszafordulási arány — a mobilfelhasználók 53%-a elhagyja az oldalt, ha 3 másodpercnél tovább tölt
- Alacsonyabb konverziók — minden további másodperc betöltési idő körülbelül 7%-kal csökkenti a konverziókat
A 100 KB-os ökölszabály A weboldalak tartalomképeihez 100 KB alatti méretre törekedj képenként. Teljes szélességű hero képekhez maradj 200 KB alatt. Ezek a célok elérhetők modern formátumokkal és megfelelő tömörítéssel, látható minőségveszteség nélkül.
Veszteséges vs. veszteségmentes: a kompromisszum megértése
Minden képtömörítés két kategóriába esik, és a rossz választás a felduzzadt fájlok gyakori forrása.
A veszteségmentes tömörítés hatékonyabb kódolási módszerekkel csökkenti a fájlméretet. Minden pixel pontosan megmarad. A csökkentés szerény — jellemzően 10-30%. A PNG veszteségmentes tömörítést használ.
A veszteséges tömörítés elveti az emberi szem számára valószínűleg észrevehetetlen információkat. A színárnyalatok pontossága átmenetekben, finom textúra-részletek és alig észrevehető tónusbeli variációk egyszerűsödnek. A csökkentés drámai — jellemzően 70-90%. A JPEG és a WebP (veszteséges módban) ezt a megközelítést alkalmazza.
A kritikus felismerés az, hogy a 80-85%-os minőségű veszteséges tömörítés vizuálisan megkülönböztethetetlen az eredetitől fényképek esetén. A perceptuális különbség lényegében nulla, de a fájlméret-különbség hatalmas.
| Megközelítés | Méretcsökkentés | Minőségvesztés | Legjobb ehhez |
|---|---|---|---|
| Veszteségmentes (PNG) | 10-30% | Nincs | Logók, képernyőképek, szöveges grafikák |
| Veszteséges 85%-on (JPEG/WebP) | 70-85% | Észrevehetetlen | Fotók, illusztrációk, hátterek |
| Veszteséges 60%-on (JPEG/WebP) | 85-95% | Közeli vizsgálatnál észrevehető | Miniatűrök, dekoratív képek |
A gyakori hiba: veszteségmentes tömörítést használni fényképes tartalomhoz, vagy veszteséges tömörítést túl alacsony minőséggel fontos vizuális elemekhez. Annak megértése, melyik képnek melyik kezelés kell, a hatékony optimalizálás kulcsa.
A formátum számít: ugyanaz a kép, vadul eltérő méretek
A képformátum választása ugyanolyan hatással van, mint a tömörítési szint. Egy PNG-ként mentett fénykép 5-10-szer nagyobb lehet, mint ugyanaz a kép JPEG-ként 85%-os minőséggel, érzékelhető különbség nélkül.
A JPEG az univerzális szabvány fotókhoz. Mindenhol támogatott, és kiváló veszteséges tömörítést kínál fényképes tartalomhoz.
A WebP 25-35%-kal kisebb fájlokat kínál, mint a JPEG azonos vizuális minőség mellett, az átlátszóság támogatásának bónuszával. Minden modern böngésző támogatja. Ma ez a legjobb általános célú formátum a webhez.
Az AVIF a legújabb kihívó, még jobb tömörítéssel, mint a WebP (nagyjából 20%-kal kisebb), de a böngészőtámogatás és a kódolási sebesség még felzárkózóban van.
A PNG csak azokhoz a képekhez a helyes választás, amelyeknél pixelpontos reprodukció szükséges — logók, ikonok, szöveges képernyőképek, vagy átlátszóságot igénylő képek, ahol a WebP nem opció.
Sávszélesség és tárolás: a rejtett költségek
Személyes blogok és kis weboldalak esetén a sávszélesség-költségek elhanyagolhatónak tűnhetnek. De gyorsan skálázódnak:
- Egy 2 MB képekkel rendelkező oldal, havi 10 000 megtekintéssel, havonta 20 GB képadatot továbbít
- Optimalizáld ezeket a képeket összesen 400 KB-ra, és 4 GB-ot továbbítasz — 80%-os csökkentés
- Méretezett tárhelyű oldalak esetén ez közvetlenül alacsonyabb számlát jelent
A tárolás is összeadódik. Egy 5000 termékkel rendelkező e-kereskedelmi oldal, 4 nem optimalizált képpel termékenként 2 MB-osan, 40 GB-ot használ csak termékfotókra. Optimalizálva egyenként 200 KB-ra, ez 4 GB-ra csökken.
Reszponzív képek és az eszközprobléma
Egy 1920 pixel széles kép 375 pixel széles telefon képernyőjén megjelenítve a pixeljeinek több mint 96%-át pazarolja el. A böngésző letölti a teljes képet, majd az adatok nagy részét eldobja, hogy elférjen a képernyőn.
A megoldás a reszponzív képek — különböző képméretek kiszolgálása különböző eszközöknek. A mobilos látogató 400px széles képet kap; az asztali látogató 1200px széles verziót. A koncepció egyértelmű, de a megvalósítás a srcset attribútumok, a sizes leíró és a picture elemmel történő art direction megértését igényli.
Lazy loading: ne töltsd le, ami nem látható
A hajtás alatti képek — amelyek görgetés nélkül nem láthatók — nem kell azonnal betöltődniük. A lazy loading elhalasztja a letöltésüket, amíg a felhasználó közelükbe nem görget. Ez azt jelenti, hogy a kezdeti oldalbetöltés csak a ténylegesen látható képeket tartalmazza, drámaian javítva az észlelt teljesítményt.
A modern böngészők támogatják a natív lazy loadingot egyetlen HTML attribútummal. Ez az egyik legegyszerűbb és leghatékonyabb elérhető optimalizálás.
CDN-ek: képek kiszolgálása a peremről
A Content Delivery Network (tartalomkézbesítő hálózat) a képeid másolatait a világ minden táján elosztott szervereken tárolja. Egy tokiói látogató a közeli szerverről kapja a képeket, nem a párizsi origin szerverről. Ez csökkenti a késleltetést, javítja a betöltési időket és csökkenti az infrastruktúrád terhelését.
Sok modern CDN azonnali képátalakítást is kínál — automatikus WebP-re konvertálás, különböző eszközökre méretezés és optimális tömörítés alkalmazása az eredeti fájlok megérintése nélkül.
Tovább
A képoptimalizálás olyan téma, ahol a kis javulások jelentős eredményekké adódnak össze. Ha kísérleteznél a tömörítési szintekkel és valós időben látnád a minőség-méret kompromisszumot, a toolk.io kínál egy Képtömörítőt, amely mindent a böngésződben dolgoz fel. Képek tömörítésének és formátumok közötti konvertálásnak az oktatóanyagai szintén elérhetők az oldalon.