Bir görsel problemi üç farklı biçimde ortaya çıkabilir: dosya hiç açılmaz, çok geç gelir veya yanlış kırpıldığı için anlamını kaybeder. Bunların çözümü aynı değildir. Yeni bir fotoğraf yüklemeden önce sorunun kaynağını bulun. Dış bağlantı silinmiş olabilir, görüntü dönüştürme servisi hata verebilir veya kartın oranı fotoğraftaki önemli ayrıntıyı kesiyor olabilir. Önce dosya adresini, sonra sayfadaki davranışı test edin.
Kaynağı kontrol edebildiğiniz bir düzen kurun
Rastgele bir dış bağlantıya bağlı kapak, o sağlayıcı değiştiğinde bozulabilir. Kullanım hakkı bulunan görselleri yönetebildiğiniz bir depoda tutmak bakım işini kolaylaştırır. Dosyanın sahibi, kullanım izni, açıklaması ve hangi sayfalarda kullanıldığı kayıtlı olsun. Kaynak adresi değişirse yalnızca bir yerde güncellenebilen içerik modeli tercih edin. Bu düzen özellikle onlarca hizmet ve blog kapağı olan sitelerde yararlıdır.
Görüntünün ekrandaki görevine göre dosya üretin
Tam ekran kapak ile küçük blog kartının aynı çözünürlükte dosya indirmesi gerekmeyebilir. Kullanılan bileşenin farklı ekran genişliklerine uygun kaynaklar sunmasını sağlayın. Görüntü formatını seçerken fotoğraf, düz renkli çizim ve şeffaf logo arasındaki farkı dikkate alın. Dosya küçük olsun diye okunması gereken ürün etiketini yok etmeyin; kalite kararını gerçek kullanım boyutunda verin.
Örnek olarak bir hukuk ofisi kartında masa ve kitaplık görünmesi yeterli olabilir; bir ürün detayında ise bağlantı soketinin biçimi önemlidir. İki görsele aynı sıkıştırma ayarını körlemesine uygulamak doğru sonuç vermeyebilir. Önce görselin cevapladığı kullanıcı sorusunu yazın. Sonra dosya boyutunu azaltırken bu cevabın hâlâ görünür olup olmadığını kontrol edin.
Yüklenmeden önce yer ayırın
Görselin oranı veya boyutları belli olduğunda tarayıcı sayfada uygun alanı ayırabilir. Aksi halde metin ve düğmeler yükleme sırasında yer değiştirebilir. İlk ekrandaki önemli görselle aşağıdaki galeriye aynı yükleme önceliğini vermeyin. Ekranın altında kalan çok sayıda fotoğrafın başlangıçta indirilmesi, ziyaretçinin hemen görmek istediği içerikle kaynak yarışına neden olabilir.
Yedek görseli gerçek çözümün yerine koymayın
Yedek görsel boş bir kutudan daha iyi olabilir; fakat ürün fotoğrafının yerine ilgisiz dekorasyon koymak yanıltıcıdır. Hata durumunda uygun bir yer tutucu ve gerekirse açıklama gösterin. Aynı başarısız adresi sonsuz kez yeniden denemeyin. Yönetim tarafında kırık kaynakların raporlanması gerekir; yoksa her ziyaretçi sorunu yaşarken ekip düzgün bir yedek görüntü gördüğünü sanabilir.
Görsel kabul listesi hazırlayın
- Kaynak dosya ve dönüştürülmüş çıktı ayrı ayrı açılıyor mu?
- Telefon ve masaüstü kırpmasında önemli nesne korunuyor mu?
- Kapak, galeri ve yakınlaştırma aynı ürünü mü gösteriyor?
- Alt metin gerçekten görünen içeriği açıklıyor mu?
- Boş bağlantı ve erişilemeyen kaynak kontrollü davranıyor mu?
Kontrolü yalnızca hızlı ofis bağlantısında yapmayın. Yavaş bağlantı simülasyonunda ilk ekrana bakın ve görseller gelirken düzenin değişip değişmediğini izleyin. Aynı sayfayı ikinci kez açmak önbellekten dolayı sorunu gizleyebilir; ilk ziyaret ile tekrar ziyareti ayırın. Dosya büyüklüğü, yükleme zamanı ve görsel doğruluğunu birlikte değerlendirmek, yalnızca tek bir hız puanına bakmaktan daha açıklayıcıdır.
Teknik uygulama için web.dev görsel performansı rehberi, içerik tarafı için ürün sayfası rehberimiz yardımcı olur. Web tasarım çalışmalarında görsel kaynağı ve bakım sorumluluğunu teslim kapsamına ekleyin.