HTML5 Picture Elementi ile Sayfa Açılış Hızını Arttırın

Duyarlı web tasarımları günümüzde oldukça yaygın olarak kullanılmaktadır. Tüm tasarımcılar artık tasarımlarını tüm ekran boyutlarına göre kendini düzenleyen duyarlı (responsive) tasarımlar olarak geliştirmektedir. Archive.org'ye göre bir web sayfasının ortalama %62'sini resimler oluşturmaktadır. Duyarlı tasarımlar sayesinde ve HTML5 ile gelen yenilikler ile web sayfalarını oluşturan resimlerin sayfa açılış hızını düşürmemesi sağlanmaya çalışılmaktadır. Sayfa açılış hızını yüksek tutabilmek için HTML5 resim elementini kullanmak faydalı olacaktır.

Neden Yeni Bir Elemente İhtiyaç Var?

Teknolojinin gelişmesi ile akıllı telefonlar ve tabletlerin hayatımıza girmesi sonucunda duyarlı web tasarımlarına ihtiyaç duyuldu. Duyarlı web tasarımları farklı ekran boyutlarına göre kendilerini düzenlemeleri ile telefon ekranları gibi küçük ekranlarda sorunsuz görüntülenebilen tasarımlar ortaya çıkmasına ve bu gibi sorunların ortadan kalkmasına yardımcı oldu.

Fakat duyarlı web tasarımları bir çok sorunun ortadan kalkmasına ve tasarımcıların işlerini kolaylaştırmasına rağmen tüm sorunlara cevap olamaz. Web sitelerinin büyük çoğunluğunu oluşturan görseller duyarlı tasarımların çözüm sunamadığı bir noktadır. Tamda bu noktada HTML5 ile tasarımcıların hayatına giren yeni etiketler devreye girmektedir. Bu etiketlerden bir tanesi de <picture> etiketidir.

< Picture > Elementi

Mobil cihazlarda web sitesinin açılış hızını etkileyen bir etken olarak resimlerin duyarlılığı göze çarpmaktadır. Mobil cihazlar için düşünüldüğünde resmin tam boyutlu bir ekran görüntüsü ile mobil görüntüsünün boyutları aynı olmayacağından resimlerin ekran boyutlarına göre duyarlı hale gelmesi gerekmektedir. Bu sayede tüm ekran boyutlarında web sitesinin açılış hızı düşmüş olacaktır.

< picture > etiketinin kullanımını basitçe şu şekilde bir kod yapısı ile anlayabiliriz.

<picture>
     <source srcset="small.jpg 1x, small-hd.jpg 2x">
     <source media="(min-width: 480px)" srcset="medium.jpg 1x, medium-hd.jpg 2x">
     <source media="(min-width: 1024px)" srcset="large.jpg 1x, large-hd.jpg 2x.jpg">
     <img src="fallback.png" alt="Açıklama">
</picture>

Henüz tam olarak tüm tarayıcılar < picture > etiketi için hazır olmasalar da ilerleyen günlerde hazır olacaklardır. 2014 yılı sonuna doğru Firefox ve Chrome gibi tarayıcıların < picture > etiketi için uyumlu hale gelmiş olmaları beklenmektedir.

HTML5 picture etiketinin kullanımı ile web sitesi içerisinde barındırılan resimlerin biçimlendirilmesi ile özellikle mobil cihazlar da olmak üzere web sitesinin açılış hızı arttırılmış olacaktır. Bu sayede kullanıcılarınıza daha hızlı ve güzel bir deneyim yaşatabilirsiniz.