Piltide optimeerimine veebis: WebP, AVIF ja lazy loading

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

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.