Slike so pogosto najtežji elementi na spletni strani. Tukaj je, kako jih optimizirati brez žrtvovanja kakovosti.
Izberite pravi format
Uporabite WebP ali AVIF za fotografije, SVG za ikone in logotipe ter PNG le, ko je potrebna prosojnost. AVIF ponuja 50% boljše stiskanje kot WebP.
Tehnike implementacije
Uvedite leno nalaganje z loading="lazy", uporabite srcset za odzivne slike in dodajte atribute širine/višine, da preprečite premikanje postavitve.
CDN in predpomnjenje
Postrezite slike prek CDN-ja, nastavite ustrezne glave predpomnilnika in razmislite o uporabi slikovnih CDN-jev, ki samodejno optimizirajo sproti.
Orodja za uporabo
Squoosh, ImageOptim, Sharp (Node.js) in ImageMagick so odlični za paketno optimizacijo. Avtomatizirajte to v svojem procesu gradnje.
Hitri kontrolni seznam
- ✓ Stisnite vse slike
- ✓ Uporabite sodobne formate (WebP/AVIF)
- ✓ Uvedite leno nalaganje
- ✓ Dodajte odzivni srcset
- ✓ Nastavite točne dimenzije
