Mobilden Masaüstüne Görseller: Büyütmek mi, Yeniden Çerçevelemek mi
Mobil için seçilmiş bir görsel masaüstünde çoğu zaman tutmaz. Ama sorun genelde sanıldığı gibi dosyanın küçük olması değil, kadrajın o genişlikte anlamını kaybetmesidir. Bu ikisi birbirine karıştığı için de yanlış araçla çözülmeye çalışılır.
Önce sorunu ikiye ayırın
Responsive görselde iç içe geçmiş iki ayrı problem var. Birincisi çözünürlük: aynı kadraj, farklı piksel yoğunluklarında ve farklı genişliklerde net kalsın, gereğinden büyük dosya inmesin. İkincisi kompozisyon: dar ekranda işe yarayan kadraj geniş ekranda dağılıyor, geniş ekranda kurulan sahne dar ekranda tanınmaz hale geliyor.
İkisinin çözümü aynı değil. Çözünürlük sorununu tarayıcıya devredersiniz, kompozisyon sorununu devredemezsiniz çünkü fotoğrafın konusunun ne olduğunu tarayıcı bilmez.
Çözünürlük: kararı tarayıcı versin
Aynı kadrajın birkaç boyutunu verip seçimi tarayıcıya bırakmak, elle yazılan her çözümden iyi çalışır. Tarayıcı ekran genişliğini, piksel yoğunluğunu ve düzendeki gerçek yerleşim alanını sizden önce bilir.
<img src="foto-800.jpg" srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w" sizes="(max-width: 700px) 100vw, 700px" width="1600" height="900" alt="...">Burada asıl iş sizes tarafında. Yanlış yazılırsa tarayıcı hep en büyük dosyayı indirir ve srcset hiçbir şey kazandırmaz. Kolon genişliği sabitse onu yazın, akışkansa yüzdeyi olduğu gibi verin.
Kompozisyon: kadrajı siz seçin
Kadraj değişmesi gerekiyorsa srcset yetmez, picture gerekir. Yatay bir sahneyi dar ekranda dikey bir kesitle değiştirmek istiyorsanız iki ayrı dosya hazırlarsınız ve hangisinin nerede görüneceğini medya sorgusuyla söylersiniz.
<picture> <source media="(max-width: 600px)" srcset="sahne-dikey.jpg"> <img src="sahne-yatay.jpg" alt="..."> </picture>Bunu genelde picture ile çözerim, JavaScript ile kaynak değiştirmeyi tercih etmem: tarayıcının ön yükleyicisi HTML'i işlerken görseli çoktan indirmeye başlar, script devreye girdiğinde yanlış dosya zaten inmiştir. İki dosya indirip birini çöpe atmış olursunuz.
Peki her kadraj için ayrı dosya üretmeye değmiyorsa? O zaman odak noktasını taşımak kalan en ucuz yol. Aynı dosyayı kullanır, kırpmayı CSS'e bırakırsınız.
img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% 40%; }object-position, kırpmanın hangi kenardan yeneceğini belirler. Yüzü sol üstte olan bir portre, ortadan kırpıldığında kaybolur; odak noktasını elle vermek bu kaybı çoğu durumda gidermeye yeter.
Kaç varyant fazla?
"Her ekran için ayrı görsel" tavsiyesi kulağa titiz gelir, pratikte hızla ters döner. Üç kırılma noktası, üç format ve iki piksel yoğunluğu ile tek bir fotoğraf on sekiz dosyaya çıkar. Bunların hepsi üretilecek, isimlendirilecek, sürüm değişince yeniden kırpılacak ve önbellekte ayrı ayrı yer tutacak.
Fotoğraf değiştiğinde iş on sekiz kere tekrarlanır, kırpmalar da elle yapıldıysa biri mutlaka eski kadrajla kalır. Bu yüzden sanat yönlendirmesini iki varyantla sınırlamak, boyut varyantlarını da otomatik üreten bir işleme bırakmak makul sınır. Elle üretilen üçüncü kadrajın kullanıcıya kazandırdığı şey, bakım maliyetinin altında kalıyor.
Yer tutucu unutulunca
Görsele width ve height yazmak ya da CSS'te aspect-ratio vermek, dosya inene kadar yerin ayrılmasını sağlar. Bu yapılmadığında metin okunmaya başlandıktan sonra görsel gelir ve satırlar aşağı kayar. Kullanıcının okuduğu yeri kaybetmesi, düşük çözünürlüklü bir görselden çok daha rahatsız edici.
Kırılma noktalarında değil, aralarda test edin
Tasarımı 375, 768 ve 1440 genişliklerinde açıp "çalışıyor" demek yanıltıcı. Sorunlar genelde bu değerlerin arasında çıkar: 900 pikselde kolonun içinde kalan görselin oranı bozulur, 1100 pikselde yanındaki metin iki kelimelik satırlara düşer. Pencereyi yavaşça sürükleyerek geçmek, üç ayrı ekran görüntüsüne bakmaktan daha çok hata gösterir.
Görseli kaldırmak da bir karar
Bir görselin her ekranda bulunması gerekmez. Dekoratif bir fotoğraf dar ekranda içeriği aşağı itiyorsa gizlemek meşru bir seçim, ve bu durumda alt="" ile ekran okuyucudan da çıkarılması gerekir. Ama görsel bilgi taşıyorsa, yani grafikse, ekran görüntüsüyse, ürünün kendisiyse, mobilde gizlemek onu görmeyen kullanıcıyı eksik bilgiyle bırakır. Ayrım dekoratif mi bilgilendirici mi sorusunda, ekran genişliğinde değil.