Cara Tentukan Sizes Width Height Gambar Yang Sulit Diatur Pada Template Blogger

Salah satu penyebab beratnya loading Blog pada hasil tes di Pagespeed insight adalah karena sizes width heigth gambar yang tidak atau belum ditentukan ukuran pastinya.

Khususnya pada halaman Beranda/Arsip/Search/Label, widget PopularPost, widget FeaturedPost.

Sementara untuk gambar postingan mungkin dapat dengan mudah diatur karena hanya menggunakan kode html biasa. Berbeda dengan gambar di Beranda misalnya kodenya bukan html biasa melainkan tag khusus jadi rada membingungkan bagi yang belum terbiasa.

Saya bukan ahli tapi bisa sedikit wkwk.

Berikut contoh tag khusus gambar pada Template Essential/Contempo Blogger.

<b:if cond='data:post.featuredImage'>

<div class='snippet-thumbnail'>

<b:include data='{image: data:post.featuredImage,                                    imageSizes: [100],                                    imageRatio: &quot;1:1&quot;,                                    sourceSizes: &quot;100px&quot;}' name='responsiveImage'/>

</div>

</b:if>

Itu kode aslinya namun saya ubah sedikit agar dapat langsung dipakai bagi yang membutuhkan.

Pada aslinya bagian sourceSizes: &quot;(max-width: 800px), 20vw, 20vw&quot;

Itu ukurannya kurang pasti jadi saya ganti menjadi 100px supaya pasti. Hasilnya 100x100px pada jenis layar apapun, kan keren konsisten. Atau pakai vw juga lebih bagus misal 20vw yang otomatis menyesuaikan ukuran pada layar apapun tanpa merubah sizes. Sizes 100px width=20vw height=20vw. Saya lupa vw itu berapa px. Yang penting jangan pakai max-width karena ukurannya akan berubah-ubah. Kalau harus pakai max-width sebaiknya pasang pada bagian css langsung bukan pada kode gambar.

Namun kode gambar seperti dibawah ini mungkin lebih simpel tapi saya belum pernah mencobanya.

<img expr:src='data:post.featuredImage'/>

Tinggal ditambahi sedikit menjadi begini.

<img expr:src='data:post.featuredImage' sizes='250px' width='20vw' height='128px'/>

Entahlah.

Itu satu contoh pada Template Essential/Contempo, masih ada satu jenis lagi kode yang saya dapat dari Notable, kodenya lebih rumit yaitu me-resize gambar pada url-nya.

https://1.bp.blogspot.com/--9fWds_FK88/YCfrpVHBlzI/AAAAAAAAAuM/ACsj2jlEsIISKu42nkfGIZcrGhRMxAguACLcBGAsYHQ/s140/no-image-02.jpg

Bisa dirubah menjadi.

https://1.bp.blogspot.com/--9fWds_FK88/YCfrpVHBlzI/AAAAAAAAAuM/ACsj2jlEsIISKu42nkfGIZcrGhRMxAguACLcBGAsYHQ/s1600/no-image-02.jpg 

Merubah url yang terlihat seperti itu dari s140 menjadi 1600 mungkin mudah tapi kalau urlnya tidak terlihat tentu akan sulit. Lihat kodenya diposting satunya Kumpulan Tag Data Template Blogger