Img Srcset İle Tarayıcı Genişliğine Uygun Fotoğraf Çözünürlüğü
Img Srcset İle Tarayıcı Genişliğine Uygun Fotoğraf Çözünürlüğü
Web sayfalarımızda tarayıcı boyutuna uygun fotoğraf göstermek için srcset özelliği eklememiz gerekiyor. Bu Attribute (özellik) ile kullanıcı tarayıcısı mobil, tablet veya bilgisayar ekranı olaması durumunda en uygun çözünürlüklü fotoğrafı seçecektir.
Bu özellik ile örnek bir şekilde, telefon ile erişim sağlayan bir ziyaretçiye minimum 300 px ile 450 px çözünürlüklü bir fotoğrafı tarayıcı gösterecektir. Tek yapmanız örnekteki gibi srcset kısmına fotoğrafın kaynak yolu ve o fotoğrafın genişlik değerini yazmaktır.
Örnek;
< img alt="" src="image.png" srcset="
sm/image.png 350w, mid/image.png 500w, large/image.png 1000w " />
Örnekte de olduğu gibi olası tarayıcı genişliğini düşünerek 350 – 500 – 1000 px genişliğinde fotoğraf buyutlarımızın var olduğunu ve kaynak yolunu belirttik. Bu sayede kullanıcı tarayıcısı cihazın ekran çözünürlüğüne en uygun fotoğrafı seçecektir.
Unutmayın her halükarda src kısmını boş bırakmayın. src kısmına fotoğrafın orjinal boyutunu belirtmenizde fayda vardır.
