EMZETT.
Giriş yap

Emzett Wiki

Webde görselleri optimize etmek: biçimler, duyarlı görseller ve tembel yükleme

Properties1
tagsglossar, web, performance

2 dakika okuma süresi

Webde görselleri optimize etmek: biçimler, duyarlı görseller ve tembel yükleme

Kısaca: Görseller genellikle bir web sayfasının en büyük kısmıdır; modern biçimler (WebP, AVIF), uygun boyutlar (srcset), tembel yükleme ve sabit boyutlar yüklemeyi hızlandırır ve düzen kaymalarını önler.

Biraz daha ayrıntılı: 300 piksellik bir kartta 4 MB’lık bir fotoğraf israftır. Görsel optimizasyonu LCP’yi (en büyük görünür öğe) iyileştirir, veri hacminden tasarruf sağlar ve SEO ile çevre için iyidir.

Ayrıntılı

Doğru biçim

  • JPEG: fotoğraflar, her yerde desteklenir.
  • PNG: şeffaflıklı, keskin kenarlı grafikler (fotoğraflar için büyük).
  • WebP: yaklaşık %25 ila 35 daha küçük, şeffaflık, animasyon.
  • AVIF: çoğu zaman daha da küçük (HDR), üretmesi daha yavaş.
  • SVG: logolar, simgeler, diyagramlar (vektör, ölçeklenebilir, CSS ile biçimlendirilebilir; bilinmeyen SVG’lerdeki betiklerden kaçın).
  • GIF: animasyonlar için daha iyisi MP4/WebM veya animasyonlu WebP.

Kalite 70 ila 85 genellikle yeterlidir; meta verileri (EXIF/GPS) kaldır (gizlilik).

Duyarlı görseller

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="533" alt="Description" loading="lazy" decoding="async">
<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="Description" width="800" height="533">
</picture>

srcset/sizes, tarayıcının ekran genişliğine ve piksel yoğunluğuna uygun olanı seçmesini sağlar; <picture> biçimleri ve sanat yönetimini (telefonlarda farklı kırpma) sunar.

Tembel yükleme ve düzen

  • loading="lazy" görselleri yalnızca yakına kaydırıldığında yükler; en üstteki en önemli görsel (LCP) tembel olmamalı, bunun yerine fetchpriority="high"/preload.
  • width ve height (veya aspect-ratio) belirt, böylece düzen kayması (CLS) olmaz.
  • Erişilebilirlik için alt metinleri; dekoratif görseller alt="".
  • Hız izlenimi için yer tutucular (blur hash/baskın renk).
  • CSS’te arka plan görselleri: image-set(); iframe’ler/videolar da tembel.

Araçlar ve teslimat

  • Next.js next/image, Astro, Nuxt Image: boyutları/biçimleri önbellekle otomatik üretir.
  • Derleme/betikte Sharp, Squoosh, cwebp, avifenc, ImageMagick.
  • Görsel CDN’leri (Cloudinary, imgix, Vercel Image Optimization): boyut/biçim URL ile.
  • Önbellekleme: dosya adında karma olan uzun Cache-Control; bir CDN kullan.
  • Denetleme: Lighthouse, WebPageTest, DevTools ağ (boyut ve görüntü boyutu karşılaştırması).
  • Haklar: görsel haklarına/lisansa uy, insan fotoğrafları yalnızca izinle. Wiki/sayfa görselleri: yüklemeden önce sıkıştır.

Ayrıca bak: WebP, Lighthouse ve Core Web Vitals, CDN