Telefona masaüstü boyutunda görsel gönderme
Bir kapağın her ekranda aynı görünmesi, herkese aynı dosyayı göndermen gerektiği anlamına gelmez. Küçük kart için çok büyük bir görsel indirmek veri harcar; gereğinden küçük dosya ise yoğun pikselli ekranda bulanıklaşır. Responsive görseller, bu iki uç arasında seçim yapmayı kolaylaştırır.
Benim için iyi bir kapak, her cihazda aynı büyük dosyayı göstermek zorunda değil. Telefon ekranında görünen küçük bir kart için gereğinden fazla veri yüklemek, görsel kaliteyi her zaman anlamlı biçimde artırmaz. Bana kalırsa görsel üretimiyle sunumunu ayrı düşünmeliyiz: kaliteli bir ana dosya hazırlayıp kullanım yerine uygun türevler sunmak daha dengeli bir yaklaşım.
Temel fikir
srcset görsel adaylarını ve genişliklerini, sizes ise görselin yerleşimde kaplayacağı alanı tarif eder. Tarayıcı kendi koşullarına göre aday seçer. Bunlar görselin CSS boyutunu belirleyen komutlar değildir. Özellikle sizes değerini gerçek kart genişliğinden koparmak, beklenmedik dosya seçimine yol açabilir.
Bir örnek üzerinden
Örnek bir üretim akışında aynı kapağın 480, 960 ve 1536 piksel genişlikte sürümlerini çıkarabilirsin. Bu sayılar zorunlu standart değil, deneme başlangıcıdır. Hepsinde aynı kırpma ve oranı koru. Mobilde kişinin yüzünü farklı konumda göstermek istiyorsan bu artık yalnızca çözünürlük değil, sanat yönetimi kararıdır.
Nereden başlamalı?
Ağ panelinde hangi dosyanın indirildiğini kontrol et. Ekranı daraltmanın tek başına yeni dosya indireceğini varsayma; önbellek de davranışı etkiler. Başarı ölçütün sadece kilobayt değil, doğru ölçüde netlik olmalı.
Benim yaklaşımım
Bir blog kartı için birkaç genişlikte çıktı hazırlasam dosyaları yalnızca isimlerine göre değil, gerçekten gösterildikleri alanla karşılaştırırdım. Başlık üstündeki büyük kapak ile liste kartı aynı ihtiyaca sahip değil. Ana konunun küçük sürümde de anlaşılır kalmasını isterdim. Benim için doğru boyut, yalnızca teknik bir sayı değil; kadraj ve okunabilirlik kararıdır.
