Kuidas optimeerida piltide laadimist veebilehel?

1. Kompresseerimine: Kasutage tööriistu piltide suuruse optimeerimiseks ilma kvaliteedi kaotamata (näiteks TinyPNG, Compressor.io).
2. Formaadid: Valige kaasaegsed formaadid nagu WebP või AVIF, mis pakuvad paremat tihendamist võrreldes JPEG ja PNG-ga. Vanemate brauserite jaoks kasutage <picture> või srcset atribuut fallback-ks.
3. Lazy Loading: Viivitage piltide laadimist väljaspool nähtavat ala kuni nende vajadus. Kasutage sisseehitatud loading="lazy" või JavaScripti raamatukogusid.
4. Reageerivad pildid: Pakkuge erinevaid versioone piltidest erinevate ekraanisuuruste ja resolutsioonide jaoks, kasutades <picture> elementi või srcset/sizes atribuute.
5. CDN (Content Delivery Network): Hoidke pilte CDN-is, et kiiremini edastada sisu kasutajatele nende lähimast asukohast.
6. Kohesus: Seadistage õiged vahemälu päised serveris, et brauser saaks pilte salvestada ja neid laadida kohalikust vahemälust korduvate külastuste ajal.
7. Placeholder/Blurhash: Näidake madala kvaliteediga "placeholder" või genereeritud Blurhash, kuni täispikk pilt laaditakse.

Näide loading="lazy" kasutamisest:

<img src="image.jpg" alt="Pildi kirjeldus" loading="lazy">

Näide <picture> kasutamisest erinevate formaatide jaoks:

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Pildi kirjeldus">
</picture>