HTML picture ile img srcset arasındaki fark nedir?

Kısa cevap​

picture öğesi, tarayıcıya farklı koşullarda farklı görsel dosyaları seçtirmek için kullanılır; örneğin mobilde kare, masaüstünde yatay görsel veya WebP destekleniyorsa WebP sunmak gibi. img öğesindeki srcset ise genellikle aynı görselin farklı boyutlarını tarayıcının seçmesine yardım eder. picture içinde yine zorunlu olarak bir img yedeği bulunur.

Nasıl çalışırlar?​

srcset, aday görselleri bir liste halinde verir. w tanımlayıcıları dosyaların genişliklerini, sizes ise görselin sayfada yaklaşık hangi CSS genişliğinde gösterileceğini belirtir. Tarayıcı bu bilgileri ekran yoğunluğu, görüntüleme alanı ve ağ koşulları gibi etkenlerle birlikte değerlendirir.


Bu örnek, tarayıcıya küçük ekranda 100vw, büyük ekranda 800 CSS piksel yerleşim genişliği bildirir. sizes görselin CSS genişliğini ayarlamaz; gerçek yerleşimi CSS veya width/height ile ayrıca kurmalısınız. Aday genişlikleri dosyanın gerçek piksel genişliğidir; yalnız adını 400 yapmak onu 400 piksele dönüştürmez. src, srcset kullanılamadığında veya uygun aday seçilemediğinde kullanılacak temel kaynaktır.

picture ise source öğeleriyle seçim koşulları tanımlar. En yaygın kullanım biçimi dosya biçimi, ekran genişliği veya sanat yönetimidir: Aynı fotoğrafın kırpılmış bir mobil sürümü seçilebilir.


Tarayıcı source öğelerini sırayla değerlendirir; media ve type koşulları uygun ilk kaynaktaki srcset adayları arasından seçim yapar. Örnekte mobilJPEG koşulu önce geldiği için mobilde AVIF desteği olsa bile bu kaynak önceliklidir. Hiçbiri uygun değilse içteki img çalışır. Bu nedenle picture kullanırken img öğesini kaldırmak doğru değildir.

Hangisini ne zaman seçmeli?​

Kararı şu şekilde verebilirsiniz:


Örneğin yalnızca 400, 800 ve 1600 piksel genişlikte aynı fotoğraflarınız varsa srcset yeterlidir. Mobilde konunun yakın plan, masaüstünde geniş kadraj görünmesini istiyorsanız bu durum boyut seçimi değil, içerik/kırpma seçimi olduğundan picture kullanın.

Uygularken kontrol listesi​

1. İhtiyacı belirleyin: yalnız çözünürlük seçimi için img srcset, biçim veya kadraj seçimi için picture kullanın.
2. Her aday dosyanın gerçekten mevcut ve amacına uygun olduğundan emin olun. Dosya adındaki genişlik, w değeriyle uyumlu olmalıdır.
3. w tanımlayıcılı srcset kullanıyorsanız görselin yerleşim genişliğini sizes ile gerçeğe yakın tanımlayın; aksi durumda tarayıcı yanlış boyutu seçebilir.
4. picture kullanıyorsanız en alta anlamlı bir img yedeği, doğru src ve alt metni koyun.
5. Sayfayı farklı ekran genişliklerinde ve desteklenen/desteklenmeyen biçim senaryolarında test edin. Başarılı sonuçta görsel görünür ve seçilen dosya ağ geliştirici araçlarında beklediğiniz aday olur.

Bir görsel görünmüyorsa önce dosya yolunu ve sunucunun verdiği yanıtı kontrol edin. Uygun media/type adayı bulunmadığında img kaynağı seçilebilir. Ancak seçilen source dosyasının 404 vermesi, tarayıcının otomatik olarak sonraki source veya img kaynağını deneyeceği anlamına gelmez. Önce Network’te gerçekten seçilen URL’yi ve yanıtını inceleyin. srcset farklı boyutları otomatik olarak yeniden oluşturmaz; aday dosyaları önceden üretmeniz gerekir. Ayrıca picture, CSS arka plan görsellerinin yerine geçmez; içerik olarak anlam taşıyan görseller için kullanılır.

Sık sorulan sorular​

picture ile srcset birlikte kullanılabilir mi?​

Evet. picture içindeki source öğelerinde srcset kullanarak hem biçim/kadraj koşulu hem de o koşula ait farklı çözünürlük adayları tanımlayabilirsiniz. İçteki img yine yedek görevi görür.

srcset içindeki 1x ve 2x neyi ifade eder?​

Bunlar piksel yoğunluğu adaylarını belirtir. Sabit CSS boyutunda gösterilen küçük bir arayüz görseli için yoğunluğa göre dosya seçmekte kullanılabilir; akışkan genişlikteki içerik görsellerinde ise genellikle w tanımlayıcıları ve sizes daha uygundur.