Web İçin Görsel Optimizasyonu: Format, Boyut ve Sıkıştırma Rehberi

Bir web sitesinin ağırlığının ortalama %50-70'ini görseller oluşturur. Yani sayfanız yavaşsa, sebebi büyük ihtimalle kodunuz değil, yüklediğiniz fotoğraflardır. İyi haber şu: görsel optimizasyonu, sitenizin hızını artırmak için yapabileceğiniz en kolay ve en çok kazandıran iştir. Bu rehberde hangi formatı ne zaman kullanacağınızı, doğru boyutu nasıl belirleyeceğinizi ve sıkıştırmada nerede duracağınızı adım adım anlatıyoruz.

Neden önemli

Google'ın sayfa deneyimi ölçütleri arasında LCP (Largest Contentful Paint) var: sayfadaki en büyük görsel öğenin ne kadar sürede göründüğü. Çoğu sitede bu öğe bir fotoğraftır. Yani görselinizin yüklenme süresi, doğrudan arama sıralamasını etkileyen bir metriğe dönüşür.

Bunun ötesinde:

• Mobil veri: Ziyaretçilerin çoğu mobil. 4 MB'lık bir sayfa, sınırlı veri paketi olan kullanıcı için pahalıdır.
• Dönüşüm: Sayfa yüklenme süresindeki her saniyelik gecikme, terk oranını artırır. Ürün sayfanız yavaşsa satın alma tamamlanmaz.
• Tarama bütçesi: Arama motoru botları sitenizde sınırlı zaman harcar. Ağır sayfalar daha az taranır.

Hangi formatı ne zaman kullanmalı

Format seçimi, optimizasyonun en büyük kazancı sağlayan adımıdır. Yanlış format seçtiğinizde ne kadar sıkıştırırsanız sıkıştırın istediğiniz sonucu alamazsınız.

Pratik kural: Fotoğraflar için WebP, logolar ve ikonlar için SVG. Şeffaflık gerektiren ama vektöre çevrilemeyen görseller için yine WebP.

En sık gördüğümüz hata, logoların PNG olarak kullanılması. Logonuz vektör bir çizimse SVG olarak kaydedin: hem 10 kat küçük olur hem de her ekran çözünürlüğünde net görünür.

Doğru boyut: en çok yapılan hata

Bu, tek başına en büyük israfın kaynağıdır. Telefonunuzla çektiğiniz fotoğraf 4000 piksel genişliğindedir. Sitenizde o fotoğrafın görüneceği alan ise 800 piksel olabilir. Tarayıcı 4000 pikseli indirip 800'e küçültür — yani gereksiz yere beş katı veri harcarsınız.

Doğru yaklaşım:

1. Görselin sitenizde kaç piksel genişlikte görüneceğini belirleyin.
2. Retina ekranlar için bu değerin 2 katını hedefleyin.
3. Görseli o boyuta indirin, sonra sıkıştırın.

Örnek: blog yazısı içindeki bir görsel 800 piksel alanda görünecekse, 1600 piksel genişliğinde kaydedin. Tam ekran hero görseli için 2560 piksel genelde fazlasıyla yeterlidir.

Boyutlandırma ve format dönüşümünü tek adımda yapmak için Görsel Dönüştürücü aracımızı kullanabilirsiniz; tek seferde 30 görsele kadar dönüştürüp ölçeklendirir.

Sıkıştırmada nerede durmalı

Sıkıştırma kalitesi 0-100 arasında bir değerdir ve buradaki tercih tamamen gözle yapılır. Genel eğilimler:

• 90-95: Gözle fark edilmez. Ürün fotoğrafları, portfolyo görselleri gibi detayın önemli olduğu yerler için.
• 80-85: Çoğu durum için ideal denge. Blog görselleri, arka planlar, kart görselleri.
• 70'in altı: Gözle görülür bozulma başlar. Özellikle düz renkli alanlarda lekelenme oluşur.

Kritik nokta: her yeniden kaydetme kalite kaybeder. JPG ve WebP kayıplı formatlardır. 85 kalitede kaydedilmiş bir görseli tekrar 85'te kaydederseniz ikinci bir kayıp yaşarsınız. Bu yüzden her zaman orijinal dosyadan çalışın, optimize edilmiş dosyayı tekrar optimize etmeyin.

Çok sayıda görseli tek seferde küçültmek için Toplu Görsel Sıkıştırma aracı işinizi görür.

Yükleme davranışı: lazy loading

Sayfanın en altındaki görselin, ziyaretçi oraya hiç gelmeyecekse indirilmesinin anlamı yok. HTML'de tek bir öznitelik bunu çözer:

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

Üç ayrıntı önemli:

• loading="lazy" yalnızca ekran dışındaki görsellere uygulanmalı. Sayfanın en üstündeki hero görseline uygularsanız LCP'nizi kötüleştirirsiniz.
• width ve height mutlaka yazılmalı. Yazılmazsa görsel yüklenirken sayfa zıplar; bu da CLS (Cumulative Layout Shift) puanınızı düşürür.
• alt hem erişilebilirlik hem SEO için gerekli. Görselin ne anlattığını yazın, anahtar kelime doldurmayın.

Farklı ekranlara farklı görsel

Aynı görseli hem masaüstüne hem telefona göndermek zorunda değilsiniz. srcset ile tarayıcıya seçenek sunarsınız:

<img
  src="foto-800.webp"
  srcset="foto-400.webp 400w, foto-800.webp 800w, foto-1600.webp 1600w"
  sizes="(max-width: 768px) 100vw, 800px"
  alt="Açıklama">

Tarayıcı ekran genişliğine ve piksel yoğunluğuna bakıp en uygun dosyayı indirir. Mobil kullanıcı 400 piksellik dosyayı alır, retina masaüstü 1600'ü.

Bu, uygulaması biraz emek isteyen ama mobil hızda en çok fark yaratan adımdır.

Pratik iş akışı

Yeni bir görseli siteye koyarken izlenecek sıra:

1. Orijinali sakla. Optimize edilmiş dosyayı arşiv olarak kullanmayın.
2. Kırp. Görselin gereksiz kenarlarını atın; en iyi sıkıştırma, olmayan pikseldir.
3. Boyutlandır. Görüneceği alanın 2 katı genişlik.
4. Formata çevir. Fotoğraf ise WebP.
5. Sıkıştır. 80-85 arası başlayın, gözle kontrol edin.
6. Ad ver. IMG_2847.jpg değil, antalya-otel-web-sitesi.webp. Dosya adı da bir SEO sinyalidir.
7. alt yaz. Görselin içeriğini bir cümleyle anlatın.

Sık yapılan hatalar

• Sıkıştırılmış dosyayı tekrar sıkıştırmak. Kalite geri gelmez, sadece daha çok kaybedersiniz.
• Her şeye lazy loading uygulamak. Hero görseli hemen yüklenmelidir.
• PNG ile fotoğraf kaydetmek. Aynı fotoğraf PNG olarak 5-10 kat büyük olur.
• Boyut özniteliklerini atlamak. Sayfa yüklenirken zıplar, kullanıcı yanlış yere tıklar.
• Ekran görüntülerini olduğu gibi yüklemek. 2560 piksellik bir ekran görüntüsü genelde 1200 pikselde de aynı işi görür.
• alt metnine anahtar kelime doldurmak. Arama motorları bunu fark eder ve olumsuz değerlendirir.

Sayısal bir örnek

Tipik bir kurumsal sitenin ana sayfasında 12 görsel olduğunu varsayalım. Optimizasyon öncesi ve sonrası:

Toplam: yaklaşık 10,4 MB → 0,7 MB. Mobil bağlantıda bu, sayfanın açılmasıyla açılmamasının farkıdır.

Bu oranlar abartılı görünebilir ama sahada gördüğümüz tablo genelde budur; çünkü çoğu sitede görseller hiç ellenmeden, kameradan çıktığı gibi yüklenmiştir.

Görselleri yüklemenin ötesi: önbellekleme

Optimize edilmiş görsel bile her ziyarette yeniden indiriliyorsa iş yarım kalmıştır. Görsellere uzun süreli tarayıcı önbelleği tanımlayın:

Cache-Control: public, max-age=31536000, immutable

Bir yıl uzun görünebilir ama güvenlidir — çünkü görseli değiştirdiğinizde dosya adını da değiştirirsiniz. logo.webp yerine logo-v2.webp veya içerik hash'i taşıyan bir ad kullanırsanız, eski dosya önbellekte kalsa bile yeni ad yeni indirme demektir.

Dosya adı hiç değişmiyorsa uzun önbellek tehlikelidir: kullanıcı aylarca eski görseli görür.

Unutulan görseller

Sayfa içindekiler dışında, sitenizin başka görselleri de var ve bunlar da optimize edilmeli:

• Favicon. Tarayıcı sekmesindeki simge. Favicon Oluşturucu ile tek dosyadan tüm boyutları üretebilirsiniz.
• Sosyal paylaşım görseli (OG image). Siteniz WhatsApp veya LinkedIn'de paylaşıldığında görünen kart. 1200×630 piksel standarttır. Yoksa paylaşımınız çıplak bir bağlantı olarak görünür.
• Apple touch icon. iPhone'da ana ekrana eklendiğinde kullanılan simge.

Sayfanızın paylaşıldığında nasıl göründüğünü Meta Etiket Önizleme aracıyla kontrol edebilirsiniz.

Sıkça sorulanlar

WebP'yi eski tarayıcılar desteklemiyorsa ne olacak? Pratikte bu artık sorun değil; güncel tarayıcıların tamamı destekliyor. Yine de garanti isterseniz <picture> etiketiyle JPG yedeği tanımlayabilirsiniz.

AVIF'e geçmeli miyim? Daha küçük dosya üretiyor ama kodlaması yavaş ve araç desteği WebP kadar oturmuş değil. Çoğu site için WebP yeterli.

Görselleri CDN'den servis etmeli miyim? Ziyaretçileriniz coğrafi olarak dağınıksa faydalı olur. Tek şehirde hizmet veren bir işletme için önceliğiniz önce boyut, sonra CDN olmalı.

Şeffaf arka planlı ürün fotoğrafı için hangi format? WebP. Hem şeffaflığı destekler hem PNG'den çok daha küçüktür.

Sonuç

Görsel optimizasyonu teknik bilgi gerektirmeyen ama en çok kazandıran iyileştirmedir. Doğru format, doğru boyut ve makul bir sıkıştırma ile sayfa ağırlığınızı çoğu sitede yarıya indirebilirsiniz.

Sitenizin şu anki durumunu görmek için Site Hız Testi aracıyla bir ölçüm alın; hangi görsellerin sorun çıkardığını orada göreceksiniz. Daha kapsamlı bir değerlendirme isterseniz bize ulaşın, sitenizi birlikte inceleyelim.