Küçük Ekranlarda Büyük Görselleri Optimize Etmek

Bir görseli masaüstü için hazırlayıp mobilde küçültmek, dosyayı küçültmez. Telefon ekranı küçük ama piksel yoğunluğu yüksek, üstelik bağlantı çoğu zaman daha yavaş. Küçük ekranda görsel optimizasyonu, aslında boyut ayarından çok tarayıcının hangi dosyayı ne zaman indirdiğini kontrol etmekle ilgili.

Küçük ekran, küçük dosya demek değil

İşe cihaz piksel oranından başlamak gerekiyor, çünkü mobil görsel hesabının tamamı buna dayanıyor. Tarayıcı sayfayı CSS pikseliyle çizer, ekran ise fiziksel pikselle gösterir. Bugünkü telefonların çoğunda bu oran 2 ya da 3. Yani sayfa 390 CSS piksel genişliğinde yerleşirken, o alana ekranda 1170 fiziksel piksel düşer.

Buradan çıkan sonuç ilk bakışta ters gelir: ekranı boydan boya kaplayan bir görseli net göstermek için yaklaşık 1170 piksel genişliğinde bir dosya gerekir. Masaüstü için hazırladığınız 1600 piksellik dosyanın çok altında değil. "Mobil için küçülttüm" derken elde edilen kazanç, beklenenin yarısına bile ulaşmayabilir.

Pratikte üç varyant yeter: 1x, 2x, gerekiyorsa 3x. 2x ile 3x arasındaki farkı fotoğraflarda çıplak gözle ayırmak zordur, dosya boyutu ise belirgin şekilde büyür (3x varyantını çoğu içerik görseli için abartılı buluyorum).

Seçimi tarayıcıya bırakmak: srcset ve sizes

Doğru varyantı JavaScript ile seçmeye çalışmak gerekmiyor, tarayıcı bunu zaten yapabiliyor. Tek yapmanız gereken elinizde hangi dosyaların olduğunu ve görselin sayfada ne kadar yer kaplayacağını söylemek.

<img src="foto-800.jpg" srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" alt="Ürün kutusunun açılmış hali">

srcset içindeki 400w, dosyanın gerçek piksel genişliğidir; ekranda kaplayacağı yer değil. Onu sizes söyler. Bu ikisi neden ayrı? Çünkü tarayıcı görseli indirmeye, sayfanın yerleşimi hesaplanmadan önce karar verir. O anda görselin 300 piksellik bir kolona mı yoksa tüm genişliğe mi oturacağını bilmez.

En sık yapılan hata sizes yazmamak. O zaman varsayılan değer 100vw olur ve tarayıcı, görsel dar bir kolonda duracak olsa bile listedeki en büyük dosyayı indirir. Bir tek satırlık eksik yüzünden optimizasyonun tamamı boşa gider.

Mobilde gizlemek, indirmemek anlamına gelmiyor

"Küçük ekranda gereksiz görseli kaldırın" tavsiyesi doğru, ama kodda karşılığı genelde yanlış kuruluyor. Media query içine display: none yazmak görseli gözden kaldırır, dosyayı kaldırmaz: <img> etiketi HTML'de durduğu sürece tarayıcıların çoğu onu yine indirir. Kullanıcı hiç görmediği bir fotoğrafın verisini öder.

Gerçekten indirilmesini istemiyorsanız iki yol var. Görsel dekoratifse CSS'te arka plan olarak tanımlayın; eşleşmeyen bir media query'nin içindeki kural hiç uygulanmadığı için o dosya istenmez. İçerik görseliyse <picture> kullanıp <source media="..."> ile mobile küçük bir varyant verin. İkincisinde dosya yine iner, ama doğru olanı iner.

Görselin içine gömülmüş metin

Kampanya görsellerinde metin çoğu zaman fotoğrafın içine basılır. 1600 piksellik görsel 390 piksellik ekrana sığdığında ölçek 0,24'e iner; içindeki 48 piksellik başlık ekranda 12 piksel civarında görünür. Okunmaz, büyütülemez, ekran okuyucu tarafından da görülmez.

Metni HTML olarak görselin üstüne yerleştirin, fotoğraf sadece arka plan olsun. Böylece yazı boyutu her ekranda kendi kuralına göre davranır, alt sınırı 16 piksel tutabilirsiniz, kontrast için altına yarı saydam bir katman koymak da bir satırlık iş. Çeviri, arama ve seçilebilirlik de bedavaya gelir.

Aynı kırpım her oranda çalışmaz

Yatay çekilmiş bir fotoğrafı dar ve uzun bir alana sığdırdığınızda ya kenarlar gider ya da konu ortada minicik kalır. object-fit: cover ile birlikte object-position kullanmak çoğu durumda yeter: odak noktasını siz belirlersiniz, tarayıcı gerisini keser.

Ama kadrajın kendisi değişmek zorundaysa, örneğin masaüstünde üç kişinin göründüğü bir sahnede mobilde sadece ürünün kalması gerekiyorsa, bu bir CSS işi değildir. Ayrı kırpılmış dosya üretip <picture> ile ekran genişliğine göre sunun.

Hangi sırayla

1. Formatı değiştirin. WebP'ye geçmek aynı görselde çoğu zaman üçte bir ile yarı arası kazanç verir ve tek seferlik iştir. TinyPNG gibi araçlar toplu dönüştürme için yeterli.
2. Varyantları üretin, srcset ve sizes'ı birlikte yazın.
3. Mobilde gerçekten gereksiz olan görselleri ayıklayın ve bunu gizleyerek değil, hiç istemeyerek yapın.
4. loading="lazy" ekleyin, ama ilk ekranda görünen görsele değil. Oraya koyarsanız sayfanın en büyük ögesinin yüklenmesini kendi elinizle geciktirmiş olursunuz.