Fungsi Atribut srcset pada Blog AMP - AMP atau Accelerated Mobile Pages semakin populer saja penggunaannya, seiring dengan itu berbagai penyempurnaan terus dilakukan oleh pihak pengembangnya. Beruntung, Blogger sebagai salah-satu platform website bisa dikustomasi menggunakan teknik AMP ini.
Beberapa prinsip dari AMP adalah :
- Penggunaan resource khusus AMP yang menjamin kecepatan akses blog meningkat drastis
- Penggunaan script-script khusus AMP yang wajib agar blog dinyatakan valid AMP
- Seperti pada blog non AMP, disarankan untuk menggunakan gambar-gambar beresolusi tinggi tetapi dengan ukuran minimal
Penggunaan Gambar pada AMP
Resolusi gambar vs Ukuran gambar
Untuk membantu memahami artikel ini, terlebih dahulu saya membuat dua pengertian yaitu resolusi gambar dan ukuran gambar.Resolusi gambar adalah dimensi yang dinyatakan dalam pixel, misalnya 1600 pixel x 900 pixel. Kemudian ukuran gambar adalah volumenya yang dinyatakan dalam byte, kilobyte, atau megabyte. Bila menggunakan format dan teknik kompresi yang sama, dimensi gambar yang lebih besar akan menghasilkan ukuran gambar yang lebih besar juga.
Dalam tulisan ini selanjutnya saya akan menyebut resolusoi gambar dan ukuran gambar sebagai istilah baku.
Tidak jarang kita menyisipkan gambar pada postingan, entah hanya sebagai pemanis ataupun memang bertujuan sebagai penguat konten. Untuk AMP ada beberapa standar umum yaitu :
- Resolusoi gambar minimal 1280 x 720 pixel. Bila kurang dari itu, halaman blog akan tetap dinyatakan valid AMP tapi dengan peringatan
- Menggunakan format gambar WEBP, yaitu format yang berukuran terkecil untuk saat ini. Bila tidak, akan muncul peringatan saat kita mengaudit performa blog menggunakan web.dev atau lighthouse.
Hingga di sini timbul masalah baru, bahwa resolusi 1280 x 720 pixel sering dianggap terlalu besar untuk blog yang diakses oleh mobile device. Karena untuk mobile device, cukup kita menggunakan gambar berdimensi 800 x 450 pixel.
Untuk mobile device dengan resolusi 1080 x 1920 pixel, sebenarnya bisa saja tetap menggunakan resolusi 1280 pixel x 720 pixel selama ukuran gambarnya bisa sedemikian kecil, tetapi sering terjadi bahwa upaya kompresi untuk menekan ukuran gambar telah mencapai batas maksimal. Itulah alasan mengapa digunakan dimensi gambar yang lebih kecil yaitu 800 x 450 pixel.
Audit Blog
Untuk mengetahui sejauh mana kualitas blog yang kita kustomasi, perlu dilakukan audit. Salah-satu situs yang bisa digunakan adalah Web Dev.Di situs tersebut blog akan diaudit dari sisi performa, aksesibilitas, kepraktisan, dan seo. Berikut adalah screen shot contoh hasil audit blog dari sisi performa untuk poin pemakaian gambar :
Screen shot di atas menerangkan bahwa kita perlu memasang gambar yang sesuai pada selular device agar waktu muat bisa dimaksimalkan. Sekaligus juga menjelaskan bahwa potensi penghematan ukurannya bisa di angka 88.1kb dari 153.4kb. Lalu bagaimana caranya? Di sinilah atribut srcset berperan.
Penggunaan srcset
Secara umum formula penerapan srcset adalah sebagai berikut :
<amp-img
alt='alt gambar'
title='judul gambar'
height='tinggi gambar'
width='lebar gambar'
src='sumber gambar utama'
layout='layout gambar'
srcset='sumber gambar utama xxxw, sumber gambar kedua xxxw'>
</amp-img>
Contoh aktualnya seperti ini :
<amp-img
alt='alt gambar'
title='judul gambar'
height='720'
width='1280'
src='url gambar utama ukuran besar'
layout='responsive'
srcset='url gambar utama ukuran besar 1280w, url gambar utama ukuran kecil 800w'>
</amp-img>
Cara kerja script di atas adalah sebagai berikut :
Bila blog dibuka menggunakan pc, maka gambar yang tampil adalah yang memiliki lebar 1280px. Sedangkan bila dibuka menggunakan smartphone maka yang tampil adalah gambar dengan lebar 800px. Parameter 1280w dan 800w memberi tahu kepada device untuk secara otomatis memilih resolusi gambar yang paling sesuai. Kemudian disempurnakan oleh parameter layout='responsive'.
Untuk parameter layout, selain bisa diisi oleh 'responsive' bisa juga diisi oleh 'intrinsic'. Intrinsic ini adalah penyempurnaan dari responsive.
Kesimpulan
Dengan menerapkan atribut srcset, maka browser bisa memilih resolusi gambar mana yang paling pas pada suatu device. Keuntungan dari penerapan ini adalah loading blog bisa lebih cepat.
Demikianlah artikel dari Kontakmedia yang berjudul Fungsi Atribut srcset pada Blog AMP, semoga bermanfaat. Dan terima kasih untuk Anda yang telah berkunjung ke blog ini.