Attēlu Optimizācija Tīmekļa Vietnes Ātrumam: Pilnīgs Ceļvedis

Attēli veido gandrīz pusi no vidējās tīmekļa lapas kopējā svara. Slikti optimizēti attēli ir viens no biežākajiem iemesliem lēnai tīmekļa vietnes ielādei.

Labā ziņa — attēlu optimizācija ir viens no vieglākajiem un efektīvākajiem uzlabojumiem, ko varat veikt.

---

Kāpēc Attēlu Optimizācija ir Svarīga

Ietekme uz Lietotāju Pieredzi

• 53% mobilo lietotāju atstāj vietnes, kas ielādējas ilgāk par 3 sekundēm (Google)
• 1 sekundes aizkave var samazināt konversijas par 7% (Akamai)
• 47% patērētāju sagaida, ka lapa ielādēsies 2 sekundēs vai ātrāk

Ietekme uz SEO

Google ir padarījis lapas ātrumu par ranžēšanas faktoru. Core Web Vitals — LCP, CLS un INP — tieši ietekmē ranžēšanu. Lieli, neoptimizēti attēli tieši ietekmē LCP un CLS.

Ietekme uz Izmaksām

Neoptimizēti attēli palielina joslas platuma, CDN un glabāšanas izmaksas.

---

1. Solis: Izvēlieties Pareizo Formātu

JPEG / JPG

• Zudumu saspiešana, universāls atbalsts
• Piemērots: fotogrāfijām, produktu attēliem, fona bildēm

PNG

• Bezudumu saspiešana, atbalsta caurspīdīgumu
• Piemērots: ekrānuzņēmumiem, logotipiem, UI elementiem

WebP

• Gan zudumu, gan bezudumu; 25–35% mazāks par JPEG
• Piemērots: gandrīz visiem tīmekļa attēliem
• Atbalsts: visi modernās pārlūkprogrammas

AVIF

• Nākamās paaudzes formāts, vēl labāks par WebP
• Izmantojiet ar WebP vai JPEG rezerves variantu

SVG

• Vektors (mērogojams bez kvalitātes zaudēšanas)
• Piemērots: ikonām, logotipiem, ilustrācijām

Ieteikums: Izmantojiet WebP kā noklusējuma formātu. Rezerves variants — JPEG fotogrāfijām, PNG caurspīdīgumam.

---

2. Solis: Saspiediet Attēlus

Ieteicamie Kvalitātes Iestatījumi

Izmantojiet TinyImg — viss notiek pārlūkprogrammā, attēli paliek privāti.

---

3. Solis: Reaģējoši Attēli

srcset Atribūts

<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="Aprakstošs alt teksts"
  width="800"
  height="600"
/>

<picture> Elements

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Aprakstošs alt teksts" width="800" height="600" />
</picture>

---

4. Solis: Slinkā Ielāde

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

Svarīgi: Neizmantojiet slinkās ielādes attēliem, kas redzami sākotnējā skatā (virs locījuma). Vienmēr norādiet width un height, lai novērstu CLS.

---

5. Solis: Attēlu Izmēri

<!-- Pareizi: norādīti izmēri -->
<img src="photo.webp" alt="Foto" width="800" height="600" />

<!-- Nepareizi: izraisa izkārtojuma nobīdi -->
<img src="photo.webp" alt="Foto" />

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

---

6. Solis: CDN Izmantošana

• Cloudflare — bezmaksas līmenis ar attēlu optimizāciju
• Cloudinary — attēlu transformācija un CDN
• imgix — reāllaika apstrāde un piegāde
• Vercel — iebūvēta optimizācija Next.js

---

7. Solis: Audits un Mērījumi

Rīki: PageSpeed Insights, Lighthouse, WebPageTest.

---

Optimizācijas Kontrolsaraksts

• Izvēlieties pareizo formātu (WebP fotogrāfijām, PNG caurspīdīgumam, SVG ikonām)
• Saspiediet visus attēlus (TinyImg)
• Reaģējoši attēli ar srcset un sizes
• Slinkā ielāde attēliem zem locījuma
• width un height visiem <img> elementiem
• CDN attēlu piegādei
• Audits ar PageSpeed Insights

---

Secinājums

Sāciet ar attēlu saspiešanu TinyImg — bezmaksas, ātri, viss notiek lokāli jūsu pārlūkprogrammā.

Jūsu lietotāji (un Google) jums pateiks paldies.