Ne anlama gelir?
Duyarlı Görsel (Responsive Images), tarayıcının cihazın ekran boyutuna ve çözünürlüğüne göre en uygun görsel sürümünü seçip indirmesini sağlayan tekniktir. HTML'deki srcset ve sizes öznitelikleriyle kurulur.
Neden gerekli?
Küçük bir telefon ekranına devasa bir masaüstü görseli göndermek, boşuna veri ve yavaş yükleme demektir. Duyarlı görseller her cihaza "tam ölçüsünde" görsel sunar.
Faydaları
- Mobilde daha hızlı yükleme
- Daha az bant genişliği tüketimi
- İyileşen Core Web Vitals
Ne yapmalı?
Görselleri farklı boyutlarda hazırlayıp srcset ile sunun. Modern görsel formatlarıyla (WebP/AVIF) birleştirildiğinde, hem hız hem kalite kazanılır.
Ne anlama gelir?
Duyarlı görsel (responsive image), bir web sayfasında, görüntülendiği cihazın ekran boyutuna ve çözünürlüğüne uygun boyutta ve çözünürlükte sunulan görseldir. Duyarlı görsel teknikleri (HTML'de srcset ve sizes öznitelikleri, <picture> öğesi gibi), tarayıcının her cihaz için en uygun görsel versiyonunu seçip yüklemesini sağlar; küçük ekranlara küçük görseller, büyük ve yüksek çözünürlüklü ekranlara daha büyük görseller sunulur. Duyarlı görseller, hem sayfa performansını hem görsel kalitesini optimize eden önemli bir teknik uygulamadır.
Duyarlı görselin faydaları
- Her cihaza uygun görsel boyutu
- Daha hızlı yükleme (gereksiz büyük görsel yok)
- Bant genişliği tasarrufu
- Optimize görsel kalitesi
Neden önemli?
Duyarlı görseller, sayfa performansı ve kullanıcı deneyimi açısından önemli bir teknik uygulamadır; çünkü görsellerin, sayfa yükleme süresinin önemli bir bölümünü oluşturduğu ve web'in çok çeşitli cihazlardan erişildiği gerçeklerini birlikte ele alır. Görseller, bir web sayfasının toplam boyutunun ve yükleme süresinin büyük bir kısmını oluşturabilir; optimize edilmemiş, gereksiz büyük görseller, sayfaları önemli ölçüde yavaşlatır. Aynı zamanda, web çok çeşitli ekran boyutlarına sahip cihazlardan (küçük telefonlardan büyük masaüstü ekranlara) erişilir. Bu iki gerçek birleştiğinde bir sorun ortaya çıkar: tüm cihazlara aynı büyük görseli sunmak verimsizdir; küçük bir telefon ekranı için büyük, yüksek çözünürlüklü bir görsel gereksizdir ve sadece yükleme süresini uzatır ve bant genişliğini israf eder. Duyarlı görseller, bu sorunu çözer; tarayıcının, her cihaz için en uygun görsel versiyonunu (boyut ve çözünürlük olarak) seçip yüklemesini sağlar. Bu, HTML'deki srcset özniteliği (tarayıcıya farklı boyutlardaki görsel versiyonlarını sunar), sizes özniteliği (görselin farklı ekranlarda ne kadar yer kaplayacağını belirtir) ve <picture> öğesi (farklı koşullar için farklı görsel kaynakları sunmayı sağlar) gibi tekniklerle yapılır. Böylece, küçük ekranlara küçük görseller, büyük ve yüksek çözünürlüklü ekranlara daha büyük görseller sunulur. Duyarlı görsellerin faydaları birkaç açıdan öne çıkar. Birincisi, sayfa hızı; her cihaza uygun boyutta görsel sunmak, gereksiz büyük görsellerin yüklenmesini önler, bu da özellikle mobil cihazlarda sayfa yükleme süresini önemli ölçüde kısaltır ve Core Web Vitals'ı iyileştirir. İkincisi, bant genişliği tasarrufu; daha küçük görseller, hem kullanıcının veri kullanımından hem sunucu bant genişliğinden tasarruf sağlar. Üçüncüsü, optimize görsel kalitesi; duyarlı görseller, her cihaza o cihaz için yeterli kalitede görsel sunar; büyük ekranlar yeterince kaliteli görseller alırken, küçük ekranlar gereksiz kalite yükü taşımaz. Duyarlı görsellerin SEO açısından önemi, sayfa hızıyla olan ilişkisidir; hızlı yüklenen sayfalar, hem daha iyi kullanıcı deneyimi hem Core Web Vitals metriklerinde daha iyi performans sağlar, ve görseller sayfa hızının önemli bir bileşeni olduğundan, duyarlı görseller bu iyileşmeye önemli katkıda bulunur. Duyarlı görselleri, diğer görsel optimizasyon teknikleri (sıkıştırma, modern formatlar, tembel yükleme) tamamlar. Duyarlı görsel, bir sayfada görüntülendiği cihaza uygun boyut ve çözünürlükte sunulan görseldir; srcset, sizes ve picture gibi tekniklerle, her cihaza en uygun görsel versiyonunu sunarak sayfa hızını ve bant genişliği verimliliğini iyileştiren, görsel kalitesini optimize eden ve Core Web Vitals yoluyla SEO'ya katkıda bulunan önemli bir teknik uygulamadır.
Gerçek örnek
Bir site, tüm cihazlara aynı büyük ve yüksek çözünürlüklü görselleri sunuyordu, bu da özellikle mobil cihazlarda yavaş yüklemeye ve gereksiz veri kullanımına yol açıyordu. Görseller duyarlı hale getirildiğinde (srcset ve sizes ile farklı boyutlarda versiyonlar sunularak), tarayıcı her cihaza uygun boyutta görseli yükledi; mobil cihazlarda sayfa yükleme belirgin biçimde hızlandı, bant genişliği tasarrufu sağlandı ve Core Web Vitals iyileşti.
Özet
Duyarlı görsel, bir sayfada görüntülendiği cihaza uygun boyut ve çözünürlükte sunulan görseldir. srcset, sizes ve picture öğeleriyle, her cihaza en uygun görsel versiyonu sunulur (küçük ekrana küçük, büyük ekrana büyük). Gereksiz büyük görselleri önleyerek sayfa hızını ve bant genişliği verimliliğini iyileştirir, görsel kalitesini optimize eder; Core Web Vitals yoluyla SEO'ya katkıda bulunan önemli bir tekniktir.