Web Sitesinde Görsel: Bilgi Taşıyan mı, Dolgu mu?
Sayfaya konan her görselin bir maliyeti var: indirilecek bayt, kaydırılacak alan, okuyucunun ayıracağı yarım saniye. Bu maliyeti hak eden görsel, metnin söylediğini tekrarlamayan, kendi başına bilgi taşıyan görseldir. Geri kalanı sayfayı güzelleştirmez, uzatır.
Dolgu görsel neye benzer
Toplantı masasında gülüşen stok insanlar, klavyeye uzanmış eller, soyut mavi bağlantı ağları. Bu görsellerin ortak özelliği, altındaki metni okumadan hiçbir şey söylememeleri. Kullanıcı bunları çoğu zaman görmez bile; sayfayı tararken göz, metinle ilişkisi kurulamayan blokları atlar. Göz izleme çalışmalarının yıllardır tekrarlanan bulgusu da bu yönde: gerçek ürün ve gerçek insan fotoğrafları incelenir, dekoratif olanlar atlanır.
Kurumsal sitede ekip fotoğrafı işe yarar, ama gerçekten o ekibin fotoğrafıysa. Stok portre koymak hiç fotoğraf koymamaktan kötüdür, çünkü ziyaretçi stok görseli tanır ve sayfadaki diğer iddialara da aynı gözle bakmaya başlar.
Bilgi taşıyan görselin ölçüsü
Basit bir test var: görseli kaldırın, sayfa bir şey kaybediyor mu? Ürünün arka yüzünü gösteren fotoğraf, kurulum adımlarının ekran görüntüsü, iki seçeneği yan yana koyan karşılaştırma tablosu. Bunlar kaldırıldığında okuyucu bilgi kaybeder. Ofis fotoğrafı kaldırıldığında sayfa sadece kısalır.
E-ticarette ölçü daha da nettir. Kullanıcı kumaşın dokusunu, ayakkabının tabanını, kutudan ne çıktığını arar. Bu soruların cevabı yoksa fotoğraf sayısını artırmak hiçbir şeyi değiştirmez.
Alt metin erişilebilirlik meselesidir, SEO yan üründür
Alt metni önce arama motoru için yazmayı öğütleyen kılavuzlar yaygın, sıralaması yanlış. Alt metnin birinci işi, ekran okuyucu kullanan birine görselin taşıdığı bilgiyi aktarmaktır. Anahtar kelime doldurulmuş alt metin bu işi bozar; sesli okunduğunda cümle değil liste duyulur.
İki kural yeterli. Dekoratif görselin alt metni boş kalsın (alt=""), böylece ekran okuyucu onu atlar. Bilgi taşıyan görselinki de görselin söylediğini yazsın, dosya adını değil. Bunu kılavuzla değil, alanı zorunlu yaparak çözersiniz: CMS'te alt metin boş geçilemiyorsa üç ay sonra arşivin tamamı düzelir, kılavuz yazarsanız düzelmez. Dosya adına anahtar kelime koymak zararsız ama alt metnin yanında ikincil bir ayrıntı.
Yüksek çözünürlük ile hız aynı dosyada durmaz
Kılavuzlar iki şeyi yan yana söyler: kaliteli ve yüksek çözünürlüklü görsel kullanın, sayfa hızını da koruyun. Tek bir dosyayla ikisi birden olmaz. 2000 piksel genişliğindeki bir görseli 360 piksellik telefon ekranına göndermek, indirilen pikselin yüzde 96'sından fazlasını çöpe atmak demektir; ekranın kullandığı alan oranı 360²/2000², yani yüzde 3 civarı.
Doğrusu aynı görselin birkaç boyutta üretilmesi ve cihazın kendine uygun olanı seçmesi. srcset tam bunun için var, ayrıca bir araç kurmanız gerekmez; WebP ya da AVIF sürümünü de aynı yerde tanımlarsınız.
Büyük görseli kullanıcı isteyince verin
Detay isteyen kullanıcı azınlıktadır, ama isteyince gerçekten ister. Bu yüzden büyük sürümü sayfaya gömmek yerine talep üzerine açmak doğru karardır. Asıl soru, açma davranışının nasıl kurulduğu.
Bir e-ticaret projesinde ürün görsellerinin büyütülmesini modaldan alıp ayrı bir sayfaya taşımıştık; mobilde tarayıcının kendi çift dokunuş yakınlaştırması zaten çalışıyordu ve modal onu bozuyordu.
Masaüstünde modal ya da yakınlaştırma penceresi sorun çıkarmaz. Mobilde eklediğiniz her katman, tarayıcının hazır jestleriyle çakışma riski taşır. Kendi yakınlaştırmanızı yazmadan önce cihazınkinin yetip yetmediğine bakın, çoğu üründe yetiyor.