Mümkün olan en yüksek görüntü kalitesine sahip olmak, bugünlerde web siteleri için çok önemlidir. Rehberimiz size bunu başarmanın bir yolunu gösteriyor.
Duyarlı görüntü, farklı cihaz özelliklerine uyum sağlayan bir görüntüdür. Doğru yapıldığında, duyarlı görüntüler bir sitenin performansını ve kullanıcı deneyimini iyileştirebilir.
Bu makale, srcset ve resim öğesini kullanarak HTML'de nasıl uyumlu görüntüler oluşturabileceğinizi araştırıyor .
Neden Duyarlı Görseller Kullanmalısınız?
Yazılım mühendisleri web'i yaratırken, tarayıcıların duyarlı görüntüleri nasıl ele alacağını düşünmediler. Sonuçta, kullanıcılar web'e yalnızca masaüstü veya dizüstü bilgisayarlardan erişiyordu. Tabii ki, bu bugün için doğru değil.
Statista'ya göre , küresel internet nüfusunun yüzde 90'ından fazlası cep telefonlarını kullanarak çevrimiçi oluyor. İnternetteki web sayfalarının çoğu görsel içerir ve bu görseller web performansını ölçmek için kullanılan metriklerden biridir. Performansı artırmak için, resimlerinizi duyarlı hale getirerek optimize etmeniz gerekir.
HTML'de Duyarlı Görüntüler Nasıl Oluşturulur
Duyarlı görüntülere iki açıdan yaklaşabilirsiniz; aynı görüntüyü farklı boyutlarda sunarak veya görüntüleme özelliklerine göre farklı görüntüler sunarak. <picture> veya <srcset> kullanabilirsiniz . Bu iki seçenek, duyarlı görüntüleri farklı şekilde ele alır, ancak tümü, belirlenen kurallara bağlı olarak verilen alternatiflerden bir görüntü görüntüler.
srcset'i kullanma
Standart <img> HTML, yalnızca bir görüntü dosyası belirlemenize izin verir. Cihazın boyutuna göre farklı bir resim göstermek istiyorsanız srcset kullanmalısınız .
sözdizimi :
<img srcset="" src="" alt="">srcset , ek kaynak dosyaları sağlamanıza izin verir ve tarayıcı, bu görüntü boyutu için en uygun görünen görüntüyü seçer.
<img srcset="cute-cat.jpg 480w,srcset üç bölümden oluşur: Kaynak görüntünün yolunu, bir boşluğu ve görüntünün içsel veya gerçek genişliğini belirten görüntü dosya adı.
cute-cat.jpg 800w"
src="cute-cat.jpg"
alt="A cute cat">
srcset ile boyutları kullanma
srcset'i kullanmanın sorunu , tarayıcının hangi resmi göstereceğini kontrol edememenizdir. srcset'i boyutlarla birleştirmek bu sorunu çözer. boyutlar , görüntüye optimum boyutta ipucu veren bir dizi ortam koşulunu tanımlar.
Artık yukarıdaki <img> etiketini aşağıdaki gibi yeniden yazabilirsiniz.
<img srcset="cute-cat.jpg 480w,boyutları bir ortam koşulundan oluşur, bu örnekte (maks-genişlik: 600 piksel), ortam koşulu doğruysa görüntünün dolduracağı alanı belirten görünüm alanı genişliğini, boşluğu ve yuva genişliğini (480 piksel) temsil eder.
cute-cat.jpg 800w"
sizes="(max-width: 600px) 480px,
800px"
src="cute-cat.jpg"
alt="A cute cat">
Burada tarayıcı önce cihaz genişliğini kontrol edecek ve medya durumuyla karşılaştıracaktır. Koşul doğruysa, yuva genişliğini kontrol edecek ve aynı genişlikte veya bir sonraki daha büyük olan srcset'ten bir görüntü yükleyecektir.
Ayrıca, görüntünün srcset ve boyutları desteklemeyen tarayıcılara geri dönmesini sağlayan src'yi de dahil ettiğinizi unutmayın .
srcset ayrıca x-tanımlayıcıları kullanarak görüntüleri farklı çözünürlüklerde sunmanıza olanak tanır.
<img srcset="cute-cat-high.jpg,
cute-cat-high1.jpg 1.5x,
cute-cat-high2.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">
Bu örnekte, cihazın CSS başına iki cihaz pikseli veya daha fazla çözünürlüğü varsa, tarayıcı cute-cat-high1.jpg görüntüsünü yükler.
Donanım ve Yazılım Pikselleri
Bu çözümdeki sorun, görüntülerin yalnızca cihazın piksel yoğunluğu açısından duyarlı olmasıdır. Bu, donanım piksellerinin yazılım veya CSS piksellerine oranıdır. Yazılım pikseli veya CSS pikseli bir ölçüm birimi iken, donanım pikseli ekrandaki gerçek ışık noktasıdır. Piksel yoğunluğu, cihazın çözünürlüğünü belirler.
Duyarlı görüntüler oluştururken yalnızca çözünürlüğü dikkate almayın; ekran boyutu da önemlidir. Aksi takdirde, gereksiz yere büyük resimler veya çok pikselli resimler yükleyebilirsiniz.
<img srcset="cute-cat-high1-480w.jpg 1.5x,<resim> kullanma
cute-cat-high2-640w.jpg 2x"
src="cute-cat-low.jpg"
alt="A cute cat">
<picture> , farklı kaynak dosyaları ve bir <img> öğesi içeren birkaç <source> öğesini saran bir HTML öğesidir. <img srcset=""size="" alt=""> aynı görüntünün farklı boyutlarını sunarak görüntüleri duyarlı hale getirirken, <picture> görüntülenen görüntüyü gerçekten değiştirmenize olanak tanır .
Sözdizimi:
<picture>Büyük bir manzara resminizin olduğu bir durumu düşünün. Görüntü, masaüstünde görüntülenir ve orantılı görünür, ancak mobilde önemli ölçüde küçülür, böylece görüntüdeki öğeler küçülür. Yanıt vermeyen görüntü, kötü bir kullanıcı deneyimine katkıda bulunur. <picture> ile, tarayıcınıza mobildeyken yakın plan portre görüntüsüne geçmesini söyleyebilirsiniz.
<source media="" srcset="">
<source media="" srcset="">
<img src="" alt="">
</picture>
<picture>İlk yaklaşımda olduğu gibi, <source> , medya koşulunu sağlamak için kullanabileceğiniz bir medya özniteliği içerir. Örneğin, görüntü alanı genişliği 639 piksel veya daha azsa tarayıcı "cute-cat-480w.jpg" dosyasını görüntüler. srcset , görüntülemek istediğiniz görüntü dosyası yolunu tutar ve src , varsayılan görüntüyü belirtir.
<source media="(max-width: 639px)" srcset="cute-cat-480w.jpg">
<source media="(min-width: 640px)" srcset="cute-cat-640w.jpg">
<img src="elva-640w.jpg" alt="A cute cat">
</picture>
WebP Görüntü Formatı için Geri Dönüş
<picture> öğesinin iyi bir şekilde ele aldığı başka bir şey, WebP gibi modern görüntü formatları için bir geri dönüş sağlamaktır. WebP görüntüleri yüksek performansa sahiptir, küçüktür ve hızlı bir web deneyimi sunar. Bu nedenle, bunları sitelerinizde kullanmaya karar verebilirsiniz. Karşılaşabileceğiniz bir zorluk, tüm tarayıcıların WebP görüntülerini desteklememesidir. <picture> ile tarayıcınız WebP'yi desteklemiyorsa alternatif bir resim yükleyebileceğinden bu sorunu yaşamazsınız.
<picture>Neden CSS'de Değil, HTML'de Duyarlı Görüntüler Oluşturun?
<source type="image/webp" srcset="cute-cat.webp">
<img src="cute-cat.jpg" alt="A cute cat.">
</picture>
CSS, duyarlı görüntüleri işlemek için sağlam seçenekler sunar. Öyleyse neden kullanmıyorsun? Tarayıcı, CSS'yi ayrıştırmadan önce görüntüleri önceden yükler. Bu nedenle, sitenizin JavaScript'i resimlerde uygun değişiklikleri yapmak için görünüm alanı genişliğini algılamadan önce, orijinal resimler zaten önceden yüklenmiştir. Bu nedenle, duyarlı görüntüleri HTML kullanarak işlemek daha iyidir.
Mümkün olan En İyi Görüntü Kalitesini Hedefleyin
Bu makalede, <picture > ve <srcset> kullanarak HTML'de nasıl duyarlı görüntüler oluşturabileceğinizi gördünüz . Duyarlı görüntüler sunmak, genellikle görüntü boyutu ve görüntü çözünürlüğünün görüntü boyutuyla ilgili olarak dikkate alınmasını içerir. Yanlış yapılırsa, görüntü kalitesi düşebilir. En az kaynak kullanarak optimum kullanılabilirlik sağlayan bir resim seçtiğinizden emin olun.
