Arama Motorları İçin Görsel Optimizasyonu: WebP, AVIF ve Hız

Hızlı Özet (TL;DR)

Bir kurumsal web sitesinin, e-ticaret kataloğunun veya B2B sanayi portalının toplam sayfa indirme boyutunun (Page Weight) ortalama %60 ile %80’ini görseller oluşturur. Fotoğraf makinesinden veya 3D CAD render programından çıktığı gibi 4-8 MB boyutunda sunucuya yüklenen ham PNG ve JPEG dosyaları, mobil kullanıcının internet kotasını tüketir ve sayfa açılış süresini 8-10 saniyelere kadar geciktirir. Modern web mühendisliğinde yeni nesil WebP ve AVIF sıkıştırma algoritmaları, <picture> tabanlı duyarlı (responsive) görsel sunumu ve akıllı Lazy Loading / Fetch Priority teknikleri kullanılarak insan gözünün algılayamayacağı sıfıra yakın kalite kaybıyla dosya boyutları %70 ila %90 oranında küçültülür. Doğru görsel optimizasyonu hem Google Core Web Vitals (özellikle LCP ve CLS) skorlarını zirveye taşır hem de Google Görseller aramasından yüksek dönüşümlü organik B2B trafiği çeker.

Görsel Optimizasyonunun Core Web Vitals (LCP ve CLS) Üzerindeki Doğrudan Etkisi

Google’ın sıralama algoritmalarında kritik bir ağırlığa sahip olan Core Web Vitals (Önemli Web Verileri) metriklerinin ikisi doğrudan sayfadaki görsellerin nasıl sunulduğuyla ilgilidir:

1. LCP (Largest Contentful Paint - En Büyük İçerikful Boyama): Kullanıcının ekranında görünen en büyük öğenin (genellikle ana sayfa hero banner görseli, fabrika/makine fotoğrafı veya ürün kapak resmi) tamamen yüklenip çizilme süresidir. Google, LCP süresinin 2.5 saniyenin altında olmasını şart koşar. Eğer üst kısımdaki görseliniz 2.5 MB boyutunda sıkıştırılmamış bir PNG ise, 4G mobil bağlantıda sadece bu resmin inmesi 4 saniye sürecek ve siteniz “Zayıf URL” olarak işaretlenecektir.
2. CLS (Cumulative Layout Shift - Kümülatif Düzen Kayması): Sayfa yüklenirken metinlerin ve butonların aniden aşağı doğru kayması durumudur. HTML kodunda <img> etiketlerine width (genişlik) ve height (yükseklik) öznitelikleri tanımlanmadığında, tarayıcı görsel dosyası tamamen inene kadar o resme ne kadar yer ayıracağını bilemez; resim indiği anda altındaki tüm yazıları aşağı iter. Görsel boyutlarının ve aspect-ratio (en-boy oranı) değerlerinin önceden bildirilmesi CLS skorunu 0.00 mükemmelliğine indirir.

Modern Görsel Formatları Karşılaştırması: JPEG, PNG, WebP, AVIF ve SVG

Web dünyasında “tek bir format her şeye yeter” dönemi kapanmıştır. Fotoğraflar, şeffaf ürün kesitleri ve vektörel teknik çizimler için doğru kodek seçimi yapılmalıdır:

Görsel Formatı	Sıkıştırma Algoritması ve Verimlilik	Şeffaflık (Alpha Kanalı)	Animasyon ve HDR Desteği	Küresel Tarayıcı Desteği	Kurumsal Web Sitesinde İdeal Kullanım Alanı
JPEG / JPG	Eski nesil (1992), bloklaşma (artifact) üretir	Desteklemez	Yok / 8-bit	%100 (Evrensel)	Yalnızca çok eski sistemler için son çare fallback (yedek) formatı
PNG (PNG-8/24)	Kayıpsız ancak fotoğraf için çok ağır boyutlu	Mükemmel	Yok (APNG hariç)	%100 (Evrensel)	Ham arşiv; web ön yüzünde doğrudan kullanılması önerilmez
WebP	VP8 tabanlı, JPEG’den %25-%35, PNG’den %70 küçük	Destekler (Kayıplı ve Kayıpsız)	Destekler (GIF alternatifi)	%97+ (Tüm modern tarayıcılar)	Kurumsal fotoğraflar, blog kapakları, şeffaf makine/ürün görselleri
AVIF	AV1 video kodek tabanlı, JPEG’den %50+, WebP’den %20 küçük	Destekler	Destekler (10/12-bit HDR ve WCG)	%93+ (Chrome, Safari, Firefox, Edge)	Yüksek detaylı hero banner’lar, geniş renk gamlı ürün katalogları
SVG	XML metin tabanlı (Gzip/Brotli ile birkaç KB’a iner)	Doğal vektörel şeffaflık	CSS ve SMIL ile sınırsız	%100 (Evrensel)	Şirket logoları, arayüz ikonları, teknik diyagramlar ve mimari şemalar

WebP ve AVIF Dönüşümünde Kalite Eşiği (Quality Factor) Nasıl Seçilmeli?

Görselleri WebP veya AVIF formatına dönüştürürken (örneğin Astro Image Pipeline, Sharp, Squoosh veya cwebp/avifenc araçlarıyla) kalite parametresini %100 yapmak dosya boyutunu gereksiz yere şişirir. Saha testlerimizde en optimum görsel keskinlik / bayt oranı şu değerlerde yakalanmaktadır:

• WebP için: quality: 78 - 82 aralığı, orijinal fotoğrafla yan yana konulduğunda insan gözünün fark edemeyeceği bir netlik sunarken dosya boyutunu 1.5 MB’tan 85-120 KB seviyelerine indirir.
• AVIF için: quality: 60 - 70 aralığı, AV1 algoritmasının gelişmiş renk geçiş (gradient) başarımı sayesinde pürüzsüz yüzeylerde (metal makine gövdeleri, gökyüzü, stüdyo arka planları) lekelenme yapmadan 50-70 KB gibi olağanüstü düşük boyutlar üretir.

Responsive Resim Mimarisi: picture, srcset ve sizes Kullanımı

Masaüstü bilgisayarda 1920 piksel genişliğindeki bir monitör için hazırlanan 1600px genişliğindeki görseli, 390 piksel genişliğindeki bir cep telefonu ekranına zorla indirtmek hem bant genişliği israfıdır hem de mobil cihazın işlemcisini (GPU/CPU) resmi küçültmek (downscaling) için yorar. HTML5 standartlarındaki <picture>, srcset ve sizes mimarisi ile tarayıcıya hem format hem de çözünürlük alternatifleri sunulur:

<picture>
  <source
    type="image/avif"
    srcset="/img/uretim-hatti-480w.avif 480w, /img/uretim-hatti-800w.avif 800w, /img/uretim-hatti-1400w.avif 1400w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 700px"
  />
  <source
    type="image/webp"
    srcset="/img/uretim-hatti-480w.webp 480w, /img/uretim-hatti-800w.webp 800w, /img/uretim-hatti-1400w.webp 1400w"
    sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 700px"
  />
  <img
    src="/img/uretim-hatti-800w.jpg"
    width="1400"
    height="788"
    loading="lazy"
    decoding="async"
    alt="CNC Talaşlı İmalat ve Otomasyon Üretim Hattı"
  />
</picture>

Bu kod bloğunda tarayıcı yukarıdan aşağıya doğru kontrol yapar: Eğer AVIF destekliyorsa ve ekran genişliği mobil boyuttaysa yalnızca 35 KB ağırlığındaki 480w.avif dosyasını indirir; diğer büyük dosyaları hiç talep etmez.

Kritik Performans Hatası: LCP Görselinde Lazy Loading Kullanmak!

Web geliştiricilerin en sık yaptığı teknik hatalardan biri, sayfadaki tüm <img> etiketlerine ezbere loading="lazy" eklemektir. Lazy Loading (Tembel Yükleme), ekranın alt kısmında kalan (below-the-fold) ve kullanıcının sayfayı aşağı kaydırdıkça göreceği görsellerin yüklenmesini ertelemek için harika bir özelliktir.

Ancak sayfa ilk açıldığında kullanıcının gözünün önünde duran ilk ekran (above-the-fold) / Hero görseline loading="lazy" verirseniz, tarayıcı sayfa düzenini (layout) hesaplayana kadar o resmi indirmeyi bekletir ve LCP süreniz 1-1.5 saniye kötüleşir! Doğru mühendislik pratiği şudur:

• İlk Ekrandaki (Hero / Kapak) Görsel: Kesinlikle loading="eager" (veya loading özniteliği hiç yazılmadan) ve fetchpriority="high" özniteliği ile işaretlenmelidir.
• Ekranın Altında Kalan Tüm Diğer Görseller: loading="lazy" ve decoding="async" öznitelikleriyle ana iş parçacığını (main thread) bloklamadan yüklenmelidir.

Görsel SEO’sunun (Image SEO) 4 Temel İlkesi

Sanayi ve mühendislik sektöründe satın alma uzmanları, aradıkları makineyi, yedek parçayı veya yazılım ekranını çoğu zaman doğrudan Google Görseller sekmesinde aratır. Görsellerinizin arama motorları tarafından dizine eklenmesi ve üst sıralarda çıkması için şu 4 kural eksiksiz uygulanmalıdır:

1. Anlamlı ve Tire ile Ayrılmış Dosya Adı: Kamera veya telefonun verdiği IMG_4819.jpg, WhatsApp-Image-2026.jpeg veya resim1.png gibi isimler arama motoruna hiçbir sinyal vermez. Bunun yerine Türkçe karakter ve boşluk içermeyen hidrolik-pres-govde-talasli-imalat.webp şeklinde içeriği ve anahtar kelimeyi açıklayan dosya adları tercih edilmelidir.
2. Semantik ve Betimleyici Alt Metni (Alt Attribute): alt="" etiketi hem görme engelli kullanıcıların ekran okuyucuları (erişilebilirlik / a11y) hem de arama motoru botları için görselin metinsel karşılığıdır. Anahtar kelime doldurma (keyword stuffing) yapmadan, görselin ne anlattığını net belirten cümleler (örneğin alt="Berqnet güvenlik duvarı üzerinde VLAN ağ segmentasyonu topolojisi") yazılmalıdır.
3. Görsel Site Haritası (Image Sitemap) ve Yapısal Veri (Schema.org): Ürün, makale (Article / BlogPosting) ve kurumsal sayfalardaki ana görseller JSON-LD yapısal veri şemaları içerisinde tanımlanmalı, CDN veya önbellek (Cache-Control: immutable) başlıklarıyla hızlı sunulmalıdır.
4. EXIF Verilerinin Temizlenmesi: Fotoğrafların içinde yer alan gereksiz kamera meta verileri ve renk profilleri dosya boyutunu büyütür; yayın öncesi derleme (build) aşamasında bu meta veriler temizlenerek saf görüntü verisi bırakılmalıdır.

Işık hızında açılan, Google PageSpeed Insights testlerinden 95-100 puan alan görsel optimizasyonlu web projeleri için Kurumsal Web Tasarım ve SEO Çözümleri sayfamızı inceleyin. Ayrıca web uygulamalarınızın arka uç ve sunucu entegrasyonları için Özel Yazılım Geliştirme uzmanlığımızdan faydalanabilirsiniz.

Sıkça Sorulan Sorular

WebP mi yoksa AVIF mi kullanmalıyız, hangisi daha iyidir?

Teknik sıkıştırma başarımı açısından AVIF, WebP’ye göre ortalama %20 daha küçük dosya boyutu ve daha pürüzsüz renk geçişleri sunar. Ancak en doğru yaklaşım ikisi arasında tek bir seçim yapmak değil, HTML <picture> etiketi içinde önce image/avif, hemen altında image/webp ve en altta yedek olarak jpg/png tanımlayarak kademeli (progressive enhancement) sunum yapmaktır. Eğer içerik yönetim sisteminiz yalnızca tek bir modern format üretmeye izin veriyorsa, %97’nin üzerindeki tarayıcı uyumluluğu ve hızlı kodlama süresi nedeniyle WebP en güvenli standarttır.

Görselleri sıkıştırdığımızda ürün ve makine fotoğraflarımızın kalitesi bozulur mu?

Rastgele çevrimiçi araçlarla aşırı sıkıştırma yapılırsa bozulabilir; ancak modern görüntü işleme kütüphaneleri (Sharp, libvips, MozJPEG, libavif) kullanılarak yapılan “algısal kayıplı” (perceptually lossless) sıkıştırmada insan gözünün ayırt edemediği yüksek frekanslı renk verileri elenir. Ayrıca görselin sayfada gösterileceği maksimum piksel boyutu (örneğin 800px genişlik) ne ise görsel o boyuta ölçeklendirildiği için ekranda cam gibi net görünürken dosya boyutu 5 MB yerine 70 KB’a düşer.

Sitemizdeki tüm görselleri SVG formatına çevirebilir miyiz?

Hayır. SVG (Scalable Vector Graphics) matematiksel eğriler ve koordinatlardan oluşan vektörel bir formattır; yalnızca şirket logoları, ikonlar, teknik şemalar ve düz grafik çizimleri için kullanılmalıdır. Gerçek dünyadan çekilmiş bir fabrika fotoğrafını veya makine resmini SVG’ye dönüştürmeye çalışmak, milyonlarca pikseli XML koduna dökeceği için ortaya 10-20 MB boyutunda devasa ve tarayıcıyı kilitleyen bir dosya çıkarır. Fotoğraflar için her zaman WebP veya AVIF tercih edilmelidir.