Resmi Responsive Yapma: CSS, srcset ve picture ile Mobil Uyumlu Resim

Resmi responsive yapmanın en kısa yolu, CSS’te resme max-width: 100%; height: auto; vermektir. Bu kural resmin hiçbir zaman bulunduğu alandan taşmamasını ve oranının bozulmamasını sağlar. Daha iyi bir sonuç için srcset ve sizes ile her ekrana uygun boyutta dosya sunmak, width ve height değerlerini yazarak sayfa kaymasını önlemek ve WebP/AVIF formatlarını <picture> ile kullanmak gerekir. Sayfanın mobilde düzgün görünmesi için <head> içinde viewport etiketinin de olması şarttır.

1. CSS ile Resmi Responsive Yapma

Tüm resimler için sitenin CSS dosyasına şu kuralı ekleyin:

img {
  max-width: 100%;
  height: auto;
}

max-width: 100% resmin kapsayıcısından geniş olmasını engeller, height: auto en-boy oranını korur. Tek bir resim için aynı kuralı satır içi stil olarak da yazabilirsiniz: style="max-width:100%; height:auto;". width: 100% kullanmayın; küçük resimleri gereksiz yere büyütüp bulanıklaştırır.

2. srcset ve sizes ile Doğru Boyutta Resim

CSS kuralı resmi ekrana sığdırır ama telefon yine büyük dosyayı indirir. srcset ile aynı resmin farklı genişlikteki sürümlerini tanımlarsınız; tarayıcı ekran genişliğine ve piksel yoğunluğuna göre en uygununu seçer:

<img src="urun-800.webp"
     srcset="urun-400.webp 400w, urun-800.webp 800w, urun-1600.webp 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     width="800" height="600"
     alt="Kırmızı koşu ayakkabısı" loading="lazy">

• srcset: Dosyalar ve gerçek genişlikleri (w birimi).
• sizes: Resmin sayfada kaplayacağı genişlik. Örnekte 600 pikselden dar ekranda tam genişlik (100vw), daha genişte ekranın yarısı (50vw).
• width / height: Tarayıcı resim yüklenmeden yer ayırır, sayfa kayması (CLS) olmaz.
• loading=”lazy”: Ekranda görünmeyen resimleri kaydırınca yükler. Sayfanın en üstündeki ana görselde (LCP) kullanmayın; ona fetchpriority="high" verebilirsiniz.

3. picture Etiketi ile WebP ve AVIF Kullanımı

<picture> etiketi, tarayıcının desteklediği en iyi formatı seçmesini sağlar:

<picture>
  <source srcset="urun.avif" type="image/avif">
  <source srcset="urun.webp" type="image/webp">
  <img src="urun.jpg" width="800" height="600" alt="Kırmızı koşu ayakkabısı">
</picture>

Tarayıcı AVIF’i destekliyorsa onu, desteklemiyorsa WebP’yi, hiçbirini desteklemiyorsa JPEG’i yükler. Formatların farkları için en kaliteli resim formatı yazısına bakabilirsiniz. Ekran boyutuna göre farklı kırpılmış resim (örneğin mobilde dikey, masaüstünde yatay) göstermek için <source media="(max-width: 600px)"> kullanılır.

4. HTML Siteyi Mobil Uyumlu Yapmak İçin Viewport

Resimler responsive olsa bile sayfanın <head> bölümünde viewport etiketi yoksa telefon sayfayı masaüstü genişliğinde açıp küçültür:

<meta name="viewport" content="width=device-width, initial-scale=1">

Ayrıntılar için viewport meta etiketi yazısına bakabilirsiniz. Sayfa telefonda yana kayıyorsa içerik ekrandan geniş hatasının çözümüne bakın.

WordPress’te Resim Responsive Nasıl Yapılır?

WordPress, yüklediğiniz her resmin farklı boyutlarını otomatik oluşturur ve içerikteki resimlere srcset, sizes ve loading="lazy" özniteliklerini kendisi ekler. Resim taşıyorsa sorun genellikle temadadır:

• Görünüm > Özelleştir > Ek CSS bölümüne .entry-content img { max-width:100%; height:auto; } ekleyin.
• Sayfa oluşturucularda resim genişliğini piksel yerine yüzde olarak verin.
• Tablo ve iframe gibi geniş öğeleri bir kapsayıcı içine alıp yatay kaydırma verin.

Responsive Resim Nasıl Test Edilir?

1. Chrome’da F12 ile Geliştirici Araçları’nı açın, cihaz simgesine (Ctrl+Shift+M) tıklayıp farklı telefon boyutlarını deneyin.
2. Ağ (Network) sekmesinde “Img” filtresiyle telefonda hangi boyuttaki dosyanın indiğine bakın.
3. PageSpeed Insights’ta “Resimleri uygun boyuta getirin” ve “Görüntü öğelerinde açık genişlik ve yükseklik yok” uyarılarını kontrol edin.

Mobil uyumluluk, SEO uyumlu site kriterlerinin temel parçalarından biridir.

Sıkça Sorulan Sorular