Piltide Optimeerimine Veebisaidi Kiiruseks: Täielik Juhend

Pildid moodustavad peaaegu poole keskmise veebilehe kogumahust. Halvasti optimeeritud pildid on üks levinumaid põhjusi aeglasele veebisaidi laadimisele.

Hea uudis — piltide optimeerimine on üks lihtsamaid ja mõjusamaid jõudluse parandusi, mida saate teha.

---

Miks Piltide Optimeerimine on Oluline

Mõju Kasutajakogemusele

• 53% mobiilsetest kasutajatest lahkuvad saitidelt, mis laadivad kauem kui 3 sekundit (Google)
• 1-sekundiline viivitus võib vähendada konversioone 7% võrra (Akamai)
• 47% tarbijatest ootab, et veebileht laadiks 2 sekundiga või kiiremini

Mõju SEO-le

Google on teinud lehe kiirusest edetabeli teguri. Core Web Vitals — LCP, CLS ja INP — on nüüd Google'i järjestamisalgoritmi osa. Suured, optimeerimata pildid mõjutavad otseselt LCP-d ja CLS-i.

Mõju Kuludele

Optimeerimata pildid suurendavad ribalaiuse, CDN-i ja salvestuskulusid.

---

1. Samm: Valige Õige Formaat

JPEG / JPG

• Kadulik tihendamine, universaalne tugi
• Parim: fotodele, tootefotodele, taustapiltidele

PNG

• Kadudeta tihendamine, toetab läbipaistvust
• Parim: ekraanipiltidele, logodele, UI elementidele

WebP

• Mõlemad, 25–35% väiksem kui JPEG
• Parim: peaaegu kõigile veebipiltidele
• Tugi: kõik kaasaegsed brauserid

AVIF

• Järgmise põlvkonna formaat, isegi parem kui WebP
• Kasutage koos WebP või JPEG varuversiooniga

SVG

• Vektor (skaleeritav ilma kvaliteedikaota)
• Parim: ikoonidele, logodele, illustratsioonidele

Soovitus: Kasutage WebP-d vaikimisi. Varuvariant — JPEG fotodele, PNG läbipaistvusele.

---

2. Samm: Tihendage Pildid

Soovituslikud Kvaliteedi Seaded

Kasutage TinyImg — kõik töödeldakse brauseris, pildid jäävad privaatseks.

---

3. Samm: Responsiivsed Pildid

srcset Atribuut

<img
  src="image-800.webp"
  srcset="
    image-400.webp 400w,
    image-800.webp 800w,
    image-1200.webp 1200w,
    image-1600.webp 1600w
  "
  sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 800px"
  alt="Kirjeldav alt-tekst"
  width="800"
  height="600"
/>

<picture> Element

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Kirjeldav alt-tekst" width="800" height="600" />
</picture>

---

4. Samm: Laisk Laadimine

<img src="image.webp" alt="Kirjeldus" loading="lazy" width="800" height="600" />

Tähtis: Ärge kasutage laiska laadimist piltidele, mis on nähtavad algvaates (lehe kokkuvolde kohal). Määrake alati width ja height, et vältida CLS-i.

---

5. Samm: Pildi Mõõtmed

<!-- Õige: mõõtmed määratud -->
<img src="photo.webp" alt="Foto" width="800" height="600" />

<!-- Vale: põhjustab paigutuse nihkumist -->
<img src="photo.webp" alt="Foto" />

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

---

6. Samm: CDN Kasutamine

• Cloudflare — tasuta plaan piltide optimeerimisega
• Cloudinary — piltide transformatsioon ja CDN
• imgix — reaalajas töötlus ja tarnimine
• Vercel — sisseehitatud optimeerimine Next.js-ile

---

7. Samm: Auditeerimine ja Mõõtmine

Tööriistad: PageSpeed Insights, Lighthouse, WebPageTest.

---

Kiire Optimeerimise Kontrollnimekiri

• Valige õige formaat (WebP fotodele, PNG läbipaistvusele, SVG ikoonidele)
• Tihendage kõik pildid (TinyImg)
• Responsiivsed pildid srcset ja sizes-iga
• Laisk laadimine lehe kokkuvolde alla jäävate piltide jaoks
• width ja height kõigil <img> elementidel
• CDN piltide tarnimiseks
• Auditeerimine PageSpeed Insights-iga

---

Kokkuvõte

Alustage olemasolevate piltide tihendamisega TinyImg-iga — tasuta, kiire, töötleb kõike lokaalselt brauseris.

Teie kasutajad (ja Google) tänavad teid.