SEO İçin Resimlerde SRCSET Kullanımı ve Avantajları

Kasım 01, 2016 | Seo, Web Tasarım

srcset kullanımı

SRCSET Nedir? SEO ya Faydası Nelerdir? Nasıl Kullanır?

Html de IMG elementi ile kullanılan yeni bir özellik geldi. SRCSET,  sitelerin mobil uyumluluğu ve optimizasyonu için kullanılan özellik ile mobil sitelerdeki resimlerin farklı boyutlardaki örnekleri giriş yapılan cihazların ekran çözünürlüklerine göre gösteriliyor ve maksimum derecede en uygun resim ile site hızında önemli bir iyileştirme sağlıyor, üstelik bunu yapmak için javascript yada JQuery gibi özel kod kullanımına gerek kalmıyor. Bu özellik sadece site hızı değil sunucu bandwith kullanımında son derece tasarruf sağlıyor.

SRCSET ile mobil sitelerinizde gereksiz yere büyük resimler yerine daha küçük resimleri çağırarak sayfalarınız daha hızlı yüklenmesini sağlayabilirsiniz. Ve SEO için, hızlı yüklenen mobil sitelerin faydasını anlatmaya gerek yok sanırım. Ayrıca kullanıcı deneyimi açısından mobil sitelerin hızlı olması çok çok önemli, hatırlayın akıllı telefonunuzdan giriş yaptığınız bir sitenin yüklenmesine kaç saniye dayanıyorsunuz?

Peki SRCSET Nasıl Kullanılıyor?

SRCSET özelliği IMG elementi ile kullanılıyor. Öncelikle normal bir resim kullandığımız html koduna bakalım.

< img src="/images/deneme.jpg" alt="deneme" />

şimdi bu kodla çağırılan bir resim 1000px X 1000px boyutunda diyelim, masaüstünde bu boyutla gösteriliyor ve 900KB boyutu mevcut,  mobil cihazlarda max-widht:100% kodu ile bu resmi mobil cihazların ekran genişliğine göre küçültüp büyütebiliyoruz tasarım olarak resim sorunsuz görüntüleniyor ancak mobil cihazın ekran genişliği 360px ve resim yine 1000px X 1000px orjinal boyutunda çağrılıyor ve ekran genişliğine göre küçülüyor yani gereksiz yere büyük resim çağırıyoruz ve bunun sadece 1/3 oranında ki küçük boyutunu kullanıyoruz ama aynı 900KB boyutunun yüklenmesini bekliyoruz. Resmin küçük halinin boyutu oysa 300KB yani 3 katı zaman kaybına sebeb oluyor.

SRCSET özelliği ile bu örnekte orjinal resmimizi 360px, 480px, 760px ve 1000px ekran genişlikleri için nasıl yeniden boyutlandıracağımızı göreceğiz.

Öncelikle bu 5 farklı çözünürlük için orjinal resmi yeniden boyutlandırıyoruz ve 5 farklı boyutta resmimiz oluyor ve aşağıda ki html kodu ile her birini farklı ekran boyutlarında gösterilmesini sağlıyoruz.

< img src="/images/deneme.jpg" srcset="/deneme-360.jpg 360w, /deneme-480.jpg 480w, /deneme-760.jpg 760w, /deneme-1000.jpg 1000w" alt="deneme" />

evet, tüm işlem bu..

Siteniz ne kadar hızlı ise kullanıcı deneyimi, hemen çıkma oranı, sayfa görüntüleme oranı gibi bir çok seo kriteri aynı anda optimize olacaktır. Bu yüzden site hızı seo için o kadar önemli ve bende son birkaç yazıda bu konu üzerine yazıyorum ve yazmaya devam edeceğim, takipte kalmanız dileğiyle…