Optimizacija slika za web: kompresija, WebP, AVIF i alt tagovi

🖼️ Zašto slike usporavaju sajt

Fotografija sa telefona ima nekoliko megabajta i hiljade piksela u širinu, a na ekranu se prikazuje u 400 piksela. Posetilac skida sve to, a vidi mali deo. To odmah pogađa LCP, mobilne podatke i strpljenje posetioca.

🧾 Formati ukratko

• JPG: univerzalan, dobar za fotografije, ali težak u odnosu na novije.
• PNG: za grafike sa providnošću, ali težak za fotografije.
• WebP: moderan format koji podržavaju svi savremeni browseri, obično znatno lakši od JPG-a pri sličnom kvalitetu.
• AVIF: još efikasniji u kompresiji, podržan u savremenim browserima, ali sporiji za pravljenje.
• SVG: za logotipe, ikone i ilustracije. Vektorski je, mali i oštar na svakom ekranu.

Praktično pravilo: AVIF i WebP za fotografije, SVG za logo i ikone, JPG kao rezerva gde je potrebno.

📐 Pet pravila

1. Prava dimenzija. Ne šaljite sliku od 4000 piksela tamo gde se prikazuje 800.
2. Više veličina (srcset) da telefon dobije manju sliku od računara.
3. Odloženo učitavanje (loading="lazy") za slike ispod prvog ekrana. Glavnu sliku na vrhu ne odlažite.
4. Zadajte širinu i visinu, da se stranica ne pomera dok se slika učitava (CLS).
5. Opisni alt tekst koji govori šta je na slici, korisno za pristupačnost i SEO.

🏷️ Imena fajlova

Umesto IMG_2045.jpg koristite restoran-beograd-terasa.webp. Kratko, opisno, bez razmaka i dijakritike.

🛠️ Kako mi to radimo

U našem procesu svaka slika se automatski pravi u AVIF i WebP formatu u nekoliko veličina, sa zadatim dimenzijama i odloženim učitavanjem, a ilustracije su SVG. Zato su naši sajtovi laki i kad imaju mnogo vizuala. Više u tekstu o Core Web Vitals i na stranici izrada sajta.