Lighthouse - Cara Memperbaiki Dimensi dan Resolusi Gambar Situs
Jika terdapat masalah dimensi gambar pada situs Anda tampil dalam keadaan ukuran dan rasio piksel dianggap kurang proposional oleh hasil audit Google Lighthouse, maka perlu adanya penanganan yang cukup sederhana mengenai gambar tersebut. Sebelum lanjut ke pokok masalah, ada baiknya kita pahami terlebih dahulu apa maksud dari dimensi gambar? ukuran? rasio? dan resolusi?
Dimensi Gambar pada Situs
Pengertian dimensi gambar pada situs adalah mencakup ukuran tinggi (height) dan lebar (width). Pada situs, sebuah gambar akan tampil mengikuti dimensi sesuai ruang yang tersedia pada element html. Namun sebagian besar CSS (Cascading Style Sheet) telah mengatur dimensi tersebut agar proposional (sesuai) dengan ukuran penempatan yang tersedia untuk tampil mengikuti tata letak yang Anda inginkan. Misal sebuah gambar berukuran 250x50 (lebar 250 dan tinggi 50) tanpa adanya pengaturan melalui css, maka gambar akan tampil sesuai dimensi yang sesungguhnya pada tampilan situs. Bagaimana jika css mengatur hal tersebut? misal terdapat css sebagai berikut
img {
width:125px;
height:25px;
}Rasio Gambar yang diinginkan Lighthouse
Jika gambar sesungguhnya (original) 250x50 dan css mengaturnya menjadi 125x25 maka perbandingan inilah yang disebut sebagai rasio, dan rasio tersebut menandakan 1/2 dari ukuran sesungguhnya. Rasio gambar memiliki satuan piksel (px), pada css cara dan penulisannya seperti kode seperti diatas. Piksel inilah yang akan menentukan ketajaman atau kejernihan (detail) sebuah gambar (resolusi). Logikanya, semakin besar ukuran gambar maka semakin besar rasio piksel untuk mencapai resolusi yang ditetapkan. Kenapa pada audit Lighthouse mengidentifikasikan bahwa gambar situs Anda tidak mencapai resolusi (low resolution) yang ditetapkan?
Serves images with low resolution
Image natural dimensions should be proportional to the display size and the pixel ratio to maximize image clarity
Pada peramban Chrome versi 80.4044.138 Build (64-bit) tidak mengalami keluhan pada audit Lighthouse mengenai resolusi yang ditetapkan. Sedangkan untuk beberapa peramban versi mobile (aplikasi ponsel), Lighthouse mode mobile menginginkan rasio (Dimension Pixel Resolution) 3x ukuran originalnya. Baca juga sumber berikut.
Cara Mengedit Dimensi dan Resolusi Gambar
Contoh asusmsi kasusnya adalah pengaturan css sama persis dengan ukuran dimensi originalnya. Misal tag gambar pada html situs Saya sebelum perbaikan menggunakan css inline (langsung dalam atribut) seperti berikut
<amp-img alt="Jadi Tutor"
height="50"
width="280"
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRSMnMah-GwidsqqW54LLaQuLOBdsEJjFuLCMYpZBbsp_Sz8z3Zy-PNzwrYrBdsaER9oh88l92KlWWE8JcbR2Z-qgSD9Zr82hMxHvkifRUP5tgxdW7-70BHBunn_vgJIeRjZqkazZ02QU/s1600/JT-Banner280x50.png>
</amp-img>Sedangkan permintaan dari Lighthouse adalah resolusi gambar dengan ukuran dimensi 3 kali lipatnya, maka kita ikuti saja ukuran yang diminta. Anda tak perlu mengubah pengaturan css height 280 dan width 50, yang perlu dilakukan hanyalah mengganti gambar tersebut dengan ukuran tinggi 132 dan lebar 735. Editing ukuran tersebut bisa dilakukan menggunakan aplikasi Photoshop atau aplikasi lainnya yang Anda kuasai untuk memperbesar gambar tersebut.
Pertimbangkan Resolusi Gambar
Seperti yang saya singgung diatas mengenai dimensi gambar selain satuan pixel, gambar juga memiliki ukuran format dalam satuan bit yang menandakan seberapa besar bobot file tersebut. Bobot file bervariasi berdasarkan jenis formatnya, semakin besar ukuran pixel maka semakin besar pula bobot file bit pada gambar. Adakalanya kita perlu mempertimbangkan bobot file ini agar meringankan rendering peramban terhadap situs yang dimuat dan tidak memakan bandwith besar pada jaringan internet. Semoga tutorial ini membantu permasalahan tersebut. Selamat Mencoba dan Berkarya.
Baca Juga : Cara Konversi Format Gambar