Fotoğrafları Optimize Etmek Ne Demek? Web Görseli Rehberi 2025

Tarık Tunç
25 Mar
6 dakikada okunur

Güncelleme tarihi: 22 May

Özet: - WebP formatı, JPEG'e göre aynı kalitede %25-34 daha küçük dosya boyutu üretir (Google sıkıştırma çalışması) - Web sayfasının tüm verisinin %60'tan fazlası görsellerden oluşur; bu oran hız sorunlarının birinci sebebidir - HTML5 `loading="lazy"` özelliği ek eklenti gerektirmeden tüm modern tarayıcılarda çalışır - Google, iyi bir LCP skoru için 2,5 saniye veya altını hedef gösterir; LCP'nin büyük bölümü görseldir - 2024 verilerine göre web'deki görsellerin %45'inde alt text yok; bu hem SEO hem erişilebilirlik açığıdır

Fotoğraf Optimizasyonu Nedir?

Bir web sitesine yüklediğiniz fotoğraf, ziyaretçinin ekranında göründüğü haliyle bant genişliği kullanır. 4 MB'lık bir DSLR karesi ile aynı görüntünün 180 KB'a indirilmiş hali arasında gözle görülür bir fark yoktur. Fakat sayfa yüklenme süresi açısından fark çok büyüktür.

Fotoğraf optimizasyonu bu ikisi arasındaki boşluğu kapatmaktır. Boyutu küçültmek, doğru formatı seçmek, görselin sayfada nasıl yükleneceğini belirlemek ve arama motorlarına görsel içeriği doğru biçimde tanıtmak bu işin birbirinden bağımsız ama birbirini tamamlayan katmanlarıdır.

Pek çok site sahibi optimizasyonu sadece sıkıştırma olarak görür. Yanılıyorlar. Tek başına sıkıştırma yetersizdir. Yanlış formatta sıkıştırılmış, boyutsuz, alt textsiz ve erken yüklenen görsel hâlâ sayfa hızını düşürür, SEO'yu kötüleştirir. Her adım birbirini tamamlar.

Görsel Boyutu Sayfayı Nasıl Etkiler?

HTTP Archive'ın 2024 Web Almanac raporuna göre web sayfalarının toplam veri yükünün %60'tan fazlasını görseller oluşturuyor. Bu oran, yavaş sayfa yüklemesinin neden bu kadar sık görsele bağlandığını açıklar.

Google'ın ölçtüğü Core Web Vitals metrikleri arasında LCP (Largest Contentful Paint) doğrudan görsellerle ilişkilidir. LCP, sayfadaki en büyük görsel veya metin bloğunun yüklenmesinin ne kadar sürdüğünü ölçer. Hedef: 2,5 saniye veya altı.

Büyük ve sıkıştırılmamış bir hero görseli varsa sayfanız neredeyse her zaman bu eşiği aşar. Aştığında Google bunu ölçer. Ölçtüğünde sıralama bundan etkilenir.

Dikkat: Görseller, boyutları önceden belirtilmezse sayfa düzeni kaymalara neden olur. Bu CLS (Cumulative Layout Shift) metriğini bozar ve Google arama sıralamalarını olumsuz etkiler. Her `<img>` etiketine `width` ve `height` değerleri mutlaka yazılmalıdır.

Somut bir hesap yapalım. 3G bağlantıda 2 MB büyüklüğündeki bir görsel 8-10 saniye yükleme süresi üretebilir. Sekiz ila on saniye. Ziyaretçinin sabır eşiğini aştınız bile.

Aynı görsel WebP formatında sıkıştırılmış halde 400-500 KB'a indirilebilir. Yükleme süresi 1-2 saniyeye düşer. Tek bir işlem. Kullanıcının sayfadan çıkma ihtimali belirgin biçimde azalır.

Format Seçimi: WebP, AVIF ve JPEG Karşılaştırması

Hangi formatın kullanılacağı çoğu zaman en büyük farkı yaratır. JPEG onlarca yıldır standarttır fakat modern alternatiflerin gerisinde kalmıştır.

JPEG: Fotoğraflar için tasarlanmış, lossy (kayıplı) sıkıştırma kullanan eski format. Geniş uyumluluk sunar; her platform, her tarayıcı okur. Ama boyut açısından daha az verimlidir.

WebP: Google tarafından geliştirilen ve 2010'dan bu yana yaygınlaşan format. Google'ın resmi sıkıştırma çalışması, WebP dosyalarının aynı kalitede JPEG'den %25-34 daha küçük olduğunu ortaya koymuştur. YouTube, WebP thumbnail formatına geçiş yapıldığında sayfa yükleme süresinde %10 iyileşme bildirmiştir. Chrome, Firefox, Safari, Edge başta olmak üzere tüm modern tarayıcılar destekler.

AVIF: AV1 video codec'ine dayalı en yeni format. Web Almanac 2024 verilerine göre AVIF kullanımı 2022'ye göre dört katına çıktı. Belirli görüntülerde JPEG'e kıyasla %50'nin üzerinde boyut tasarrufu sağlayabilir. Verimlilik açısından şu an en üst sırada. Tek dezavantajı: render süresi diğerlerine göre hafif daha uzun.

PNG: Şeffaflık gerektiren görseller için hâlâ geçerli tercih. Ancak fotoğraflar için PNG kullanmak gereksiz boyut artışı yaratır.

Hangi formatı seçmelisiniz? Kısa yanıt: WebP. Pratikte çoğu durumda dengeli bir başlangıç noktasıdır. Logo ve ikonlar için SVG tercih edilmeli, fotoğraflar için WebP veya AVIF kullanılmalıdır. Eski JPEG dosyaları taşırken önce yüksek trafikli sayfaları önceliklendirin.

`<picture>` elementi ile birden fazla format birlikte sunulabilir. Tarayıcı desteklediği ilk formatı seçer:

```html

</picture>

```

Bu yaklaşım hem eski hem yeni tarayıcılarda doğru görsel dosyasını otomatik sunar.

Sıkıştırma Araçları: TinyPNG, Squoosh ve ImageOptim

Format seçiminden sonra sıkıştırma adımı gelir. Üç araç öne çıkar:

TinyPNG: Web tabanlı, kullanımı kolay araç. WebP, JPEG, PNG, AVIF ve JPEG XL formatlarını destekler. Dosya boyutunu %80'e kadar azaltabileceğini açıklıyor. Yöntem, görsel içeriği analiz edip renk verisini seçici biçimde azaltarak çalışır; bu yolla görünür kalite kaybı olmadan boyutu küçültüyor. Bireysel kullanım için ücretsiz; toplu işlem için ücretli API sunar.

Squoosh: Google tarafından geliştirilen açık kaynaklı tarayıcı aracı. AVIF, WebP, JPEG, PNG dahil pek çok formatı destekler. Farklı sıkıştırma algoritmalarını yan yana karşılaştırabilirsiniz. Ekranın solunda orijinal, sağında sıkıştırılmış. Anında görüyorsunuz. Kalite ve boyut arasındaki dengeyi test etmek için en kapsamlı seçenek budur.

ImageOptim: Mac için masaüstü uygulama. Dosyaları bırakıp sürükle ile toplu sıkıştırma yapar. Metadata'yı (EXIF bilgileri, GPS verisi) temizler; bu tek başına boyutu %10-20 küçültebilir.

Dikkat: Sıkıştırma araçları orijinal dosyayı bozar. Her zaman bir yedek kopya saklayın. Üretim ortamına atılacak görsel optimize edilmiş hali olmalı, orijinal kaynak dosyayı asla kaybetmeyin.

Üç araç arasında seçim yaparken şu çerçeveye bakabilirsiniz: tek seferlik ve hızlı sıkıştırma için TinyPNG; format karşılaştırması ile hassas ayar için Squoosh; Mac'te toplu iş akışı için ImageOptim. Birini öğrenmek yeterli. Hepsini öğrenmek zaman almaz.

Lazy Loading Nedir ve Nasıl Açılır?

Bir ziyaretçi sayfanıza girdiğinde ekranın üstündeki içerik görünür, altındaki henüz görünmez. Yine de klasik yükleme mantığında tüm görseller eş zamanlı yüklenmeye başlar. Lazy loading bu mantığı değiştirir: yalnızca görüntü alanındaki veya ona yakın görseller yüklenir, geri kalanlar kullanıcı sayfayı kaydırdıkça devreye girer.

HTML5 ile bu özellik ek eklenti gerektirmeden kullanılabilir hale geldi:

```html

```

Web.dev'in belgelediği Chromium testlerine göre 4G bağlantıda lazy load edilen görsellerin %97,5'i görünür hale geldikleri anda 10ms içinde tamamen yüklenmiş oluyor. On milisaniye. Kullanıcı bunu hissetmez; yükleme performansı ise ciddi ölçüde iyileşir.

Bir kural var: ilk ekranda (above the fold) görünen görsellere `loading="lazy"` eklemeyin. Bu özellikle LCP adayı olan hero görsel için geçerlidir. Lazy loading, ilk ekrandaki görselin yüklenmesini geciktirir ve LCP skorunu düşürür.

2024 verilerine göre web sitelerinin %33'ü native lazy loading kullanıyor. Fakat aynı veriler, bu sitelerin %9,5'inin LCP görsellerini yanlışlıkla lazy load ettiğini ortaya koyuyor.

Kontrol basittir. Tarayıcı geliştirici araçlarını açın. Network sekmesine bakın. LCP olarak işaretlenen görselde `loading="lazy"` yazıyor mu? Yazıyorsa kaldırın. İki dakika sürer.

Alt Text Neden SEO İçin Zorunlu?

Arama motorları bir görseli göremez. Görseli anlayan şey, `alt` özelliğine yazılan metindir. Google, alt text'i görsel içeriğini anlamak için birincil kaynak olarak kullanır; aynı zamanda görsel arama sonuçlarında sıralama faktörü olarak değerlendirir.

HTTP Archive'ın 2024 Web Almanac raporuna göre web'deki görsellerin %45'inde alt text yok. Neredeyse yarısı. Bu hem SEO kaybı hem de erişilebilirlik açığıdır; ekran okuyucu kullanan ziyaretçiler görselin içeriğini hiç öğrenemez, arama motorları ise içeriği tam değerlendiremez.

Google'ın resmi kılavuzu açıktır. Öneri kısadır: "Yararlı, bilgi bakımından zengin içerik oluşturmaya odaklanın, anahtar kelime doldurmaktan kaçının." İnsan için yazın. Makine kendisi anlar.

Somut fark örnekleri:

Görselin içeriği — Kötü alt text — İyi alt text
Kahvaltı tabağı fotoğrafı — `kahvalti gorsel` — `Zeytinli, peynirli, domates ve salatalıklı Türk kahvaltısı tabağı`
Ürün kutusu — `kutu.jpg` — `Kırmızı kapaklı 500ml termos, yan cepli sırt çantasının yanında`
Ofis fotoğrafı — `img00234` — `Açık ofis planı, uzun masa etrafında dört çalışan, arka planda beyaz tahta`

Pratik kural: Alt text 60-125 karakter arasında olmalı, görsel içeriği betimlemeli, anahtar kelime doğal biçimde geçebilir ama tekrar edilmemelidir. Dekoratif görseller için `alt=""` yazılabilir; bu tarayıcıya ve ekran okuyuculara görselin anlamsız olduğunu söyler.

Dikkat: Alt text ile görsel dosya adı ayrı şeylerdir. Dosya adı da tarayıcıda okunabilir olmalıdır. `IMG00234.jpg` yerine `turk-kahvaltisi-tabagi.jpg` gibi açıklayıcı bir isim kullanın.

CMS Platformlarında Görsel Optimizasyonu

Her platform farklı ölçüde otomatik optimizasyon sunar. Neyin yapılıp neyin yapılmadığını bilmek gereksiz manuel işi önler.

WordPress: Görselleri yüklerken otomatik olarak birden fazla boyut üretir; thumbnail, medium ve large. WordPress 5.8 sürümünden itibaren WebP desteği de eklendi. Fakat yerleşik sıkıştırma minimal düzeyde kalır. Eksiksiz optimizasyon için Smush, ShortPixel veya Imagify gibi eklentiler kullanılır. Resmi WordPress belgelerine göre GD kütüphanesi, desteklediği formatlar arasında WebP'yi sayıyor.

Wix: Wix kendi CDN'i üzerinden görselleri otomatik sunar. Tarayıcı destekliyorsa WebP formatını otomatik iletir. Alt text ekleme özelliği editörde mevcuttur; ayrıca AI destekli toplu alt text oluşturma aracı sunulmaktadır (Wix Accessibility Wizard).

Shopify: Yüklenen görselleri kendi CDN'i üzerinden global olarak dağıtır. WebP ve AVIF dönüşümünü Liquid şablon sözdizimi ile yönetebilirsiniz. Büyük mağazalar için ürün görseli boyutu ve formatı temadan kontrol edilir.

Üç platform da belirli düzeyde otomatik optimizasyon yapıyor. Bu iyi. Ancak hiçbiri kaynak görseli dönüp size sıkıştırmak zorunda değil; platform ne yaparsa yapsın, kaynakta büyük bir dosya büyük kalır. En verimli sonuç için görseli platforma yüklemeden önce optimize etmek en sağlam yoldur. Alışkanlık haline getirmek kolaydır.

Sık Sorulan Sorular

Görsel optimizasyonu sayfa hızını ne kadar iyileştirir?

Doğrudan ölçüm yapmanın en basit yolu Google PageSpeed Insights'tır. Bir görsel %70 küçültülürse o görselin yükleme süresi orantılı biçimde azalır. Ancak toplam sayfa hızına etkisi diğer faktörlere de bağlıdır: hosting, JavaScript yükü, CDN kullanımı.

Her görseli WebP'e dönüştürmeli miyim?

Yeni yükleyeceğiniz görseller için WebP veya AVIF tercih edin. Mevcut site görsellerini toplu dönüştürme işlemi WordPress için ShortPixel, Squoosh CLI veya Cloudflare Images gibi araçlarla otomatikleştirilebilir. Önce yüksek trafikli sayfalar hedeflenmeli.

Lazy loading tüm resimlere uygulanabilir mi?

Hayır. İlk ekranda görünen görseller (hero, logo, sayfa üstü banner) lazy load edilmemelidir. Diğer tüm görseller için `loading="lazy"` güvenle kullanılabilir.

Alt text kaç karakter olmalı?

Google'ın resmi kılavuzunda belirli bir karakter limiti yoktur. Pratik kural olarak 60-125 karakter arası yeterlidir; görsel içeriği tamlayan, tekrarsız bir açıklama yeterlidir.

Responsive görseller ne demek?

Farklı ekran boyutlarına farklı görsel dosyaları sunmaktır. `srcset` özelliği ile tarayıcı kendi çözünürlüğüne uygun dosyayı seçer. Bu yöntem mobil kullanıcıların büyük masaüstü görsellerini indirmesini engeller.

Görseller, web sayfasının en ağır parçasıdır ve çoğu durumda en az dokunan parçadır. Bu paradoks şaşırtıcı. Yatırım açısından bakılınca WebP formatına geçiş, `loading="lazy"` özelliğini eklemek ve alt text standartını uygulamak başka herhangi bir SEO çalışmasına kıyasla çok daha az zaman, çok daha az para gerektirir; buna karşın sayfa hızı, Core Web Vitals skorları ve organik görsel trafik üzerindeki olumlu etkisi somut ve ölçülebilir şekilde hissedilir.

Sitenizin görsel optimizasyon durumunu Google PageSpeed Insights veya Lighthouse ile ölçerek başlangıç noktasını netleştirebilirsiniz. Lighthouse, hangi görsellerin fazla büyük olduğunu, hangi görsellerin yanlış formatta sunulduğunu ve hangi LCP adaylarının gecikmeye yol açtığını madde madde raporlar. Ücretsizdir, tarayıcıda açılır, kullanmak için kayıt gerekmez. İlk raporu almak beş dakika sürer.

Yazar: Blakfy SEO Ekibi

Uzmanlık: SEO ve dijital pazarlama

Yayım tarihi: 2026-05-22

Son güncelleme: 2026-05-22