Cara Mempercepat Loading Blog Dengan Elemen HTML5 Picture

Menurut Archive.org, sekitar 62% yang menyebabkan halaman blog lelet adalah gambar, ini menunjukkan bahwa perlu cara yang lebih baik dari aturan CSS untuk membuat gambar yang responsif terhadap sejumlah jenis layar dan ukuran. Dan cara tersebut yaitu menggunakan Elemen HTML5 Picture.


MENGAPA PERLU ELEMEN BARU ?

Anda mungkin telah menerapkan desain web responsif, dan anda berpikir bahwa ini sudah menyelesaikan semua masalah. Dan memang benar bahwa desain web responsif memecahkan beberapa masalah. Secara otomatis mengatur dan menampilkan elemen blog anda untuk dilihat pada layar ponsel yang kecil.

Tapi desain web responsif bukanlah jawaban untuk semuanya. Itu tidak selalu memecahkan masalah gambar.

<Picture> ELEMEN

Menurut spesifikasi, Elemen gambar ini dimaksudkan untuk memberikan penulis cara untuk mengontrol sumber daya pengguna yang menyajikan gambar kepada pengguna, berdasarkan permintaan media dan dukungan untuk format gambar tertentu. Ini harus digunakan ketika desain responsif menentukan gambar yang agak berbeda pada beberapa jenis layar. 

<Picture> Element adalah tentang gambar yang responsif, bukan desain responsif. Tapi ketika melihat kinerja situs anda pada perangkat mobile, itu bisa menjadi signifikan.


Penambahan elemen baru menyelesaikan masalah yang disebabkan oleh gambar yang dilihat pada monitor ukuran penuh, tetapi tidak diterjemahkan dengan baik ke perangkat mobile.

Contoh kode HTML5 Picture :

    <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="Sample ALT description">
    </picture> 

KOMPABILITAS

Suatu hal yang penting untuk diketahui adalah penambahan element <Picture> bisa mempercepat loading blog anda, terutama pada perangkat mobile. Itu akan baik bagi pengunjung blog anda.

Jangan ragu untuk menerapkan element <Picture> dalam kode situs blog anda sekarang. Bahkan jika program browser tidak memahami elemen baru, ada perintah mundur menggunakan tag gambar HTML standar (perhatikan <img> tag dalam elemen gambar).

Semoga Bermanfaat.