Image Optimization
Görüntü Optimizasyonu (Web Performansı)
Kabul edilebilir görsel kaliteyi koruyarak görüntü dosya boyutlarını azaltmaya yönelik teknikler ve süreçler; web sayfası yükleme hızlarını artırır ve bant genişliği kullanımını azaltır.
Teknik Detay
Görüntü optimizasyon hattı şunları içerir: biçim seçimi (fotoğraflar için AVIF > WebP > JPEG, grafikler için SVG > PNG), hedef kalitede sıkıştırma (JPEG q80-85, WebP q75-80, AVIF q60-70), duyarlı yeniden boyutlandırma (kesme noktalarında srcset oluşturma: 320w, 640w, 1024w, 1920w) ve meta veri temizleme. Araçlar: mozjpeg (trellis Huffman optimizasyonu), oxipng (kaba kuvvet PNG sıkıştırma), cwebp/cavif (kodlayıcılar), sharp/libvips (hızlı yeniden boyutlandırma hattı). Web metrikleri: LCP (En Büyük İçerikli Boyama) doğrudan görüntü boyutundan etkilenir. İleri teknikler: LQIP (Düşük Kaliteli Görüntü Yer Tutucusu), eşzamansız çözümleme (decoding="async"), getirme önceliği (fetchpriority="high") ve görüntü CDN'leri (anında dönüşümler).
Ornek
```javascript
// Image compression via Canvas
canvas.toBlob(
blob => console.log(`Size: ${(blob.size/1024).toFixed(0)} KB`),
'image/jpeg',
0.8 // quality: 0.0 (smallest) to 1.0 (best)
);
// WebP output (25-34% smaller than JPEG)
canvas.toBlob(cb, 'image/webp', 0.8);
```