Duyarlı görseller: srcset, sizes ve DPR nasıl birlikte çalışır?

Dosya pikseli, CSS pikseli ve yoğunluğu ayırın

800 piksel genişlikte dosya, 400 CSS piksellik alanda gösterilebilir. DPR 2 olduğunda bu alan yaklaşık 800 cihaz pikselidir. Bu bir planlama ilişkisidir; tarayıcının seçim hakkını kaldırmaz.

Önce 800 ile pencere genişliği eksi 32 değerlerinden küçüğünü bulun. Bunu DPR ile çarpın. Görsel dar sütundaysa tüm pencere genişliğini çarpmayın.

Değişken yerleşimde genişlik tanımlayıcıları kullanın

w, dosyanın gerçek içsel piksel genişliğidir; yerleşim kırılma noktası değildir. sizes beklenen alanı bildirir. Örnekte pencere 832 CSS pikseli ve üzerindeyken alan 800, daha dar olduğunda iki boşluk çıkarılmış pencere genişliğidir.

Gösterilen CSS örneğin parçasıdır. Bileşen yarım sütuna taşınırsa sizes da değişmelidir. Eski tam genişliği korumak gereksiz büyük dosya seçtirebilir. Popüler ekranları değil, gerçek yerleşimi açıklayın.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Adayı tahmin edip gerçek seçimi ölçün

392 genişlik ve DPR 2 için alan 360, hedef 720 pikseldir; 800w makul adaydır. Geniş ekranda DPR 2 için hedef 1600 olur. Hesap seçimin girdilerini açıklar, belirli dosyayı zorlamaz.

Pencere küçülünce tarayıcı önceden indirdiği büyük görseli koruyabilir. Yeni sayfa bağlamı açın veya pencere ve DPR ayarından sonra yenileyin. Gerçek 400, 800 ve 1600 piksellik dosyalar üretin; aynı dosyayı yeniden adlandırmak çözünürlük oluşturmaz.

• Elemanın gerçekten çizilen genişliğini ölçün.
• currentSrc adresini Ağ panelindeki görselle karşılaştırın.
• Boyutları, yanıt türünü, önbelleği ve aktarılan baytı inceleyin.
• Dar ve geniş pencereleri DPR 1 ve DPR 2 ile sınayın.
• Yatay taşmayı ve yükleme sırasında yer değiştirmeyi kontrol edin.

x tanımlayıcılarını sabit boyutta kullanın

Daima 120 CSS pikseli görünen logo için 120 piksellik dosya 1x, 240 piksellik dosya 2x olabilir. Bunlar aynı gösterim boyutunun farklı çözünürlükleridir. Bir srcset içinde x ve w karıştırmayın.

Mobilde yakın yüz, masaüstünde geniş sahne gerekiyorsa bu ayrı bir kompozisyon kararıdır. picture ve uygun source koşulları kullanın. Alternatif metin okuyucunun aldığı anlamlı içeriği anlatmalıdır.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

En-boy oranını ve yüklemeyi planlayın

width ve height görsel gelmeden orana göre yer ayırır; CSS'in duyarlı genişliğini sabitlemez. 4:3 oranında 800 genişlik 600 yükseklik, 360 genişlik 270 yükseklik verir.

Geç yükleme sayfanın aşağısındaki görseller için yararlıdır; ilk görünen ana görseli gelişigüzel geciktirmeyin. Aday boyutları, sıkıştırma, biçim ve yükleme stratejisi farklı maliyetleri azaltır.

Çözülmüş piksel belleği ile ağ dosyası boyutu ayrıdır. Küçük WebP bellekte büyük olabilir. Belleği gerçek boyutlarla hesaplayın; sıkıştırılmış baytları dosyadan ölçün.

Yayın öncesi bileşeni birlikte kontrol edin

Aday genişliklerini, kırpmayı, oranı, kaliteyi ve sizes ifadesini bileşenle birlikte tutun. Azami genişlik 800 yerine 1000 olursa adayları yeniden inceleyin.

src ve tüm srcset adreslerini, anlamlı alternatif metni ve ayrılan alanı doğrulayın. Tabloyu CSS-DPR hesabıyla, yükseklikleri oran hesabıyla tekrarlayın. Amaç gerçek cihazlarda dosyalarla yerleşimin uyumudur.