Piltide optimeerimine veebis: WebP, AVIF ja lazy loading
Tahad teada, kuidas sinu enda leht seisab?
Pildid on 50–70% kogu lehemahust. Õigesti optimeeritud pildid teevad lehe 3x kiiremaks.
Autor: Kodulehehaldus
Miks pildid on olulised?
Keskmine veebileht on 2.5MB suur. Sellest 1.5–2MB on pildid. Iga megabait on lisamaksumus külastajale (eriti mobiilis) ja aeglustab lehte.
Õige formaadi valimine
| Formaat | Kasutus | Eelis |
|---|---|---|
| WebP | Universaalne | 30% väiksem kui JPEG, toetus 96% brauseritest |
| AVIF | Tulevik | 50% väiksem kui JPEG, toetus 90% |
| JPEG | Vana standard | Kõikjal töötab |
| PNG | Läbipaistvus | Suur fail, kasuta ainult logo/ikoonide jaoks |
| SVG | Vektor-graafika | Skaleerub lõpmatult, väike fail |
Reegel: õige suurus
- Hero-pilt full-width: max 1920px lai
- Sisu pilt: max 1200px lai
- Thumbnail: max 600px lai
- Avatar: max 200px
Mitte kunagi ärge laadige 4000px laia pilti, kui näete 800px.
Komprimeerimise tasemed
- JPEG: 75–85% kvaliteet on optimaalne
- WebP: 75–80%
- AVIF: 50–65% (juba väga hea)
Tööriistad
Tasuta: - TinyPNG / TinyJPG (veebis) - Squoosh (Google'i tööriist) - ImageOptim (Mac) - ShortPixel (WordPress plugin, 100 pilti tasuta/kuus)
Tasulised: - Imagify, ShortPixel premium - Cloudinary (CDN + transformatsioon)
Lazy loading
Lisa kõigile alumistele piltidele:
`html
<img src="..." loading="lazy" width="800" height="600" alt="...">
`
WordPress 5.5+ teeb seda automaatselt.
Responsive images
Anna brauserile valida õige suurus:
`html
<img srcset="img-400.webp 400w, img-800.webp 800w, img-1200.webp 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="img-800.webp" alt="...">
`
Kokkuvõte
Pildi-optimeerimine on kiireim viis lehe kiiruse parandamiseks. 1 tund tööd võib vähendada lehemahtu 70% võrra.
Vajad abi oma kodulehega?
Meie meeskond hooldab, optimeerib ja kaitseb sinu kodulehte. Hinna lepime kokku mahu järgi.
Küsi pakkumistAutor
Kodulehehaldus.com (Innov8it OÜ) – Eesti veebiagentuur, mis teeb, haldab ja optimeerib kodulehti.