Kérdezd meg bármelyik webfejlesztőt, mi lassítja a legtöbb weboldalt, és a válasz szinte mindig ugyanaz. A képek. A képoptimalizálás a webre a képek fájlméretének csökkentésének folyamata a vizuális minőség elvesztése nélkül, hogy az oldalak gyorsabban betöltődjenek, anélkül hogy rosszabbul néznének ki. Egyetlen tömörítetlen fénykép több megabájt lehet. Ugyanaz a kép, megfelelően formázva és tömörítve, 100 kilobájt alatt is lehet, a képernyőn látható különbség nélkül. Ez a cikk bemutatja, milyen fájlformátumokat használj, hogyan működik a tömörítés, mikor méretezz át feltöltés előtt, hogyan illeszkedik a lazy loading, és mi hozza a legnagyobb gyakorlati különbséget az oldalad betöltési sebességében.
A képek a legnagyobb tényezők az oldal súlyában a legtöbb weboldalon. Egy öt optimalizálatlan fotót tartalmazó oldal tízszer többet nyomhat, mint kellene. Ez a súly közvetlenül lassabb betöltést, rosszabb Largest Contentful Paint pontszámot jelent, és azt, hogy a látogatók elmennek, mielőtt az oldal befejezné a megjelenítést. Ha tudni szeretnéd, miért hat a betöltési sebesség a cégedre és a keresési helyezéseidre, olvasd el a miért számít a weboldal sebessége cikket.
Miért lassítják a képek a weboldalakat?
Amikor a látogató megnyit egy oldalt, a böngésző letölt minden erőforrást, mielőtt megjelenítené az oldalt. A képek általában a legnagyobbak ezek között. Minden képnek saját kérésre van szüksége, és a böngészőnek meg kell várnia, hogy ezek a kérések befejeződjenek, mielőtt teljesen megjeleníthetné a tartalmat.
Hogyan hatnak a képek a betöltési mérőszámokra
- A képek közvetlenül hatnak a Largest Contentful Paintre (LCP). Ha az oldal legnagyobb látható eleme egy főkép, az LCP az az idő, amíg ez a kép teljesen betöltődik
- Az optimalizálatlan képek növelik az oldal teljes súlyát, ami késlelteti a betöltési idővonal minden más mérőszámát
- Mobilkapcsolaton a hatás felerősödik. Egy 3 MB-os főkép, amely szélessávon két másodperc alatt betöltődik, átlagos mobilhálózaton nyolc másodpercig vagy tovább is tarthat
- Több nagy kép összeadódik. Egy tíz tömörítetlen fotót tartalmazó galéria vagy termékoldal lassabb kapcsolaton nehezen használható lehet
Milyen fájlformátumokat használj a webes képekhez?
JPEG
- A fényképek és a színátmenetes, sok színt tartalmazó képek szabványos formátuma
- Támogatja a veszteséges tömörítést, vagyis a fájlméret csökkentéséhez a képadatok egy része véglegesen eltávolításra kerül
- Kivétel nélkül minden böngésző és eszköz támogatja
- A 75 és 85 közötti minőségbeállítás az eredetinél 60-80 százalékkal kisebb fájlokat ad, a legtöbb fényképnél látható minőségromlás nélkül
PNG
- Az átlátszó hátteret igénylő képek formátuma, beleértve a logókat, ikonokat és a lapos színfelületű grafikákat
- Veszteségmentes tömörítést használ, vagyis nem távolít el adatot, és a kép pontosan megmarad
- A PNG fájlok fényképeknél jelentősen nagyobbak a JPEG-nél. Csak akkor használj PNG-t, ha átlátszóság kell, fényképekhez JPEG-et vagy WebP-t használj
WebP
- Modern formátum, amelyet a JPEG és a PNG leváltására fejlesztettek ki, egyenértékű minőségnél jobb tömörítéssel
- A WebP képek jellemzően 25-35 százalékkal kisebbek az egyenértékű JPEG fájloknál
- Támogatja a veszteséges és a veszteségmentes tömörítést is, és támogatja az átlátszóságot
- Minden jelentős böngésző támogatja. Ha a weboldalépítőd nem alakítja át automatikusan a képeket WebP-vé, feltöltés előtt alakítsd át őket kézzel
AVIF
- Újabb formátum, amely a WebP-nél jobb tömörítést kínál, összehasonlítható minőségnél gyakran 50 százalékkal kisebb a JPEG-nél
- A böngészőtámogatás nő, de még nem általános. Használd az AVIF-et ott, ahol támogatott, automatikus visszalépéssel WebP-re vagy JPEG-re azoknál a böngészőknél, amelyek nem támogatják
Mi az a képtömörítés, és hogyan működik?
A tömörítés a képadatok eltávolításával vagy egyszerűsítésével csökkenti a fájlméretet. Két típusa van, és a különbség határozza meg, mikor melyiket használd.
Veszteséges tömörítés
- Kisebb fájlméret eléréséhez véglegesen eltávolít némi képadatot
- Az eltávolított adatot az alapján választja ki, amit az emberi szem a legkevésbé vesz észre, jellemzően a finom színváltozásokat és a finom textúrarészleteket
- A JPEG-ben és a veszteséges WebP-ben használják
- A 75 és 85 közötti minőségbeállítás látványosan kisebb fájlokat ad, olyan képekkel, amelyek a legtöbb gyakorlati felhasználásra azonosnak látszanak a tömörítetlen eredetivel
- Kerüld, hogy egy már tömörített JPEG-et alacsonyabb minőségbeállítással mentsd újra. Ez egymásra halmozza a tömörítési műtermékeket, és minden mentéssel tovább rontja a képet
Veszteségmentes tömörítés
- Képadat eltávolítása nélkül csökkenti a fájlméretet. Minden képpont pontosan megmarad
- A PNG-ben és a veszteségmentes WebP-ben használják
- Kisebb fájlméret-megtakarítást ad, mint a veszteséges tömörítés, de semmilyen minőségvesztés nélkül
- Termékábrákhoz, képernyőképekhez, szövegben gazdag grafikákhoz vagy bármilyen olyan képhez a legjobb, ahol a tömörítési műtermékek láthatók vagy elfogadhatatlanok lennének
Át kell méretezned a képeket feltöltés előtt?
A fájlméret és a képpontméretek külön kérdések, és mindkettő hat a betöltési sebességre. Egy 4000 képpont széles kép tömörítésének semmi haszna, ha a böngészőnek csak 800 képpont szélesen kell megjelenítenie. A böngésző letölti a teljes 4000 képpontos képet, és a nézetablakban lekicsinyíti, ami sávszélességet pazarol, és minden látogatónál lassítja az oldalt.
Hogyan méretezd helyesen a képeket feltöltés előtt
- Határozd meg a legnagyobb szélességet, amelyen a kép valaha megjelenik. A teljes szélességű asztali képeknél ez jellemzően 1440-1920 képpont
- Az oszlopokban vagy kártyákon lévő képeknél a megjelenített szélesség kisebb, gyakran 400-800 képpont
- Feltöltés előtt méretezd át a képet a legnagyobb megjelenítési méretére
- Retina és nagy sűrűségű kijelzőkhöz szorozd meg a megjelenítési szélességet 1,5-del vagy 2-vel. Egy 400 képpont széles kártyakép 600-800 képpont széles forrásfájlból profitál, hogy élesen jelenjen meg a retina képernyőkön
Mi az a lazy loading, és hogyan hat a képoptimalizálásra?
A lazy loading késlelteti azoknak a képeknek a letöltését, amelyek még nem láthatók a nézetablakban. Ahelyett, hogy az oldal összes képét egyszerre töltené be, a böngésző csak akkor tölti be a képeket, amikor a látogatók közelébe görgetnek. A sok képet tartalmazó oldalakon ez jelentősen csökkenti a kezdeti oldalsúlyt, és javítja a Time to Interactive értékét a görgetés nélkül látható tartalomnál.
- A lazy loadingot natívan támogatja minden jelentős böngésző a képcímkéken lévő
loading="lazy"attribútummal - Ne alkalmazz lazy loadingot a hajtás feletti képekre. A főképnek és a görgetés nélkül látható tartalomnak azonnal be kell töltődnie
- Alkalmazz lazy loadingot a hajtás alatti összes képre, beleértve a termékgalériákat, a blog miniatűröket és az oldalon lejjebb lévő képben gazdag szakaszokat
A lazy loading működésének és használatának teljes bemutatásához olvasd el a mi az a lazy loading és hogyan működik cikket.
Mik azok a reszponzív képek, és miért számítanak?
A reszponzív kép olyan, amely a látogató képernyőmérete szerint más fájlméretet szolgáltat. Ahelyett, hogy egy 1920 képpontos képet küldene minden eszközre, beleértve a 375 képpont széles mobilképernyőn lévő látogatót is, a reszponzív képek lehetővé teszik, hogy a böngésző csak azt kérje, amire szüksége van.
Hogyan csökkentik a reszponzív képek a mobil betöltési időt
- A mobilon lévő látogató a kép 400 képpontos változatát kapja a teljes asztali fájl helyett, ami látványosan csökkenti a letöltési méretet
- A reszponzív képek a
srcsetattribútumot használják, hogy több forrásfájlt határozzanak meg különböző szélességeknél, hogy a böngésző kiválaszthassa a megfelelőt - Azok a weboldalépítők, amelyek ezt automatikusan kezelik, megkímélnek attól, hogy kézzel kelljen több képméretet előállítanod
- A reszponzív képek közvetlenül javítják a Core Web Vitals mutatókat mobilon, ahol a képoptimalizálásnak van a legnagyobb hatása az LCP-re
A Core Web Vitals és az LCP pontozásának bemutatásához olvasd el a mik a Core Web Vitals cikket.
Hogyan optimalizálsz képeket lépésről lépésre?
Feltöltés előtt
- Méretezd át a képet a megfelelő megjelenítési méretre
- Válaszd ki a megfelelő formátumot: WebP fényképekhez és általános grafikákhoz, PNG csak akkor, ha átlátszóság kell
- Tömörítsd 75 és 85 közötti minőségbeállítással a veszteséges formátumoknál
- Ellenőrizd a fájlméretet. A tipikus webes kép legyen 200 KB alatt. A főképek asztali gépen elmehetnek 400 KB-ig, ami ennél nagyobb, azt érdemes feltöltés előtt újragondolni
Feltöltés után
- Adj leíró alt szöveget minden képhez. Ez fontos a hozzáférhetőség szempontjából, és hozzájárul a keresési láthatósághoz. A teljes útmutatóért olvasd el a hogyan használj képeket a weboldaladon cikket
- Alkalmazz lazy loadingot a hajtás alatti összes képre
- Futtass oldalsebesség-tesztet az új képek hozzáadása után. Egyetlen optimalizálatlan kép az oldal minden más sebességjavítását semmissé teheti
Folyamatosan
- Ellenőrizd az új képeket minden feltöltés előtt. Az optimalizálatlan képek könnyen átcsúszhatnak, ha gyorsan dolgozol
- Futtass sebességtesztet az új képek jelentősebb csomagjának közzététele után
- Nézd át a régebbi képeket, ha az oldal a jelenlegi optimalizálási gyakorlatoknál korábbi. A régi képtárak gyakori és elhanyagolt forrásai a sebességproblémáknak
A teljes weboldalad teljesítményének teszteléséhez olvasd el a hogyan teszteld a weboldalad sebességét cikket.
Hogyan kezeli a WEMASY a képoptimalizálást
A WEMASY weboldalépítője feltöltéskor automatikusan tömöríti és átalakítja a képeket. A képeket WebP formátumban szolgáltatja, ahol a böngésző támogatja, a régebbi eszközökhöz tartalék formátumokkal. Feltöltéskor több méret készül, így a mobilon lévő látogatók megfelelő méretű fájlokat kapnak kézi beállítás nélkül.
A lazy loading alapértelmezetten be van kapcsolva a hajtás alatti képeknél az összes WEMASY-vel épített oldalon. Az alt szöveg a platformon belüli képszerkesztőben adható meg. Az oldalsebesség-pontszámok, az LCP-t is beleértve, láthatók a WEMASY analitika vezérlőpultján, a képekkel kapcsolatos problémák oldalanként megjelölve, konkrét javaslatokkal.
Nézd meg, mi tartozik bele a WEMASY weboldalépítőben, vagy nézd át a csomaglehetőségeket az árak oldalon.
Gyakran ismételt kérdések
Mi a képoptimalizálás a webre?
A képoptimalizálás a webre a kép fájlméretének csökkentése, miközben a vizuális minőség a képernyős megjelenítéshez elfogadható marad. Magában foglalja a megfelelő fájlformátum kiválasztását, a kép megfelelő minőségi szintre tömörítését, a tényleges megjelenítési méretre átméretezését, és olyan technikák alkalmazását, mint a lazy loading és a reszponzív képek, hogy a látogatók csak azt a fájlváltozatot töltsék le, amelyre az eszközüknek és a kapcsolatuknak szüksége van. A WEMASY weboldalépítőjével ezt közvetlenül a saját weboldaladon be tudod állítani.
Mi a legjobb képformátum egy weboldalhoz?
A legtöbb webes képhez a WebP a legjobb formátum. Összehasonlítható vizuális minőségnél jelentősen jobb tömörítést kínál, mint a JPEG, támogatja az átlátszóságot, mint a PNG, és minden jelentős böngésző támogatja. Az átlátszó hátteret és képpontpontos pontosságot igénylő képekhez a PNG a megfelelő választás. Az AVIF a WebP-nél is jobb tömörítést kínál, de korlátozottabb a böngészőtámogatása, és automatikus tartalék formátummal használva működik a legjobban.
Mennyivel csökkentheti a képtömörítés a fájlméretet?
A 75 és 85 közötti minőségbeállítású veszteséges tömörítés jellemzően 60-80 százalékkal csökkenti a JPEG fájlméretét, a legtöbb fényképnél látható minőségkülönbség nélkül. A JPEG-ről WebP-re való átváltás azonos minőségi szinten további 25-35 százalékkal csökkenti a fájlméretet. Egy 4 MB-os fotó a helyes átméretezés, a formátumátalakítás és a tömörítési beállítások kombinációjával gyakran 150 KB alá csökkenthető.
Hat a képoptimalizálás a SEO-ra?
Igen. Az optimalizálatlan képek a lassú Largest Contentful Paint pontszám egyik leggyakoribb okai, ami a keresők által rangsorolási jelként használt Core Web Vital. A nagy, tömörítetlen képeket tartalmazó oldalak gyakran rosszul pontoznak az LCP-n azokhoz az oldalakhoz képest, amelyeknek ugyanaz a tartalma optimalizált formában van. Ezenkívül a képek leíró alt szövege hozzájárul a képkeresési láthatósághoz és az oldal általános hozzáférhetőségéhez.
Használj lazy loadingot minden képnél?
Nem. A lazy loadingot csak a hajtás alatt megjelenő képekre kell alkalmazni, vagyis arra a tartalomra, amely az oldal első megnyitásakor nem látható. A hajtás feletti képeknek, beleértve a főképet vagy az oldal tetejének közelében lévő bármely kiemelkedő vizuális elemet, azonnal be kell töltődniük. A lazy loading alkalmazása a hajtás feletti képekre késlelteti az LCP-t, ami rontja a Core Web Vitals pontszámokat és a látogatók élményét.
Mekkorák legyenek a weboldal képei?
A tipikus webes kép legyen 200 KB alatt. A főképek és a teljes szélességű képek asztali gépen elérhetik a 400 KB-ot a betöltési időre gyakorolt jelentős hatás nélkül, feltéve, hogy WebP formátumúak és megfelelően tömörítettek. A kártyákban, miniatűrökben és kisebb tárolókban használt képeket a tényleges megjelenítési szélességükre kell méretezni. Egy 1920 képpontos kép kiszolgálása egy 400 képpontos tárolóban sávszélességet pazarol minden eszközön minden látogatónál.