Bir haber kartındaki fotoğraf telefonda 360 piksel, masaüstünde 600 piksel genişliğinde olabilir. Aynı 2400 piksellik dosyayı iki yerde sunmak işi kolaylaştırır ama küçük ekrana gerekenden fazla veri yükleyebilir. Önce kutunun gerçek genişliklerini ölçün. Ardından o genişlikleri ve ekran yoğunluğunu karşılayacak birkaç aday üretin.

Yerleşimin sınırlarını ölçün

Telefon genişliği ile resim alanı aynı sayı olmayabilir. Kenar boşlukları, sütunlar ve sayfanın en büyük genişliği alanı değiştirir. Tarayıcıda en dar ve en geniş durumun resim kutusunu ölçün. Örneğin bir kart 360 ve 600 CSS pikselde gösteriliyorsa 360, 720 ve 1200 piksel dosyalar ilk deneme için kullanılabilir.

Aynı kadrajdan adaylar çıkarın

Çözünürlük seçimi için adayların kompozisyonunu ve en-boy oranını eşleştirin. Böylece tarayıcı farklı dosya seçtiğinde kadraj değişmez. HTML’de srcset genişlikleri dosyanın gerçek piksel ölçülerini, sizes ise yerleşimdeki alan genişliğini tarif eder. Tarayıcı bu bilgilerle cihaz ve koşullara uygun adayı seçer. MDN duyarlı resimler rehberi

Kırpma değişecekse bunu ayrı ele alın

Yatay başlık telefon ekranında özneyi kaybediyorsa yalnızca daha küçük bir dosya hazırlamak çözmez. Aynı sahneden mobil için ayrı bir kırpma üretin ve uygun yerleşimde onu kullanın. Bu düzeni açıklayan metin her iki kadraj için de geçerli olmalıdır.

Ağ isteğini ve görünümü birlikte kontrol edin

Dar bir pencerede taze yükleme yapın. Ağ panelinden kullanılan dosya adını ve aktarım boyutunu okuyun. Geniş ve yoğun ekranla tekrarlayın. Önceden büyük aday önbelleğe alındıysa tarayıcı onu kullanabilir. Son olarak her iki görünümde konu, netlik ve ayrılan alanı gözle kontrol edin.

Bir kart ile tam genişlikteki kapağı ayrı ölçün

Aynı dağ fotoğrafının ana sayfa kapağında ve üç sütunlu bir kartta kullanıldığını düşünün. Kartın genişliği 360, kapağın genişliği 1.200 piksel olabilir. İkisine de en büyük dosyayı vermek kolaydır ancak kartta kullanıcı, görünmeyen ayrıntılar için de veri indirir. İlk olarak tasarımı tarayıcıda dar ve geniş ekranda açın. Resmin kapladığı gerçek genişliği ölçün. Pencereyi genişletirken sütun sayısı değişiyorsa kartın bir noktadan sonra daralabileceğine dikkat edin. Yüksek piksel yoğunluğuna sahip ekranlar için de daha büyük bir seçenek bırakın. Fotoğrafın başlığına veya kartın yanında duran yazıya göre ölçü tahmin etmeyin. Kartın farklı bir yerde yeniden kullanılması durumunda kendi yerleşimini kontrol edin. Kapağın kadrajı kartta kesiliyorsa ayrı kırpma kullanmak gerekebilir. Bu, aynı kompozisyonun farklı genişliklerdeki kopyalarını üretmekten ayrı bir karardır.

Tarayıcının seçtiği dosyayı inceleyin

Ağ araçlarını açın, önbelleği geçici olarak devre dışı bırakın ve sayfayı dar pencereyle yeniden yükleyin. Resimler arasından ilgili dosyayı bulun. Seçilen adın hangi genişliğe karşılık geldiğini ve aktarılan baytı not edin. Geniş pencereyle deneyi yeniden yapın. Aynı dosyayı iki kez görmeniz bir sorun olduğunu tek başına göstermez. Piksel yoğunluğu veya önceki yükleme seçimi sonucu etkileyebilir. Tarayıcının ihtiyaç duyduğundan çok büyük bir aday aldığı görülüyorsa yerleşimi anlatan ölçü ifadesine geri dönün. Üç sütunda bir kartın bütün pencere genişliği kadar yer kapladığını söylemiş olabilirsiniz. Resmin altındaki metin yükleme sırasında yer değiştiriyorsa genişlik ve yükseklik oranını önceden ayırın. Son olarak yavaş ağ benzetiminde ilk ekrandaki kapağın ne zaman göründüğünü kontrol edin. Bir düzenleme hem gereksiz indirmeyi azaltıyor hem de başlığı yerinde tutuyorsa gerçek bir iyileşme sağlamıştır.