Kako optimizovati slike za web?

Slike su najčešći razlog sporog sajta i najlakši za popravku. Redosled je uvek isti.

1. Dimenzija

Slika koja se prikazuje u okviru od 800 piksela ne sme biti široka 4.000. Smanji na stvarnu veličinu prikaza, uz rezervu za retina ekrane (dvostruko).

2. Format

• WebP — podrazumevani izbor, 25–35% manji od JPG-a pri istom kvalitetu
• SVG — za logotipe i ikone; vektor, uvek oštar
• JPG — rezerva za starije pregledače
• PNG — samo kad treba providna pozadina

3. Kompresija

Kvalitet oko 80 se golim okom ne razlikuje od 100, a fajl je često upola manji.

4. U kodu

• loading="lazy" za slike ispod pregiba
• Upisana širina i visina — sprečava poskakivanje sadržaja
• srcset — različite veličine za telefon i računar
• Opisan alt tekst — pristupačnost i SEO

Ovim se strana od 6 MB obično svede na ispod 500 KB.