Resim Optimizasyonu Nasıl Yapılır? SEO ve Sayfa Hızı İçin Adım Adım Rehber

Resim optimizasyonu, web sitesindeki görsellerin kalitesini gözle görülür biçimde bozmadan dosya boyutunu küçültme, doğru ölçüde ve doğru zamanda yükleme ve Google’ın görseli anlayabileceği biçimde işaretleme işidir. Üç amacı var. Sayfanın hızlı açılması, görselin Google Görseller’de ve Discover’da görünmesi ve ekran okuyucu kullananların görseli anlayabilmesi.

Görseller çoğu sayfada en ağır kaynak. Bir ürün sayfasının ya da blog yazısının ilk ekranındaki büyük görsel, Google’ın sayfa deneyimini ölçtüğü LCP metriğini çoğu zaman tek başına belirliyor. Teknik SEO denetimlerinde sayfa hızı sorunlarının büyük kısmının görsellerden çıktığını görüyoruz. Aşağıda format seçiminden alt metne kadar her adımı Google’ın ve Lighthouse’un kendi eşikleriyle anlattık.

Önemli Noktalar

• Google’a göre kayıplı WebP görseller aynı kalitedeki JPEG’lerden %25 ile %34 daha küçük.
• Lighthouse, 85 kalitede sıkıştırıldığında 4 KiB ya da daha fazla küçülen görselleri optimize edilebilir sayıyor.
• LCP görseline asla lazy loading eklenmemeli, fetchpriority high eklenmeli.
• Google CSS arka plan görsellerini dizine eklemiyor.
• Merchant Center AVIF kabul etmiyor ve 31 Ocak 2027’den itibaren en az 500 x 500 piksel istiyor.

Hangi görsel formatını kullanmalısınız?

Fotoğraflar için WebP, logo ve ikonlar için SVG, saydamlık gereken grafikler için WebP ya da PNG kullanmanızı öneriyoruz. Google’ın WebP dokümanına göre kayıplı WebP görseller aynı SSIM kalite düzeyindeki JPEG’lerden %25 ile %34, kayıpsız WebP görseller de PNG’lerden %26 daha küçük. AVIF ise çoğu fotoğrafta WebP’den de küçük dosya üretebiliyor.

Format	Nerede kullanılır	Dikkat edilecek nokta
JPEG	Fotoğraflar, eski sistemlerle uyumluluk	Aynı kalitede WebP’den büyük dosya üretiyor
PNG	Saydamlık gereken grafikler, ekran görüntüsü	Fotoğrafta kullanıldığında dosya çok büyüyor
WebP	Fotoğraflar ve saydam grafikler	Çoğu site için en dengeli seçim
AVIF	Fotoğraflar, en küçük dosya boyutu	Merchant Center kabul etmiyor
SVG	Logo, ikon, basit çizimler	Fotoğraf için uygun değil

Google Arama BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF formatlarını destekliyor. Yani format seçimi Google’da görünüp görünmemeyi değil, sayfa hızını etkiliyor. E-ticaret mağazaları için ise bir ayrıntı önemli. Merchant Center’ın kabul ettiği formatlar arasında AVIF yok. Sitenizde AVIF kullanıyorsanız ürün feed’inde görsel adresi olarak JPEG, WebP ya da PNG sürümünü vermeniz gerekiyor.

Farklı formatları birlikte sunmak için <picture> etiketini kullanabilirsiniz. Tarayıcı desteklediği ilk formatı seçiyor, desteklemeyenler en alttaki <img> etiketine düşüyor.

<picture>
  <source srcset="/img/kirmizi-elbise.avif" type="image/avif" />
  <source srcset="/img/kirmizi-elbise.webp" type="image/webp" />
  <img
    src="/img/kirmizi-elbise.jpg"
    alt="Kırmızı keten midi elbise, önden görünüm"
    width="800"
    height="1000"
  />
</picture>

Görseller nasıl sıkıştırılır?

Sıkıştırma iki türlü. Kayıplı sıkıştırma gözün fark etmeyeceği ayrıntıları atarak dosyayı çok küçültüyor, kayıpsız sıkıştırma ise hiçbir ayrıntıyı atmadan daha sınırlı bir kazanç sağlıyor. Fotoğraflarda kayıplı, logo ve metin içeren grafiklerde kayıpsız sıkıştırmayı tercih ediyoruz.

Lighthouse’un kontrol ettiği eşik iyi bir başlangıç noktası. Lighthouse bir JPEG görseli 85 kalite düzeyinde yeniden sıkıştırıyor. Bu işlem 4 KiB ya da daha fazla tasarruf sağlıyorsa görseli “optimize edilebilir” olarak işaretliyor. Biz fotoğraflarda 75 ile 85 arasında bir kalite düzeyiyle başlıyor, sonucu orijinalle yan yana koyup gözle kontrol ediyoruz. Kaybın fark edildiği ilk noktanın bir üstü, o görsel için doğru ayar oluyor.

Sıkıştırmayı tek tek elle yapmanıza gerek yok. Squoosh gibi ücretsiz araçlar tek görsel için, Shopify ve ikas gibi altyapıların görsel CDN’leri ya da WordPress eklentileri ise binlerce görsel için bu işi otomatik yapıyor. Önemli olan yüklediğiniz orijinal dosyanın aşırı büyük olmaması. 8 MB’lık bir kamera fotoğrafını olduğu gibi yüklemek, CDN ne kadar iyi olursa olsun gereksiz bir yük.

Görselin ölçüsü ne olmalı?

Görseli ekranda gösterileceği boyutun yaklaşık iki katında hazırlamanızı öneriyoruz. İki kat, yüksek piksel yoğunluklu ekranlarda görselin keskin görünmesini sağlıyor. 400 piksel genişliğinde gösterilecek bir görsel için 800 piksel yeterli, 4000 piksellik bir görsel ise 25 kat fazla piksel taşıyor.

Lighthouse bu kontrolü de yapıyor. Görselin ekranda gösterildiği boyut, cihazın piksel yoğunluğu hesaba katıldığında gerçek boyutundan en az 4 KiB daha küçükse görsel “doğru boyutlandırılmamış” sayılıyor.

Mobil ve masaüstünde farklı boyutlar göstermek için srcset ve sizes özelliklerini kullanıyoruz. Tarayıcı ekranın genişliğine göre en uygun dosyayı kendisi seçiyor. Google’ın görsel SEO dokümanı da srcset ya da <picture> kullanılmasını ve her durumda src ile bir yedek adres verilmesini öneriyor.

<img
  src="/img/urun-800.webp"
  srcset="/img/urun-400.webp 400w, /img/urun-800.webp 800w, /img/urun-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Siyah deri sırt çantası, yandan görünüm"
  width="800"
  height="800"
/>

Görseller sayfa hızını bozmadan nasıl yüklenir?

Sayfanın ilk ekranındaki en büyük görsele öncelik verip, ekranın altında kalan görselleri kullanıcı kaydırdıkça yüklemeniz gerekiyor. Bu iki kuralı karıştırmak en sık gördüğümüz hız hatalarından biri. web.dev, LCP görseline lazy loading eklemenin LCP’yi her zaman geciktirdiğini ve bunun asla yapılmaması gerektiğini söylüyor.

LCP, sayfanın en büyük görünür öğesinin ne kadar sürede yüklendiğini ölçüyor. İyi eşik 2,5 saniye ve bu değerin ziyaretlerin en az %75’inde tutturulması gerekiyor. Ürün sayfalarında bu öğe çoğu zaman ana ürün görseli, blog yazılarında kapak görseli oluyor.

Görsel	loading	fetchpriority	width ve height
İlk ekrandaki ana görsel (LCP)	eager	high	Zorunlu
İlk ekranın altındaki görseller	lazy	Eklenmez	Zorunlu
Logo ve küçük ikonlar	eager	Eklenmez	Zorunlu

Tablodaki son sütun bütün görseller için geçerli. width ve height değerleri tarayıcıya görsel yüklenmeden önce ne kadar yer ayıracağını söylüyor. Bu değerler olmadığında görsel yüklenince altındaki metin aşağı kayıyor ve sayfanın görsel kaymayı ölçen CLS değeri bozuluyor. CLS için iyi eşik 0,1.

Kendi sitemizde de bu kuralları uyguluyoruz. Her sayfanın ilk ekranındaki görsel loading="eager" ve fetchpriority="high" ile, diğer bütün görseller loading="lazy" ile yükleniyor ve hepsinde genişlik ile yükseklik tanımlı.

Google bir görseli nasıl anlar?

Google bir görseli dosyanın kendisinden, dosya adından, alt metinden ve görselin çevresindeki metinden anlıyor. Bunun ön koşulu görselin HTML’de doğru biçimde verilmesi. Google’ın görsel SEO dokümanına göre Google görselleri <img> etiketinin src özelliğinden buluyor ve CSS ile verilen arka plan görsellerini dizine eklemiyor.

Bu kural özellikle tasarımı güçlü sitelerde sorun çıkarıyor. Ana sayfa bannerları ya da kategori görselleri CSS arka planı olarak verildiğinde, sayfada görünseler bile Google Görseller’de hiç çıkmıyorlar.

Dosya adı için Google’ın örneği açık. siyah-yavru-kedi.jpg gibi kısa ve açıklayıcı bir ad, IMG00023.JPG gibi bir addan daha iyi. Türkçe karakterleri dosya adında kullanmamanızı, kelimeleri tireyle ayırmanızı öneriyoruz.

Görselin yanındaki metin de önemli. Bir görselin başlığı, altındaki açıklama ve bulunduğu paragraf, Google’a görselin ne hakkında olduğunu anlatıyor. Google’ın keşfedemeyeceği görseller için, örneğin JavaScript ile yüklenen galeriler için, görsel site haritası da gönderebiliyorsunuz.

Alt metin nasıl yazılır?

Alt metin, görselin ne gösterdiğini görseli göremeyen birine anlatır gibi yazılmalı. Ekran okuyucular bu metni sesli okuyor, görsel yüklenemediğinde de yerinde bu metin görünüyor. Google da alt metni görselin konusunu anlamak için kullanıyor. Google’ın dokümanında verdiği iyi örnek “Top getiren dalmaçyalı yavru köpek” gibi kısa ve bağlamı olan bir açıklama.

Görsel	Zayıf alt metin	İyi alt metin
Ürün fotoğrafı	elbise	Kırmızı keten midi elbise, önden görünüm
Ürün fotoğrafı	elbise kırmızı elbise ucuz elbise en iyi elbise	Kırmızı keten midi elbise, arkadan görünüm
Blog kapak görseli	görsel1	Masada dizüstü bilgisayarda açık bir analiz raporu
Süsleme amaçlı çizgi	ayırıcı çizgi görseli	Boş bırakılır

Tablodaki ikinci satır Google’ın açıkça uyardığı anahtar kelime doldurma örneği. Son satır da sık atlanan bir kural. Yalnızca süsleme amaçlı, bilgi taşımayan görsellerde alt metni boş bırakıyoruz, yani alt="" yazıyoruz. Böylece ekran okuyucular o görseli atlıyor.

E-ticarette ürün görselleri için nelere dikkat edilmeli?

Ürün görselleri hem sitenizde hem Google’ın alışveriş yüzeylerinde kullanıldığı için Merchant Center kurallarına da uymalı. Merchant Center 31 Ocak 2027’den itibaren bütün ürün görsellerinde en az 500 x 500 piksel şartını uygulayacak. Bu tarihten önce katalogdaki küçük görselleri kontrol etmenizi öneriyoruz.

Merchant Center’ın diğer görsel kuralları şunlar.

• Görselde tanıtım yazısı, filigran ya da çerçeve olmamalı. “Kargo bedava” yazılı bir ürün fotoğrafı onaylanmayabiliyor.
• Yer tutucu ya da genel bir görsel kullanılmamalı. “Görsel hazırlanıyor” yazan bir kutu ürün görseli sayılmıyor.
• Küçük bir görseli büyütüp göndermek ya da küçük resim kullanmak kabul edilmiyor.
• Yapay zekayla üretilen görsellerde bunu belirten IPTC meta verisi bulunmalı ve silinmemeli.
• Kabul edilen formatlar JPEG, WebP, PNG, hareketsiz GIF, BMP ve TIFF.

Ürün sayfasında da birkaç kural uyguluyoruz. Ürünü farklı açılardan gösteren birden fazla görsel, zoom için yeterli çözünürlük ve her görsel için ayrı bir alt metin. Görsel adresinin sık sık değişmemesi de önemli, çünkü Google her yeni adresi yeni bir görsel olarak yeniden tarıyor. Ürün görsellerinin yapılandırılmış veride nasıl verildiğini ürün sayfalarında yapılandırılmış veri yazımızda, mağaza genelindeki diğer adımları da e-ticaret SEO rehberimizde anlattık.

Google Discover ve Görseller’de görünmek için ne gerekir?

Google Discover’da büyük görselle görünmek için görselin en az 1200 piksel genişliğinde ve 300.000 pikselden fazla olması gerekiyor. 1280 x 720 piksellik, 16’ya 9 oranında bir görsel 921.600 piksel ediyor ve bu şartı karşılıyor. Ayrıca sayfanızın robots meta etiketinde max-image-preview:large ayarının açık olması gerekiyor.

Bu ayar olmadan Discover görselinizi küçük bir önizleme olarak gösteriyor, bu da tıklanma ihtimalini düşürüyor. Blog yazılarında kapak görsellerini bu yüzden en az 1200 piksel genişliğinde hazırlıyoruz.

Google Görseller için ayrı bir işlem gerekmiyor. Yukarıdaki kurallara uyan, <img> etiketiyle verilmiş, açıklayıcı dosya adı ve alt metni olan bir görsel, Google Görseller’de görünmeye uygun hale geliyor.

Resim optimizasyonunun sonucu nasıl ölçülür?

Sonucu hem hızla hem görünürlükle ölçüyoruz. Hız tarafında PageSpeed Insights’taki “Görselleri verimli bir şekilde kodlayın” ve “Görselleri doğru boyutlandırın” uyarılarına bakıyoruz. Asıl göstergeyi ise Search Console’daki Core Web Vitals raporu veriyor, çünkü bu rapor laboratuvar testini değil gerçek kullanıcıların deneyimini gösteriyor.

Görünürlük tarafında Search Console’un performans raporunda arama türünü “Görsel” olarak seçiyoruz. Bu görünüm, görsellerinizin Google Görseller’de hangi sorgulardan gösterim ve tıklama aldığını gösteriyor. Ürün görselleri için Merchant Center’daki tanılama ekranı da onaylanmayan görselleri ürün bazında listeliyor.

Görsel optimizasyonu yazının bir parçası. Görselin çevresindeki metni nasıl kurduğumuzu SEO uyumlu içerik rehberimizde anlattık.

Görsel optimizasyonunu kim yapmalı?

Tek tek görselleri sıkıştırmak ve alt metin yazmak içeride kolayca yapılabilir. Görsellerin şablon düzeyinde doğru yüklenmesi ise, yani LCP görselinin önceliklendirilmesi, srcset kurulumu ve genişlik ile yüksekliğin her görselde otomatik tanımlanması, temanın ya da altyapının kodunda yapılması gereken bir iş.

Sitenizin görsel ve hız sorunlarını bizim denetleyip düzeltmemizi isterseniz teknik SEO hizmetimize bakabilirsiniz. Hız ve görsel çalışmasını içerik ve bağlantı çalışmalarıyla birlikte yürütmemizi isterseniz SEO ajansı hizmetimizi inceleyebilirsiniz.

---

Bu yazı Emir Bengiserp tarafından yazıldı. Benji’s Digital kurucusu; 15+ yıldır e-ticaret markalarında SEO, performans pazarlaması ve ürün verisi tarafında çalışıyor.

Son güncelleme 1 Ekim 2026. Kurallar Google Search Central’ın görsel SEO ve Discover dokümanlarından, eşikler web.dev ve Lighthouse dokümanlarından, ürün görseli kuralları Merchant Center yardım sayfasından alındı.