Srcset nedir?
Srcset, tarayıcının ekran boyutu ve çözünürlüğüne göre seçebileceği görüntülerin bir listesini belirten bir HTML görüntü niteliğidir. Bu kavram duyarlı görseller olarak bilinir ve farklı görüntüleme koşulları için en uygun görsel versiyonunun yüklenmesini sağlar.
İşte srcset 'in nasıl çalıştığına dair bir örnek:
<img srcset="example-image-480w.jpg 480w, example-image-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="example-image-800w.jpg" alt="İllüstrasyon örneği">Bu örnekte srcset, görüntü alanı genişliği 600 pikselden azsa tarayıcıya 480 piksel genişliğinde bir görüntü yüklemesini söyler. Görüntü alanı genişliği 600 pikselden fazlaysa, tarayıcı daha büyük, 800 piksel genişliğindeki görüntüyü yükleyecektir.
Alternatif olarak, boyut yerine piksel yoğunluğunu bir koşul olarak ayarlayabilirsiniz:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Başka bir illüstrasyon örneği">Srcset SEO için Neden Önemlidir?
Srcset SEO için çok önemlidir çünkü tarayıcıların cihazın özelliklerine göre en uygun görüntü boyutunu yüklemesini sağlar. Bu optimizasyonun çeşitli faydaları vardır:
- Geliştirilmiş Yükleme Hızı: Daha büyük görseller daha büyük dosya boyutlarına sahiptir ve bu da sayfa yükleme sürelerini yavaşlatabilir. Farklı cihazlar için uygun boyutta görseller yükleyerek, srcset bant genişliğinden tasarruf etmeye ve sayfa yükleme süresini azaltmaya yardımcı olur.
- Daha İyi Kullanıcı Deneyimi: Daha hızlı sayfa yükleme süreleri, kullanıcı deneyimini geliştirerek hemen çıkma oranlarının düşmesine ve daha yüksek etkileşime yol açar.
- SEO Faydaları: Sayfa yükleme hızı hem mobil hem de masaüstü aramaları için doğrudan bir sıralama faktörüdür. Görüntüleri srcset kullanarak optimize etmek, arama motoru sıralamanızı olumlu yönde etkileyebilir.
Duyarlı Görseller için En İyi Uygulamalar
1. Öneriler için PageSpeed Insights'ı kontrol edin
PageSpeed Insights, Google'ın web sitenizin hızını optimize etmek için öneriler sunan ücretsiz bir aracıdır. Web sayfanızın URL'sini girerek, görüntü optimizasyonu için aşağıdaki gibi özel öneriler alabilirsiniz:
- Daha iyi sıkıştırma için görüntü formatının güncellenmesi.
- Ekran dışı veya gizli görüntüler için tembel yüklemeyi düşünme.
- Yükleme sürelerini iyileştirmek için görüntüleri uygun şekilde boyutlandırma.
2. Sanat Yönetmenliği için Resim Öğesini Kullanın
<picture> öğesi, tarayıcıların cihaz özelliklerine göre farklı görüntüler göstermesini sağlar. Bu, aynı görüntünün farklı boyutları yerine tamamen farklı görüntüler göstermek istediğinizde kullanışlıdır.
İşte <picture> öğesinin kullanımına bir örnek:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Örnek illüstrasyon"> </picture>Bu örnekte, example-image.jpg veya example-image-2x.jpg, cihaz piksel yoğunluğuna bağlı olarak 600 piksel veya daha fazla tarayıcı genişliklerinde görüntülenecektir. Ekran genişliği 600 pikselden azsa veya <picture> öğesi desteklenmiyorsa, bunun yerine <img> öğesi işlenecektir. Uyumluluğu sağlamak için her zaman <img> öğesini ekleyin.
3. Uygun Geri Dönüşleri Sağlayın
Tarayıcının srcset veya <picture> öğesini desteklememesi durumunda her zaman src özniteliğiyle bir yedek görüntü sağlayın. Bu, tarayıcı özelliklerinden bağımsız olarak bir görüntünün her zaman görüntülenmesini sağlar.
4. Açıklayıcı Alt Metin Kullanın
Resimleriniz için her zaman açıklayıcı alt metin ekleyin. Bu, erişilebilirliği artırır ve arama motorları için bağlam sağlayarak SEO'nuzu geliştirir.
Sonuç
srcset kullanımı, görüntüleri çeşitli cihazlar için optimize etmek, daha hızlı yükleme süreleri ve gelişmiş kullanıcı deneyimi sağlamak için hayati bir uygulamadır. En iyi uygulamaları takip ederek web sitenizin performansını ve SEO'sunu geliştirebilir, kullanıcılar için daha verimli ve erişilebilir hale getirebilirsiniz.
