Menambahkan Atribut srcset pada Thumbnail Blogger

Tambahkan atribut srcset ke thumbnail blogger. Kemarin saya mencoba menambahkan kembali thumbnail ke blog Perusahaan Ajaib ini untuk halaman beranda dan menerbitkan tampilan halaman. Kemudian saya mengalami masalah dengan thumbnail blogger UX ini, terutama di perangkat seluler.

Kami dapat memeriksa masalah UI dengan Blogger Thumbnail di perangkat seluler dengan alat utama "membutuhkan gambar beresolusi rendah". Pernyataan masalah mengatakan bahwa ukuran alami gambar harus proporsional dengan ukuran layar dan rasio piksel sehingga gambar sejelas mungkin.

Ada 2 situasi yang saya perhatikan dari masalah ini:

1. Pertama, jika kita menampilkan gambar besar di desktop, itu akan menambah beban blog di ponsel.
2. Kedua, jika kita melihat gambar kecil di desktop, mungkin akan buram di perangkat seluler.

Nah, untuk mengatasi masalah ini, kita bisa menambahkan atribut srcset pada kode thumbnail blogger. Dengan srcset, kita dapat memberi tahu browser gambar mana yang harus ditampilkan di desktop dan/atau seluler.

Sebagai contoh, berikut ini adalah thumbnail case seperti gambar berikut.

Seperti yang dapat kita lihat dari gambar di atas, thumbnail adalah 330 x 185 dalam 16:8 (rasio aspek yang benar, biasanya diskalakan ke ukuran thumbnail desktop), dan thumbnail ditampilkan pada 340 di ponsel. x 191 (ukuran tampilan) dan ukuran gambar berbeda, seharusnya 680 x 382 (ukuran yang diharapkan, ukuran ini biasanya 2 kali ukuran yang ditampilkan). Ini membuat gambar buram di perangkat seluler.

Thumbnail ditampilkan dengan kode yang mirip dengan berikut ini.

Sebagai solusinya kita bisa srcset kode desain di atas. Pengkodean thumbnail ini harus benar, jika tidak maka thumbnail akan kosong atau tidak ditampilkan. Setelah srcset kodenya akan menjadi seperti berikut.

 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'/> 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'/>

Perhatikan kode srcset berikut yang ditambahkan.

 expr:srcset='resizeImage(data:post.thumbnailUrl, 680 , "16:9") + "425W" + imageResize(data: post.thumbnailUrl, 330 , "16:9") + "1024 W" '

Ukuran 680 adalah ukuran yang ditampilkan pada perangkat seluler dan ukuran 330 adalah ukuran desktop.

Untuk settingan ini, tergantung desain theme yang digunakan, tergantung ukuran dan reportasenya tentu akan berbeda di setiap blog.

Ini umumnya membutuhkan ukuran srcset itu, yang merupakan ukuran yang ditentukan dalam alat tag seperti yang ditunjukkan di atas, dan trik ini dapat digunakan di blog HTML AMP dan blog NON AMP.

Itu saja, sederhana, kan?

Ini bisa berguna.