Riset format gambar postingan di Blogspot

Postingan terkait:

Cara tepat memasang gambar WEBP di Blogspot

Daftar isi:

1. Intro
2. Riset tag img Blogspot
3. Hasil Audit Pagespeed Insight
4. Riset thumbnail Blogspot

Format gambar generasi terbaru

Intro

image arrow_drop_down

Fitur Upload image di Blogger yang terdapat di halaman edit postingan sebenarnya mengkonfersi dan juga meng-generate gambar atau image yang diupload dipostingan menjadi file baru.

Perhatikan URL elemen <img> dalam postingan yang biasanya formatnya seperti dibawah ini.

<img src='https://blogger.googleusercontent.com/.../s1600/image.webp' .../>

Riset tag <img> Blogspot

Untuk membuktikan, upload file langsung kedalam postingan dengan format WEBP kemudian copy url-nya lalu buka di tab baru, lalu Simpan gambar.

Buka infomasi gambar tersebut dari File Manager atau File Explorer, maka akan tersimpan dengan format .jpg , bukan WEBP

Itulah penyebab pada hasil audit Pagespeed insight selalu ada peringatan untuk menayangkan gambar dengan format generasi berikutnya, padahal sudah diupload dalam format tersebut.

Riset background thumbnail Blogspot

Selanjutnya, pada tema versi 3, URL background-image dalam Thumbnail Popular Post maupun Featured Post seperti dibawah ini.

background : url(https\:\/\/lh3.googleusercontent.com\/blogger_img_proxy\/ABLy4Ez6KGUCPpoSncD7ReGxPtY2X6oHJpmqpzIYFqSgIrdGVpoLUbZJ-5dGY_bCFfSMMuC1vtUU-FVEQQU3g9R6FwcELirdjsd1cD6vt_eKBOr0axE=w385-h184-p-k-no-nu);

URL background-image tersebut masih merujuk pada gambar utama yang diupload dalam postingan, namun di-generate sehingga memiliki URL yang berbeda dengan URL gambar postingan, dan dengan dimensi yang lebih kecil.

Untuk menemukan URL background pada thumbnail Popular post atau Featured post, gunakan Chrome Devtool

Caranya, arahkan cursor ke thumbnail popular post atau featured post lalu klik kanan, klik Inspeksi elemen.

Pada tampilan Devtool perhatikan bagian elemen, lebarkan elemen yang masih bertanda " arrow_right ", klik untuk melebarkan (expand) lalu temukan lokasi elemen thumbnail.

trending_flat trending_flat

Jika sudah ditemukan, klik tepat pada elemen thumbnail tersebut untuk menampilkan CSS-nya, lihat screenshot 1 diatas.

Postingan terkait : Cara tepat memasang gambar WEBP di Blogspot