Web görselleri: Güzel görünmek, hızlı açılmak ve anlaşılır olmak

Bir fotoğrafın yüksek çözünürlüklü olması, web sitesinde her zaman o büyüklükte kullanılmasını gerektirmez. Buna karşılık dosyayı aşırı küçültmek de ürün dokusunu, plan yazılarını veya önemli ayrıntıları belirsizleştirebilir. Görsel hazırlığının amacı, en küçük dosyayı üretmek değil, kullanım yerine uygun kalite ve boyutu bulmaktır.

Önce görselin görevini belirleyin. Dekoratif arka plan, ürün fotoğrafı ve okunması gereken bir plan aynı yöntemle ele alınamaz. Hangi bilgi korunacaksa boyut ve kırpma kararları ona göre verilmelidir.

Piksel boyutuyla dosya ağırlığını ayırın

Piksel ölçüsü, görselin çözünürlüğünü; kilobayt veya megabayt cinsinden büyüklüğü ise aktarılacak veri miktarını anlatır. Aynı ölçüdeki iki görsel farklı dosya ağırlıklarına sahip olabilir. Dosya türü, sıkıştırma ve görüntünün ayrıntısı sonucu değiştirir.

Küçük bir kartta gösterilen fotoğraf için dev bir kaynak dosyasını her ziyaretçiye göndermek gereksiz olabilir. Uygun sürümler hazırlanarak ekranın ihtiyacına göre sunulabilir. Orijinal dosyayı ayrıca saklamak, gelecekte farklı kullanım gerektiğinde kalite kaybını önler.

Mobilde neyin kırpıldığını kontrol edin

Yatay bir proje fotoğrafının ortasından dar bir bölüm almak bazen yeterlidir. Fakat önemli bilgi kenardaysa veya görselde yazı bulunuyorsa aynı yöntem işe yaramaz. Daire planının açıklamaları, ürünün bağlantı noktaları veya kişinin yüzü kesilebilir.

Bu durumda görselin yerleşimi yeniden düşünülmeli ya da uygun bir alternatif hazırlanmalıdır. Telefonda yalnızca kartın dolu görünmesi yeterli değildir; ziyaretçi aynı bilgiyi anlayabilmelidir. Mobil kullanım kontrolünde görsellerin içeriği de incelenmelidir.

Alternatif metin görselin görevini anlatmalı

Alternatif metin, görseli göremeyen kullanıcı için içeriğin anlamını aktarır. Ürün fotoğrafında ayırt edici bilgi; bağlantı olarak kullanılan bir görselde ise bağlantının amacı önemli olabilir. Bütün görsellere aynı şirket tanıtımını veya anahtar kelime listesini yazmak yardımcı olmaz.

Örneğin belirli bir fanın tozlanmasını gösteren bakım fotoğrafında bu durum anlatılabilir. Görselde bulunmayan teknik sonuçlar veya ölçüm değerleri eklenmemelidir. Google'ın görsel rehberi, alternatif metnin bağlamla ilgili ve açıklayıcı olmasını önerir.

Yalnızca süsleme amacı taşıyan görseller farklı ele alınabilir. W3C, uygun dekoratif görseller için boş alternatif metin kullanımını açıklar. Karar, dosyanın kendisinden çok sayfadaki işlevine bağlıdır. Dekoratif görseller rehberi bu ayrımı örnekler.

Yükleme davranışı düzeni bozmamalı

Görsel yüklenirken kaplayacağı alanın önceden belirlenmesi, metin ve düğmelerin beklenmedik biçimde yer değiştirmesini azaltmaya yardımcı olur. Yerleşim kaymalarını azaltma rehberi boyut tanımlamanın bu etkisini açıklar. Ekranın aşağısındaki görsellerin yüklenmesi ertelenebilir; ilk görünümde gerekli büyük görsele aynı işlemi gelişigüzel uygulamak doğru olmayabilir. Görsel yükleme rehberi bu ayrımı ele alır.

Hazırlığı gerçek sayfada kontrol edin. Fotoğraf tek başına iyi görünürken koyu arka planda ayrıntıları kaybolabilir. Sıkıştırılmış sürüm küçük ekranda yeterliyken büyütülünce yazılar okunmayabilir. İçerik hazırlama sürecinde dosyanın adı, ait olduğu kayıt ve kullanım hakkı da birlikte tutulmalıdır. İyi görsel yönetimi, tasarımın yanında bilginin doğruluğunu ve kullanılabilirliğini de korur.