Optimize Image, atau dalam bahasa Indonesianya Optimalkan Gambar merupakan salah satu darti 10 masalah kecepatan loading blog di Google PageSpeed Insights karena gambar.
Masalah ini dapat muncul ketika PageSpeed Insights mendeteksi bahwa ada salah satu atau beberapa gambar di blog anda yang dapat dioptimasi ukurannya tanpa mengurangi kualitasnya.
Seperti yang anda ketahui, bahwa gambar memiliki peranan yang sangat penting pada sebuah blog. Bahkan, menurut beberapa pakar SEO seperti Backlinko, gambar harus digunakan semaksimal mungkin untuk kepentingan SEO suatu blog.
Tetapi, pada beberapa peristiwa, tidak semua gambar dapat mendukung SEO.
Justru malah membuat blog tidak SEO, mengapa?
Dikarenakan gambar sangat berat dan besar ukurannya, sehingga dapat merusak User Experience dan tentunya mengganggu SEO. Oleh karenanya, PageSpeed Insights sangat menekankan untuk mengoptimalkan gambar di blog anda.
Saran saya, sebaiknya anda melakukan pengoptimalan gambar dengan beberapa teknik, seperti mengompresnya, mengubah ekstensi file gambar, mengubah kedalaman (bit) warna menjadi rendah, hingga teknik-teknik sulit menggunakan HTML dan JavaScript guna mengompresnya.
Mari kita mulai dari cara pertama...
Cara Pertama: Mengubah ekstensi file gambar
Dari gambar diatas, pasti anda sudah tahu dong apa maksudnya? Iya, ekstensi gambar memang sangat berpengaruh terhadap ukuran file gambar diatas.
Saya sangat menyarankan agar anda menggunakan gambar dengan ekstensi .PNG...
...tentu dengan berbagai alasan, diantaranya:
- Ukuran yang jauh lebih kecil dibanding ekstensi lainnya
- Gambar dapat dikompres tanpa mengurangi kualitas gambar
- Tetap jernih walaupun gambar di-zoom
- Dan masih banyak lagi...
- Bila dikompres, memang ukuran dapat jauh lebih kecil dari PNG, tetapi gambar menjadi jelek kualitasnya
- Bila di-zoom, gambar menjadi kotak-kotak dan rusak
- Untuk GIF, gambar mengalami perubahan warna ketika dikompres
Bila masalah belum kunjung kelar, silakan dicoba cara kedua ini.
Cara Kedua: Mengompres ukuran gambar
Cara kedua ini tergolong simpel...
Anda hanya perlu mengupload gambar di suatu website, lalu gambar anda dikompores ukurannya hingga ke paling rendah...
Contoh website untuk mengompres gambar diantaranya:
- compresspng.com (untuk gambar ekstensi PNG)
- compressjpeg.com (untuk gambar ekstensi JPG dan JPEG)
- gifcompressor.com (untuk gambar ekstensi GIF)
Tapi tidak mengapa, menurut saya lebih baik skor di PageSpeed anda bagus dan pengunjung dapat menikmati cepatnya loading blog anda agar lebih SEO, dikarenakan hal ini dapat menurukan bounce rate di blog.
Bila sudah melakukan kedua cara diatas tetapi masalah Optimalkan Gambar di PageSpeed masih saja muncul, silakan ikuti cara ketiga ini.
Cara Ketiga: Mengurangi penggunaan gambar post dan thumbnail
Jangan gunakan terlalu banyak gambar bila ingin menghilangkan masalah ini, apalagi gambar-gambar tidak berguna seperti foto orang lain, banner kosong, dan sebagainya.
Saya sarankan, saat anda membuat sebuah artikel, cukup tempatkan 1 gambar untuk tiap 400 kata, atau dengan kata lain dengan rasio 1:300.
Jadi, bila artikel anda berisi 1500 kata, usahakan gambar yang anda sebanyak 5 saja, tidak lebih, guna menghindari munculnya masalah Optimize Image ini.
Selain itu, coba anda kurangi jumlah post yang ditampilkan di homepage agar gambar thumbnail yang ditampilkan juga berkurang. Jumlah yang ideal menurut saya adalah 6 post per page.
Masih belum menemukan titik keluar juga? Coba anda cek kembali link gambar yang membuat masalah...
Bila anda menemukan link gambar yang ada seperti ini (perhatikan yang saya mark kuning):
https://1.bp.blogspot.com/......../s72-c/.....jpg
Gambar tersebut berasal dari thumbnail popular post di blog anda. Saya sangat menyarankan untuk menggunakan widget popular post tanpa thumbnail, entah hanya judul saja atau judul dengan deskripsi.
Cara Keempat: Penghapusan Snippet Count
Cara ini sebenarnya cara rahasia, tapi sengaja saya beberkan hehehe...
Sekarang buka Edit HTML pada blog anda, lalu cari kode yang mirip berikut ini:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>
Bila ketemu, silakan hapus dan ganti menjadi:
<div class='snippets'><data:post.snippet/></div>
Simpan, dan cek di PageSpeed Insights...
Cara ini sebenarnya memiliki efek samping, yaitu jumlah kata pada deskripsi/snippet yang menjadi tidak dapat diatur, tetapi dapat menaikkan skor di PageSpeed Insights anda secara signifikan dan tentunya cara ini dapat menyelesaikan masalah Optimize Image (walaupun tidak sampai tuntas).
Masih belum fix juga? Coba cara terakhir ini yang menurut saya paling ampuh...
Cara Terakhir: Pakai LazyLoad!
Cara Terakhir ini menurut saya sudah paling ampuh untuk segala macam kondisi, yaitu dengan memasang LazyLoad untuk setiap gambar yang ada.
Untuk cara ini sudah tidak perlu saya bahas lagi, karena sudah pernah saya tulis artikelnya tentang Cara Pasang LazyLoad untuk Mengatasi Leverage Browser Caching ini.