Görsel Performansı Artırın: SEO Uyumlu Sıkıştırma ve Format Stratejileri

Web görseli hazırlarken amaç yalnız dosyayı küçültmek değildir. Doğru boyut, AVIF/WebP desteği, responsive kaynaklar, anlamlı alternatif metin, sıkıştırma kalitesi, en-boy oranı ve LCP önceliği birlikte ele alınmalıdır; tek bir kalite yüzdesi bütün görseller için doğru sonuç vermez.

Bu kapsamlı yazıda web siteniz için görsel optimizasyonun tüm yönlerini ele alacağız: dosya boyutu küçültme, format seçimi, EXIF/IPTC meta verisi düzenleme ve SEO odaklı görsel stratejileri.

1. Görsel Optimizasyonun Önemi

Görsellerin sayfa ağırlığındaki payı site ve sayfaya göre değişir. Chrome DevTools veya WebPageTest ile gerçek transfer boyutu, kod çözme maliyeti ve LCP öğesini ölçün; aynı görseli farklı format/kalite ve boyutlarda görsel fark testiyle karşılaştırın.

Sayfa Hızının SEO Etkisi

• Kullanıcı davranışı: Sabit 3 saniye/%53 kuralı kullanmayın; gerçek kullanıcı hız ve etkileşim verisini sayfa/cihaz/kaynak kırılımında kendi analitiğinizle ölçün
• Arama sıralaması: Sayfa deneyimi inceleme sinyallerinden biridir; hız tek başına üst sıra garantisi vermez
• Mobil Deneyim: Mobil kullanıcılar daha yavaş bağlantılarda, optimize görseller hayati önem taşır

2. Görsel Format Seçimi

Doğru format seçimi, görsel kalitesi, tarayıcı desteği, şeffaflık/animasyon ihtiyacı ve dosya boyutu arasındaki dengeyi belirler. Yaygın kullanılan web görsel formatları:

3. Görsel Boyutlandırma Stratejileri

Görselin piksel boyutu, dosya boyutunu doğrudan etkiler. 4000x3000 piksellik bir fotoğrafı 800 piksel genişliğinde gösterecekseniz, gereksiz yere büyük dosya yükletmiş olursunuz.

Responsive Görsel Kullanımı

Farklı ekran boyutları için farklı görsel boyutları sunmak, hem masaüstü hem mobil performansı optimize eder:

• Mobil (max-width: 480px): 480px genişlik
• Tablet (max-width: 768px): 768px genişlik
• Masaüstü (max-width: 1200px): 1200px genişlik
• Büyük ekran: 1920px genişlik (maksimum)

Sıkıştırma Kalite Ayarları

JPEG, WebP veya AVIF için evrensel “%75-85 optimum” ayarı yoktur; kalite ölçekleri kodlayıcılar arasında eşdeğer değildir. Temsilî görselleri farklı ayarlarda üretin; görsel farkı, SSIM benzeri ölçüm, dosya boyutu ve gerçek cihaz kod çözme süresini birlikte karşılaştırın.

4. EXIF ve IPTC Meta Veri Yönetimi

Fotoğraflarda gömülü olan EXIF (Exchangeable Image File Format) ve IPTC (International Press Telecommunications Council) verileri; çekim kaydı, arşiv düzeni, oluşturan ve telif bilgisi için kullanılabilir. Bu alanlar tek başına arama veya Google İşletme sıralaması garantisi vermez.

EXIF Verisinin Doğru Kullanımı

• GPS koordinatları: Gerçek çekim veya işletme arşivi bağlamını kaydeder; tek başına yerel sıralama faktörü olarak görülmemelidir.
• Çekim tarihi: Kaynak kayıtla birlikte güncellik incelemesine yardım eder; değiştirilebilir veya silinebilir ve tek başına kanıt değildir.
• Yön bilgisi: Yayın kopyasında fotoğrafın doğru görüntülenmesi için güvenli sayısal yön değeri korunabilir.
• Kamera kaydı: Sahip adı, cihaz ve lens seri numarası, marka-model, yazılım geçmişi, eski tarih ve GPS gibi kaynak alanları yayın öncesinde kaldırılmalıdır.
• Açıklama ve oluşturan: Dosyanın işletme arşivindeki bağlamını belirtir; yalnız yayımlanması istenen yeni bilgi yazılmalıdır.

Metadata temizliği fotoğrafın piksellerini anonimleştirmez. Yüz, ekran, belge, telefon numarası veya filigran görüntüde kalır; bunlar gerekiyorsa ayrı bir görsel düzenleme adımında gizlenmelidir.

IPTC Verisinin Faydaları

• Başlık ve açıklama: Fotoğrafı medya arşivinde tanımlar.
• Oluşturan ve kredi: Fotoğrafı hazırlayan işletmeyi belirtir.
• Telif bildirimi: Hak sahipliği bilgisini dosyayla birlikte taşır.
• Anahtar kelime alanı: Gereksiz tekrarlarla doldurulmamalıdır; web görsellerinde dosya adı, alt metin ve sayfa bağlamı daha anlamlıdır.

5. SEO Odaklı Görsel Optimizasyonu

Dosya Adlandırma

Görsel dosya adları, arama motorlarının görseli anlamasına yardımcı olur:

• Kötü: IMG_20240115_142356.jpg
• İyi: izmir-ikinci-el-laptop-alan-yerler.webp
• Açıklayıcı ve kısa: izmir-bornova-macbook-pro-m3-satis.webp

Alt Text Yazımı

Alt text, görselin metin alternatifidir. SEO ve erişilebilirlik için kritik öneme sahiptir:

• Görseli doğal dille açıklayın
• Anahtar kelimeleri zorlamadan kullanın
• 125 karakteri geçmeyin
• "Resim" veya "fotoğraf" kelimelerini eklemeyin (zaten bir resim olduğu belli)

Structured Data (Schema) Kullanımı

ImageObject schema ile görsellerin arama sonuçlarında daha zengin görünmesini sağlayabilirsiniz:

{
  "@type": "ImageObject",
  "contentUrl": "https://site.com/görsel.webp",
  "caption": "Görsel açıklaması",
  "name": "Görsel başlığı",
  "author": {
    "@type": "Organization",
    "name": "Şirket Adı"
  }
}

6. Lazy Loading ve Performans İpuçları

Native Lazy Loading

Modern tarayıcılar, loading="lazy" özelliğini destekler. Bu sayede ekranda görünmeyen görseller yüklenmez, sayfa hızlanır:

<img src="gorsel.webp" alt="Açıklama" loading="lazy" width="800" height="600">

Width ve Height Belirtme

Görsel boyutlarını HTML'de belirtmek, Cumulative Layout Shift (CLS) skorunu iyileştirir. Sayfa yüklenirken içerik atlamaması sağlanır.

Kritik Görselleri Önceden Yükleme

Hero görseli gibi ilk görünen önemli resimler için preload kullanın:

<link rel="preload" as="image" href="hero.webp" type="image/webp">

7. Görsel Optimizasyon Araçları

Ücretsiz Online Araçlar

• Kalender Resim Dönüştürücü: WebP, JPEG, PNG dönüşümü ve boyut küçültme
• Kalender EXIF/IPTC Aracı: Kaynak kişisel metadata alanlarını otomatik temizleyip yalnız yön, seçilen çekim tarihi, Kalender GPS, oluşturan ve telif bilgisini kontrollü yazma
• TinyPNG: PNG ve JPEG sıkıştırma
• Squoosh: Google'ın görsel optimizasyon aracı

Masaüstü Yazılımları

• Adobe Photoshop: İş için düzenleme ve export
• GIMP: Ücretsiz alternatif
• ImageOptim (Mac): Toplu sıkıştırma
• FileOptimizer (Windows): Çoklu format desteği

8. Örnek Optimizasyon Senaryosu

Diyelim ki bir e-ticaret sitesi için ürün fotoğrafları yüklüyorsunuz:

1. Orijinal dosyanın değiştirilmeyen bir kopyasını arşivleyin.
2. Görseli sayfada gösterileceği en büyük ölçüye göre boyutlandırın; responsive sürümleri ayrıca üretin.
3. Fotoğraf için AVIF/WebP çıktısını, JPEG geri dönüşünü ve kaliteyi gerçek görsel farkıyla karşılaştırın.
4. Hero veya ürün ana görseline açık width/height verin; ekran dışında kalan görselleri tembel yükleyin.
5. Dosya adını kısa ve açıklayıcı tutun; alt metni görselin sayfadaki işlevine göre doğal dille yazın.
6. Yayın kopyasında eski kişisel metadata alanlarını kaldırın; yalnız güvenli yön değerini koruyun. GPS, seçilen tarih, oluşturan ve telif alanlarını doğru işletme fotoğraflarında yeniden yazın.
7. Yayın sonrası LCP, transfer boyutu ve görsel netliğini gerçek mobil cihazda kontrol edin.

Kalender fotoğraf meta veri aracı eski kaynak metadata alanlarını temizler ve pikselleri yeniden sıkıştırmadan işletme kaydını ekler. Görüntüdeki kişisel öğeleri gizleme, web formatına dönüştürme veya boyut küçültme gerekiyorsa bunu ayrı optimizasyon adımında yapın.