Meningkatkan Performance Web dengan Optimasi Gambar
Published 30 Juni 2022
Optimasi gambar mungkin salah satu cara untuk meningkatkan skor pada metrik web vital. Beberapa optimasi gambar seperti halnya mengkompres ukuran gambar sehingga menjadi lebih kecil lagi. Ukuran yang sebaiknya di gunakan adalah di bawah 100kb untuk gambar yang resolusinya besar seperti halnya gambar pada hero section atau gambar illustrasi lainnya.
Penting juga untuk pemilihan warna pada gambar sehingga ketika kita convert dari figma atau editor apps lainnya bisa di maksimalkan. atau dengan caera merubah format gambar ke format yang lebih di terima oleh browser. Misalnya kita mempunyai gambar dengan format .jpg atau .png, sebaiknya kita convert gambar tersebut ke format .webp atau .svg saja karena dari segi ukuran juga lebih baik tetapi kualitas dari gambar itu sendiri juga tidak terlalu jauh perbedaannya. Beberapa aplikasi online yang bisa di gunakan suntuk mengoptimalkan gambar antara lain:
Setelah optimasi gambar apakah ada perubahan? jika dengan optimasi gambar sudah dirasa cukup untuk meningkatkan score mari kita lanjut ke step berikutnya.
penggunaan lazy load pada gambar di sarankan untuk meningkatkan performa web. Bisa menggunakan lazy load dari bawaan browser atau menggunakan framework, mungkin juga kita bisa membuat sendiri script untuk melakukannya. Penggunaan lazy load yang standar bisa menuliskan loading="lazy" pada tag html. Pada kasus kali ini saya menggunakan contoh dari lazysizes. Beberapa contoh Untuk cara penggunaannya seperti berikut:
Non Responsive
<img data-src="image.jpg" class="lazyload" />Responsive with Automatic Sizes Calculation
<img data-sizes="auto" data-src="image2.jpg" data-srcset="image1.jpg 300w, image2.jpg 600w, image3.jpg 900w" class="lazyload" />Iframe
<iframe frameborder="0" class="lazyload" allowfullscreen="" data-src="//www.youtube.com/embed/ZfV-aYdU4uE"></iframe>untuk lebih detail bisa mengunjungi halaman berikut.
ada cara yang tidak begitu terkenal di luar core web vitals yang sebenarnya tidak membuat perbedaan dalam banyak kasus. Menambahkan atribut width dan height ke markup <img> Anda menjadi berguna kembali setelah beberapa perubahan baru-baru ini di dunia CSS, dan adopsi cepat dari perubahan ini oleh browser web paling populer.
Cara tradisional untuk menghindari hal ini adalah dengan memberikan atribut width dan height dalam markup <img> sehingga meskipun browser hanya memiliki HTML, browser masih dapat mengalokasikan jumlah ruang yang sesuai. Jadi, jika kita mengubah contoh di atas menjadi berikut:
<img src="hero_image.jpg" alt="" width="400" height="400">Ketika width dan height ditentukan pada gambar, browser mengetahui berapa banyak ruang yang harus disediakan untuk gambar sampai diunduh. Lupa menyertakan dimensi gambar dapat menyebabkan perubahan tata letak, karena browser tidak yakin berapa banyak ruang yang dibutuhkan gambar.
Untuk memastikan gambar kami dapat diakses, kita menambahkan atribut alt. Nilai atribut ini harus berupa deskripsi tekstual dari gambar, dan digunakan sebagai alternatif untuk gambar ketika tidak dapat ditampilkan atau dilihat; misalnya, pengguna mengakses halaman Anda melalui pembaca layar. Kode di atas dengan alt yang ditentukan terlihat sebagai berikut:
<img src="bag.webp" alt="Good Bag">Kesimpulannya adalah untuk optimasi gambar kita perlu menentukan ukuran dan format yang sesuai, menambahkan height dan width pada gambar, menambahkan lazy loading, dan mendeskripsikan gambar dengan penggunaan atribut alt.
Terimkasih!