Lolos Audit Ukuran Gambar

Ubah ukuran gambar dengan tepat

Postingan terkait:

Ukuran gambar ideal
Template AMP-IMG Blogger

Daftar isi:

Intro

Beberapa format tag HTML untuk penyematan gambar yang support di Google Pagespeed Insight. Khususnya untuk pemuatan gambar agar bisa menerapkan ukuran width dan height yang jelas pada gambar postingan. Sehingga memperoleh score perfoma yang lebih baik dari score ini.

Dibawah ini beberapa format tag image yang bisa digunakan, dengan parameter yang tepat maka halaman blog akan dirender dengan cepat dan memperoleh perfoma tinggi untuk mendukung optimasi SEO.

AMP-IMG

tag amp-img



  <amp-img alt='img alt' width='640' height='320'

src='/s1600/image.jpg'

srcset='/s320/image.jpg 320w, /s400/image.jpg 400w, /s640/image.jpg 640w'

sizes='(max-width:400px)100vw,(max-width:900px)90vw,640px'>

  <! ------ noscript agar dirender sebagai thumbnail blog ------ >

<noscript>

<img alt='img alt' width='640' height='320' src='/image.jpg'/>

</noscript>

</amp-img>

AMP-IMG membutuhkan script dan CSS khusus, lihat cara pemasangan AMP-IMG.

Khusus untuk yang ingin menerapkan AMP-IMG di halaman yang NON-AMP, silahkan dicoba dahulu, karena dibeberapa tema custom ukuran gambar berhasil diterapkan tapi justru script-nya yang menghambat dan menyebabkan render blocking. Hasilnya akan tetap menghambat Pagespeed. Atau pilih opsi selain AMP-IMG seperti dibawah ini.

Picture

tag <picture>



    <picture>

    <source srcset="/s400/image.webp"  media="(max-width:400px)"/>

    <source srcset="/s640/image.webp"  media="(min-width:401px)"/>

    <img alt="image alt" height="320" src="/s1600/image.webp" width="640">

    </picture>

Selain tag <picture> , bisa juga menggunakan tag <figure> dengan parameter yang sama. Hanya mengganti tag pembuka dan penutupnya saja.

Lihat contoh HTML tag <picture>

Lihat tampilan hasil tag picture.

Image

Tag <img>



    <img src="image.jpg"

    srcset="/s480/image-small.jpg 480w, /s800/image.jpg 800w"

    sizes="(max-width: 480px) 100vw, (max-width: 1024px) 50vw, 800px"/>

Lihat contoh hasil penerapan tag <img>