Görsel Optimizasyonu Nedir?
Kısa tanım
Görsel optimizasyonu, bir web sayfasındaki görsellerin kabul edilebilir kalitede kalırken mümkün olan en küçük dosya boyutuyla, doğru ölçüde ve doğru zamanda yüklenmesini sağlama işidir. Uygun format seçimi (AVIF, WebP, JPEG, PNG, SVG), cihaza göre boyutlandırma, sıkıştırma, ekran dışındaki görsellerde lazy loading ve en/boy bilgisinin verilmesi temel adımlardır.
Diğer adları: Image Optimization, görsel sıkıştırma, resim optimizasyonu, görsel küçültme, image compression
Görsel neden en büyük kalemdir?
Sayfaların çoğunda indirilen baytların en büyük payını görseller oluşturur ve ana içerik çoğu zaman bir kahraman görselidir. Bu yüzden görsel optimizasyonu hem toplam sayfa ağırlığını hem de LCP süresini doğrudan etkiler. Sorun nadiren tek bir hatadır; genellikle beş ayrı kararın toplamıdır: hangi format, hangi piksel boyutu, hangi sıkıştırma düzeyi, ne zaman yüklenecek ve nereden sunulacak.
Format seçimi
| İçerik | Uygun format | Not |
|---|---|---|
| Fotoğraf, karmaşık görsel | AVIF, WebP, JPEG | Kayıplı sıkıştırma; AVIF ve WebP aynı kalitede genellikle daha küçük dosya üretir |
| Logo, ikon, basit çizim | SVG | Çözünürlükten bağımsızdır, her yakınlaştırmada keskin kalır |
| Saydamlık ve ince detay gereken ekran görüntüsü | PNG ya da kayıpsız WebP | Kayıpsızdır, dosya büyük olabilir |
| Animasyon | Video (<video>) | Animasyonlu GIF, eşdeğer videodan çok daha ağırdır |
AVIF ve WebP güncel tarayıcıların tamamında destekleniyor; Google Görseller de BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF formatlarını dizine ekleyebiliyor. Görselin içine metin gömmek ise iyi bir fikir değil: o metin seçilemez, aranamaz ve küçük ekranlarda okunmaz hâle gelir.
Boyutlandırma ve sıkıştırma
En yaygın israf, 4000 piksel genişliğindeki bir fotoğrafın 400 piksellik bir kartta gösterilmesidir. Tarayıcı fazlalığı küçültür ama kullanıcı yine de tüm baytları indirir. Duyarlı görseller tekniğiyle birkaç genişlikte sürüm hazırlanır ve srcset ile sizes sayesinde cihaz kendisine uyanı seçer. Kayıplı sıkıştırmada kalite ayarı tek bir sihirli sayı değildir: fotoğrafın içeriğine göre gözle karşılaştırarak, farkın fark edilmediği en düşük düzeyi bulmak gerekir. Dosyalardaki EXIF gibi gereksiz meta veriler de temizlenebilir.
<picture>
<source type="image/avif" srcset="/img/ekip-640.avif 640w, /img/ekip-1280.avif 1280w" sizes="(min-width: 64rem) 50vw, 100vw">
<img src="/img/ekip-1280.jpg"
srcset="/img/ekip-640.jpg 640w, /img/ekip-1280.jpg 1280w"
sizes="(min-width: 64rem) 50vw, 100vw"
width="1280" height="853" loading="lazy" decoding="async"
alt="Proje ekibi beyaz tahta başında">
</picture>width ve height değerleri tarayıcının en/boy oranını önceden hesaplayıp yer ayırmasını sağlar; bu, CLS kaynaklı kaymaları önler. picture kullanılsa bile bir img yedeği ve onun src değeri mutlaka bulunmalıdır.
Yükleme zamanı ve teslimat
Ekranın altında kalan görsellere loading="lazy" eklemek, kullanıcı oraya yaklaşana kadar indirmeyi erteler. Aynı ayar ilk ekrandaki ana görsele uygulanırsa LCP gecikir; o görsel için bunun yerine fetchpriority="high" düşünülmelidir. Teslimat tarafında görsel odaklı bir CDN ya da görsel servisi, tek bir ana dosyadan istenen genişlikte ve formatta sürümleri anında üretip önbelleğe alabilir. Bu, editörün her yüklemede beş farklı dosya hazırlamasından çok daha sürdürülebilir bir iş akışıdır.
Optimizasyonun SEO ile kesiştiği yer
Dosya boyutu ve format performansı ilgilendirir; görselin aramada bulunması ise ayrı bir konudur. Açıklayıcı dosya adı, anlamlı alt metni ve görselin çevresindeki metin görsel SEO kapsamındadır. İkisi birbirini tamamlar: hızlı ama anlamsız adlandırılmış bir görsel de, iyi etiketlenmiş ama 3 MB'lık bir görsel de yarım iştir. Hızlı bir kontrol için SEO Analiz Aracı görsel teslimatıyla ilgili bulguları raporlar.