Görsel Optimizasyonu Nedir?
Görsel optimizasyonu, bir görselin en düşük dosya boyutuyla en yüksek görsel kaliteyi sunması sürecidir. Bu sadece bir "sıkıştırma" işlemi değildir; doğru formatı seçmek, doğru boyutları tanımlamak ve yükleme stratejisini belirlemek bir bütündür.
Görseller Neden Web Performansının Düşmanıdır?
İstatistikler gösteriyor ki; ortalama bir web sayfasının toplam ağırlığının %60'ından fazlasını görseller oluşturur. Optimize edilmemiş bir görsel, sayfanın açılışını saniyelerce geciktirebilir, mobil veri tüketimini artırabilir ve kullanıcıyı daha siteyi görmeden kaçırabilir.
Google Görsel Performansını Nasıl Değerlendirir?
Google, Core Web Vitals (Önemli Web Verileri) ile görsel performansını üç ana dalda inceler: LCP (Largest Contentful Paint - En Büyük İçerikli Boyama), CLS (Cumulative Layout Shift - Kümülatif Düzen Kayması) ve INP (Interaction to Next Paint). Özellikle ana görselinizin (LCP) ne kadar hızlı yüklendiği doğrudan bir sıralama sinyalidir.
Klasik Görsel Formatlarının Sınırları
90'lı yıllardan kalan JPG, PNG ve GIF formatları artık eskimiştir. JPG şeffaflık desteklemez, PNG şeffaftır ama çok ağırdır, GIF ise animasyonlar için yetersiz bir renk paletine sahiptir. Modern web artık "yeni nesil" formatları talep ediyor.
WebP Nedir?
Google tarafından geliştirilen WebP, hem kayıplı hem de kayıpsız sıkıştırmayı destekler. Bir JPG'ye göre %30, PNG'ye göre %26 daha yüksek sıkıştırma sunar. Bugün tüm modern tarayıcılar tarafından desteklenen "altın standart" bir formattır.
AVIF Nedir?
AVIF, yeni nesil AV1 video kodekini temel alan devrimsel bir görsel formatıdır. WebP'den bile %20-%30 daha başarılı sıkıştırma yapar. Özellikle karmaşık fotoğraflarda ve renk geçişlerinde (gradient) rakipsizdir.
WebP vs AVIF Karşılaştırması
AVIF daha yüksek sıkıştırma sunsa da, dosyanın tarayıcı tarafından çözümlenme (decode) maliyeti WebP'ye göre biraz daha yüksektir. Ayrıca tarayıcı desteği WebP kadar geniş değildir. Hibrit bir model kullanmak (önce AVIF, desteklenmiyorsa WebP) en profesyonel yaklaşımdır.
SVG Ne Zaman Kullanılmalı?
Logolar, ikonlar ve matematiksel grafikler için SVG rakipsizdir. Vektörel olduğu için ne kadar büyütülürse büyütülsün kalitesi bozulmaz ve dosya boyutu (birkaç KB) inanılmaz düşüktür. Ancak gerçek fotoğraflar için SVG asla kullanılmamalıdır.
Modern Format Kullanımı SEO’ya Nasıl Yansır?
Daha hızlı yüklenen sayfalar = Daha düşük Hemen Çıkma Oranı (Bounce Rate). Google, hızlı sitelerin kullanıcıyı daha çok memnun ettiğini bildiği için, teknik performansı yüksek siteleri (özellikle mobilde) daha üst sıralara taşır.
Yanlış Modern Format Kullanımları
Sırf "modern" diye 10x10 piksellik bir ikonu AVIF yapmak hatadır; çünkü AVIF çözümleme işlemi o görselin dosya boyutundan daha fazla CPU tüketebilir. Küçük ve basit grafiklerde PNG8 veya SVG her zaman daha mantıklıdır.
Görsel Boyutlandırma Hataları
Sıklıkla yapılan hata: 4000x3000 piksel bir görseli sunucuya yükleyip, CSS ile 400x300 piksel kutuya sığdırmaktır. Tarayıcı 4000 piksellik veriyi yine de indirir. Görseli, görüneceği maksimum boyutta yüklemek zorunludur.
Responsive Images (srcset, sizes)
Kullanıcıya ekranına uygun görseli gönderin. Masaüstü için 1200px, mobil için 400px genişliğinde görsel sunmak srcset özniteliği ile mümkündür. Bu, mobil kullanıcıların kotasını ve sabrını korumanın en iyi yoludur.
Lazy Loading Stratejileri
Sayfada aşağılarda kalan (fold altı) görseller için loading="lazy" özelliği kullanılmalıdır. Böylece görsel sadece ekrana yaklaştığında indirilir. İlk açılış hızı bu sayede %70'e kadar artabilir.
Hero Görselleri ve LCP Optimizasyonu
KRİTİK HATA: Sayfanın ilk ekranında görünen görsellere (Hero banner) asla lazy load uygulanmamalıdır. Bu durum LCP süresini geciktirerek SEO skorunuzu düşürür. İlk ekran görselleri fetchpriority="high" ile önceliklendirilmelidir.
Görsel Sıkıştırma Mitleri
"Kalite %90 olmalı" genel bir doğrudur ama her görsele uymaz. Bazen %75 kalite ile %90 kalite arasındaki fark insan gözüyle ayırt edilemezken, dosya boyutu yarıya inebilir. "Göz kararı" değil, "algoritmik" sıkıştırma tercih edilmelidir.
AI ile Görsel Üretimi ve Optimizasyon
Stable Diffusion veya Midjourney gibi araçlardan çıkan görseller genellikle ham ve çok ağırlıdır (3-5 MB). AI görsellerini webde kullanmadan önce mutlaka WebP/AVIF dönüşümünden ve metadata temizliğinden (EXIF) geçirmek gerekir.
CDN ve Görsel Dönüştürme
Cloudflare, Cloudinary gibi platformlar görselleri "anlık" (on-the-fly) optimize eder. Kullanıcının tarayıcısına göre otomatik format seçebilirler. Manuel iş yükünü azaltmak için büyük sitelerde bu servisler şarttır.
Görsel Optimizasyonu ve Mobil Kullanıcı
Mobil ağlar istikrarsızdır (3G/4G). 1 MB'lık bir görsel mobil kullanıcı için bir "engeldir". Görsel optimizasyonu aslında bir mobil SEO stratejisidir. Mobil cihazların kısıtlı işlemcisi (RAM/CPU) ağır kodlu görsellerde donabilir.
Görsel Optimizasyonu vs Görsel SEO
Dosya adını "seo-rehberi.webp" yapmak önemlidir (Görsel SEO). Ama o dosyanın 100 KB yerine 10 KB olması (Optimizasyon) çok daha önemlidir. İyi bir SEO, görseli hem anlamlı hem de hafif kılan kişidir.
Yanlış Pozitif (False Positive) Sorunları
Bazı araçlar tüm PNG'lere "ata" der. Oysa bazı logolarda kayıpsız sıkıştırma için PNG en iyisi olabilir. Seoskor, görselin "amacını" anlayarak rapor sunar; her şeyi körü körüne kırmızıya boyamaz.
Seoskor İçin Akıllı Değerlendirme Modeli
Analiz kriterlerimiz şu şekildedir:
- UYARI: Modern format (WebP/AVIF) kullanılmayan her görsel.
- HATA: LCP görselinde lazy-load kullanımı veya fahiş (1MB+) boyut.
- BAŞARILI: Srcset kullanımı, modern formatlar ve doğru boyutlandırma.
Görsel Optimizasyon Checklist’i
- Format WebP veya AVIF mi?
- Görsel, görüneceği boyuttan daha büyük mü yüklenmiş?
- Alt görsellere Lazy-Load eklendi mi?
- LCP görseli önceliklendirildi mi (Preload/Check)?
Büyük Sitelerde Görsel Optimizasyonu
Binlerce ürünün olduğu bir e-ticaret sitesinde manuel optimizasyon imkansızdır. Sunucu taraflı (image magick vb.) otomasyonlar veya CDN servisleri kullanarak bu süreci bir "pipeline" haline getirmek gerekir.
Görsel Optimizasyon Stratejisi Nasıl Kurulur?
Hazırlık - Dönüştürme - Test. Yayın öncesi CI/CD süreçlerine "Lighthouse CI" gibi araçlar ekleyerek, eşik değerini geçen (örneğin 200 KB üstü) görsellerin yayına çıkmasını engelleyebilirsiniz.
25. Görsel Optimizasyonu Manifestosu – Net Hüküm
"Görsel kalitesi dosya ağırlığıyla değil, sunulan deneyimin netliğiyle ölçülür. Mbps arttıkça sabır azalır. Modern formatlar lüks değil, modern webin omurgasıdır. Hız bir haktır, görseller ise bu hakkın en büyük ortağıdır."
PERFORMANS = SEO.