Görsel formatları: AVIF ve WebP.
AVIF ve WebP, aynı görsel kaliteyi JPEG ve PNG'ye göre belirgin biçimde küçük dosyalarda veren modern görsel formatlarıdır.
Çoğu sitede toplam sayfa ağırlığının en büyük payını görseller alır ve o payın büyük kısmı gereksizdir. Format seçimi tek başına dosya boyutunu yarıya indirebiliyor — üstelik görsel kalitesinden ödün vermeden ve hiçbir tasarım değişikliği gerektirmeden.
İki format da yaygın tarayıcı desteğine sahip ve ikisi de kayıplı sıkıştırma sunuyor. AVIF genelde daha küçük dosya üretir ama kodlaması daha yavaştır; WebP biraz daha büyük ama daha hızlı üretilir ve daha eski tarayıcılarda da çalışır.
Yedekli sunum
Doğru yaklaşım tek bir format seçmek değil, tarayıcıya seçenekleri sunup en iyisini almasını sağlamaktır. Bir görsel öğesi birden fazla kaynak bildirebilir ve tarayıcı desteklediği ilk formatı indirir; desteklemediklerini hiç istemez.
Sıra önemlidir: en küçük ve en yeni format en üstte, en yaygın desteklenen en altta. Böylece modern tarayıcı en küçük dosyayı alır, eski tarayıcı çalışan bir dosya alır ve hiçbiri gereksiz indirme yapmaz.
Bu sitede vitrin görselleri tam olarak böyle sunuluyor: her proje için üç genişlik ve iki format üretiliyor. Doğrulama süiti en büyük genişlikteki üç AVIF dosyasının toplamının 200 kilobaytı geçmediğini her koşumda ölçüyor — format seçimi bir tercih değil, teste bağlı bir bütçe.
Duyarlı boyut
Format kadar önemli ikinci karar boyuttur: telefona masaüstü görseli göndermek, en yaygın israftır ve mobil kullanıcıların bant genişliğini doğrudan yakar. Bir görsel öğesi farklı genişlikler için farklı dosyalar bildirebilir ve tarayıcı ekran boyutuna ve piksel yoğunluğuna göre uygun olanı seçer.
Seçimin doğru yapılması için tarayıcıya görselin düzendeki boyutunu söylemek gerekiyor — çünkü tarayıcı bunu CSS'i indirmeden bilemez ve görseli erkenden istemek ister. Bu bilgi verilmediğinde tarayıcı en kötü durumu varsayar ve gereğinden büyük dosya indirir.
- Kaç genişlik üretmeli — genelde üç yeterli: mobil, tablet, masaüstü.
- Hangi genişlikler — düzenin gerçek kırılım noktalarından türetilmeli, yuvarlak sayılardan değil.
- Piksel yoğunluğu — yüksek yoğunluklu ekranlar için ek genişlikler; ama sınırsız değil.
- Boyut bildirimi — görselin düzende kaç piksel yer kaplayacağı tarayıcıya söylenmeli.
- Genişlik ve yükseklik — dosya seçiminden bağımsız olarak, düzen kayması için her zaman yazılmalı.
Sıkıştırma kalitesi
Kayıplı formatlarda kalite ayarı bir eğri üzerinde çalışır ve eğrinin belirli bir noktasından sonra dosya büyür ama görünür kalite artmaz. O noktayı bulmak göz kararıyla değil karşılaştırmayla yapılır: aynı görsel farklı kalite ayarlarıyla üretilir, yan yana konur ve farkın görünür olduğu son nokta seçilir.
Fotoğraflar ve grafikler farklı davranır. Fotoğraf, kayıplı sıkıştırmayı iyi tolere eder çünkü zaten sürekli ton geçişleri taşır. Keskin kenarlı grafikler ve metin içeren görseller ise düşük kalite ayarında görünür biçimde bozulur — onlarda kayıpsız format ya da vektör tercih edilmelidir.
Metin içeren bir görsel, formatı ne olursa olsun yanlış bir karardır — metin metin olarak yazılmalıdır.
Son maddedeki kural performansın ötesine geçiyor: görsele gömülmüş metin ne ekran okuyucu tarafından okunur, ne arama motoru tarafından dizinlenir, ne de kullanıcı tarafından büyütülebilir. Format tartışmasından önce sorulacak soru, o görselde metin olup olmadığıdır.
Üretim otomatikleştirilmeli
Üç genişlik ve iki format demek, her görsel için altı dosya demek. Bunu elle üretmek sürdürülemez: bir görsel eklemek altı adım gerektirir ve adımlardan biri unutulduğunda kusur sessizce yayına çıkar. Kalıcı çözüm, türevleri bir araçla üretmektir.
Bu sitede vitrin görselleri bir üretim betiğiyle çıkıyor: kaynak görsel bir kez konuyor, betik üç genişlik ve iki format üretiyor ve boyutları raporluyor. Yeni bir proje eklendiğinde tek yapılacak şey betiği koşturmak.
Otomatikleştirmenin ikinci faydası ölçüm: araç kendi çıktısını tartabiliyor ve bütçe aşıldığında uyarabiliyor. Elle üretimde bu kontrol insan dikkatine kalır ve insan dikkati, üçüncü görselden sonra dağılır.
Ve bir bakım notu: kaynak görsel her zaman saklanmalıdır. Türevden türev üretmek kalite kaybını biriktirir; kaynak duruyorsa format değiştiğinde ya da yeni bir genişlik gerektiğinde her şey baştan ve kayıpsız üretilebilir.
Vektör ve ikon
Bazı görseller için doğru cevap hiçbir kayıplı format değil: logolar, ikonlar, diyagramlar ve keskin kenarlı grafikler vektör olarak sunulmalıdır. Vektör dosyalar boyuttan bağımsızdır — aynı dosya hem küçük bir ikon hem büyük bir baskı olarak kullanılabilir — ve genelde kayıplı bir karşılığından küçüktür.
Vektörün ikinci avantajı stillenebilir olmasıdır: rengi CSS ile değiştirilebilir, karanlık temaya uyum sağlayabilir ve animasyonlanabilir. Bir ikon kümesini görsel dosyalar olarak sunmak, bu esnekliği baştan kaybetmek demektir.
Bir uyarı: vektör dosyalar tasarım araçlarından çıktığında genelde gereksiz meta veri ve fazlalık taşır. Bir temizleme adımı dosya boyutunu belirgin biçimde düşürüyor ve bu adım otomatikleştirilebiliyor.
Bu sitede ikon ailesi ve monogram bu mantıkla kurulu; favicon üretimi bir araca bağlı ve gerçek glif için tarayıcı canvas'ı kullanılıyor — böylece glif her makinede aynı çıkıyor. Tasarım tutarlılığı bir üretim kararına bağlanmış durumda.
Ve bir bakım hatırlatması: format desteği zamanla genişliyor. Bugün yedekli sunum gerektiren bir format, birkaç yıl içinde tek başına yeterli hâle gelebilir ve o noktada yedek dosyalar gereksiz yük olur. Üretim zinciri hangi formatların üretileceğini tek bir yerden okuyorsa, bu geçiş tek satırlık bir değişiklik olur; her sayfaya elle yazılmış yedek listeleri ise tek tek temizlenmek zorunda kalır.
Son bir ölçüm alışkanlığı: her görsel türevi üretildikten sonra boyutu raporlanmalı ve bir bütçeye bağlanmalı. Bu sitede vitrin görselleri için bütçe en büyük genişlikteki üç dosyanın toplamı üzerinden tanımlı ve doğrulama süiti her koşumda ölçüyor. Bir görsel yenilendiğinde ve yanlışlıkla sıkıştırılmadan geldiğinde, kusur dağıtım anında görünüyor — bir sonraki denetimde değil.