Ditulis oleh: Ditulis pada: 4/06/2021
Menambahkan Atribut srcset pada Thumbnail Blogger - Kemarin saya mencoba menambahkan kembali thumbnail di blog Kompi Ajaib ini baik untuk tampilan homepage ataupun postpage. Kemudian saya mendapatkan masalah dari thumbnail blogger ini untuk user experience, khususnya di perangkat mobile.
Masalah user experience dari thumbnail blogger pada perangkat mobile ini bisa kita cek dengan tool lighthouse yang memunculkan masalah "Serves images with low resolution". Keterangan dari masalah tersebut menyatakan bahwa dimensi natural gambar harus proporsional dengan ukuran tampilan dan rasio piksel untuk memaksimalkan kejernihan gambar.
Dari masalah ini, ada 2 kondisi yang saya cermati, yaitu:
- Pertama, jika kita menampilkan ukuran gambar yang besar di desktop, maka gambar akan memberatkan loading blog di mobile.
- Kedua, jika kita menampilkan ukuran gambar yang kecil di desktop, maka kemungkinan gambar akan terlihat buram di mobile.
Nah, untuk mengatasinya kita bisa menambahkan atribut srcset pada kode thumbnail blogger. Dengan srcset, kita dapat memberitahu browser, gambar mana yang ditampilkan di desktop dan atau di mobile.
Sebagai contoh, berikut sebuah masalah dari thumbnail seperti pada gambar berikut.
Dari gambar di atas diketahui bahwa thumbnail tersebut memiliki ukuran 330 x 185 dengan rasio 16:8 (Actual size, yang biasanya disesuaikan dengan ukuran thumbnail di desktop), sementara thumbnail di mobile ditampilkan dengan ukuran 340 x 191 (Displayed size) dan ukuran gambar yang diharapkan seharusnya 680 x 382 (Expected size, ukuran ini biasanya 2x dari ukuran yang ditampilkan). Hal ini membuat gambar terlihat buram di perangkat mobile.
Thumbnail tersebut ditampilkan dengan kode kurang lebih seperti berikut.
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 330, "16:9")' expr:title='data:post.title' height='9' width='16'/>Untuk mengatasi hal tersebut, kita bisa menambahkan srcset pada kode thumbnail di atas. Penulisan kode thumbnail ini harus benar, jika tidak maka thumbnail akan blank atau tidak muncul. Setelah ditambahkan srcset, maka kodenya menjadi seperti berikut.
<img expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 330, "16:9")' expr:srcset='resizeImage(data:post.thumbnailUrl, 680, "16:9") + " 425w, " + resizeImage(data:post.thumbnailUrl, 330, "16:9") + " 1024w"' expr:title='data:post.title' height='9' width='16'/>Dan perhatikan kode srcset yang ditambahkan berikut.
expr:srcset='resizeImage(data:post.thumbnailUrl, 680, "16:9") + " 425w, " + resizeImage(data:post.thumbnailUrl, 330, "16:9") + " 1024w"'Ukuran 680 adalah ukuran yang ditampilkan di mobile sesuaikan dengan ukuran yang diharapkan pada tool lighthouse, dan ukuran 330 adalah ukuran untuk versi desktop.
Untuk ukuran ini tentunya akan berbeda-beda pada setiap blog, tergantung dari desain tema yang digunakan, baik untuk dimensi maupun rasio-nya.
Untuk itu, sebagai patokannya untuk menentukan ukuran pada srcset ini yaitu ukuran yang ditunjukan pada tool lighthouse seperti pada gambar di atas, dan trik ini bisa digunakan pada blog AMP HTML dan blog NON AMP.
Demikian saja, mudah bukan?
Semoga bermanfaat.