Kaip optimizuoti vaizdų įkėlimą interneto puslapyje?

1. Suspaudimas: Naudokite įrankius vaizdų dydžiui optimizuoti be kokybės praradimo (pavyzdžiui, TinyPNG, Compressor.io).
2. Formatų pasirinkimas: Pasirinkite šiuolaikinius formatus, tokius kaip WebP ar AVIF, kurie užtikrina geresnį suspaudimą nei JPEG ar PNG. Senesniems naršyklėms naudokite <picture> arba srcset atributą kaip fallback.
3. Lazy Loading: Atidėkite vaizdų įkėlimą už matomos srities, kol jie bus reikalingi. Naudokite loading="lazy" arba JavaScript bibliotekas.
4. Reaguojantys vaizdai: Pateikite skirtingas vaizdų versijas skirtingiems ekranų dydžiams ir raiškoms, naudodami <picture> elementą arba srcset/sizes atributus.
5. CDN (Content Delivery Network): Talpinkite vaizdus CDN, kad turinys būtų pristatomas greičiau iš artimiausios vietos.
6. Kaušas: Nustatykite tinkamus cache antraštes serveryje, kad naršyklė galėtų saugoti vaizdus ir juos įkelti iš vietinio cache per pakartotinius apsilankymus.
7. Placeholder/Blurhash: Rodykite žemo kokybės "placeholder" arba sugeneruotą Blurhash, kol įkeliamas pilnas vaizdas.

Pavyzdys naudojant loading="lazy":

<img src="image.jpg" alt="Vaizdo aprašymas" loading="lazy">

Pavyzdys naudojant <picture> skirtingiems formatams:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Vaizdo aprašymas">
</picture>