3. Memanipulasi WIDTH & HEIGHT gambar dengan AMP-IMG

Memanipulasi WIDTH & HEIGHT gambar dengan AMP-IMG

oleh Handy Eko Cahyono •   •   Update terakhir : Sabtu, Juli 02, 2022.
0

Dimensi gambar : width&height <amp-img>.

Daftar isi : 
  1. Amp Image Blogger
  2. Ukuran Image ideal
  3. Contoh tag AMP Image

Intro

Memanipulasi WIDTH dan HEIGHT dimaksudkan adalah metode untuk memberitahukan ukuran gambar pada browser pada saat halaman dimuat.

Mengatur WIDTH dan HEIGHT pada image

Karena saat ini ukuran % pada gambar tidak berlaku lagi. Misal : img {width: 100%}
walaupun secara fungsi masih bisa digunakan. Namun dari sisi performa, ternyata dinilai tidak efisien dan menghambat pemuatan halaman.

Audit performa gambar

Karena ukuran persen tidak dapat memberitahukan dengan jelas ukuran gambar yang sesungguhnya.
Sehingga pada saat menggunakan persen ini, browser akan memaksakan berapapun ukuran dan besar file gambar agar mencapai nilai persen yang ditentukan. Contoh:
gambar ukuran 600px disetting max-width{100%}, ternyata ada pengguna yang membuka halaman menggunakan laptop 14" misalnya.
Layar laptop ukuran 14" anggaplah sekitar 1400px, nah bisa dibayangkan bagaimana tampilan gambar 600px yang dibentangkan selebar 1400px?.

Sehingga dari situlah terpikir bagaimana cara memanipulasi ukuran image di postingan supaya tidak menghambat pemuatan halaman pada saat dibuka.
Salah satu caranya adalah dibawah ini.

Pasang script AMP terlebih dahulu didalam tag <head>

Script AMP

Copy lalu paste kode script AMP dibawah ini.

<link href="//cdn.ampproject.org/" rel='dns-prefetch'/>
<link as='script' href="https://cdn.ampproject.org/v0.js" rel='preload'/>
<script async='async' src="https://cdn.ampproject.org/v0.js"/>


Pasang CSS boilerplate.

CSS AMP

Copy dan paste dalam template, paste diatas tag </head> :

<style amp-boilerplate>
body{
-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;
animation:-amp-start 8s steps(1,end) 0s 1 normal both}
@-webkit-keyframes -amp-start{ from{visibility:hidden}to{visibility:visible}}
@-moz-keyframes -amp-start{ from{visibility:hidden}to{visibility:visible}}
@-ms-keyframes -amp-start{ from{visibility:hidden}to{visibility:visible}}
@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>

Gunakan Tag <amp-img> sebagai pengganti tag <img> dipostingan blog.
Ubah tag img ke amp-img
<amp-img
alt="Format gambar WEBP"
border="0"
width="640"
height='320'
src='https://blogger.googleusercontent.com/img/ori/file-gambar-kamu.jpg'
srcset="https://blogger.googleusercontent.com/img/ori/file-gambar-kamu.jpg 640w"
sizes='(max-width:800px)70vw,640px'>
<!-- Tag noscript ini untuk thumbnail Featured image, gunakan file yang width-nya sesuai dengan thumbnail blog kamu -->
<noscript>
<img alt='Judul Image' width='200' height='100' src='/s200.jpg'/>
</noscript> </amp-img>
    Keterangan :
  1. Nilai alt='' masukkan judul atau topik gambar.
  2. Nilai width dan height, sesuaikan ukuran panjang dan lebar gambar yang diinginkan.
  3. Nilai media query pada sizes='(max-width:800px)' berfungsi untuk memberi batas ukuran layar maksimal untuk bentangan gambar.
    (max-width:800px)70vw membatasi layar hingga maksimal 800px.
    Query ini ditargetkan untuk penampilan file gambar 300w dan 400w. Sehingga pada saat dirender, browser akan mengenali bahwa pada layar hingga 800px akan otomatis menampilkan salah satu gambar yang sesuai dengan layar yang digunakan saat itu. Disini gambar akan dibentangkan sebesar 70vw.
  4. Lihat penjelasannya dipostingan Template Entry AMP-IMG
  5. Penjelasan untuk nilai 70vw, kode vw berarti viewport width yaitu :
    satuan untuk nilai ukuran batas bentangan lebar gambar terhadap layar.
  6. Nilai satuan dari 300w = 300 width atau nilai ukuran panjang atau width gambar itu sendiri.

Setelah menerapkan, pastikan untuk menguji halaman di Pagespeed Insight.

Postingan terkait : Entry template AMP-IMG
Tags:
Posting Komentar (0)
Lebih baru Lebih lama