Resimler

Bu test, internet sitesindeki görsellerin en modern uygulamalarla oluşturulup oluşturulmadığını kontrol eder. Aynı zamanda görsellerin ağ formatına uygun olup olmadığına da bakarız.

Bunu neden test ediyoruz?

İnternet sitesi hazırlayanlar genellikle görselleri kötü bir şekilde yerleştirerek ziyaretçiler için erişilebilirlik sorunlarına neden olur ve sayfa yüklenme süresinin uzamasına neden olurlar.

Her resim etiketinde genişlik ve yükseklik özellikleri bulunması önemlidir. Genişlik ve yükseklik özellikleri olmadan biçimlendirme mümkündür, ancak onları kullanmak daha iyidir. Bu özellikler olmadığında, ziyaretçinin tarayıcısı görseli indirmeden, görsel için ne kadar alan ayırması gerektiğini bilemez. Bu durumda, resim yüklendikten sonra ziyaretçinin tarayıcısı tarafından yeniden işlenmesi gerekir ve sayfanın yüklenme süresi uzar. Ayrıca, kullanıcının internet bağlantı hızı düşük ise sayfada atlamalar olabilir. Bu özellikleri kullanarak görselleri esnetmemek de önemlidir, resmin asıl boyutları ile aynı olmaları gerekir. Aksi takdirde sayfanın yüklenme süresi uzayabilir.

Bunu nasıl test ediyoruz?

İnternet sitesindeki tüm resimleri indirip, farklı kriterlere göre puan veririz:

• Is it a non web-friendly format? Only webp, avif, jpeg, png, svg and gif images are allowed.
• Genişlik ve yükseklik özellikleri eksik mi? Görselin genişlik ve yükseklik özellikleri yoksayıldığında böyle olur.
• Tarayıcıda esnemiş mi görünüyor? Bu, kaynak görselinizin boyutları, HTML'de belirtilen genişlik ve yükseklik özelliklerinden farklı olduğunda görülür. Bir resmi tarayıcıda esnetmek istiyorsanız, CSS kullanmalısınız. Çünkü etiket kaynak görselin nasıl görüneceğini değil, nasıl olduğunu tanımlar.

Bu konuda ne yapabilirim?

Kullandığınız tüm görsellerin jpeg, gif veya png gibi ağ dostu formatlarda olduğundan emin olun. Ayrıca tüm resimler için genişlik ve yükseklik özelliklerini, kaynak görselin boyutları ile aynı olacak şekilde belirlemeniz gerekir. Resmi tarayıcıda esnetmeniz gerekiyorsa CSS kullanın. HTML içindeki etiket kaynak resmi, CSS ise onun nasıl görüntüleneceğini tanımlar.