Cara Mengatasi Optimize Image / Optimalkan Gambar di PageSpeed Insights
Cara Mengatasi Optimize Image / Optimalkan Gambar di PageSpeed Insights

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


Perbandingan antara GIF, JPG, dan PNG

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:
  1. Ukuran yang jauh lebih kecil dibanding ekstensi lainnya
  2. Gambar dapat dikompres tanpa mengurangi kualitas gambar
  3. Tetap jernih walaupun gambar di-zoom
  4. Dan masih banyak lagi...
Berbeda dengan GIF dan JPEG, yang memiliki kelemahan:
  1. Bila dikompres, memang ukuran dapat jauh lebih kecil dari PNG, tetapi gambar menjadi jelek kualitasnya
  2. Bila di-zoom, gambar menjadi kotak-kotak dan rusak
  3. Untuk GIF, gambar mengalami perubahan warna ketika dikompres
Oleh karenanya, mulai sekarang, usahakan untuk menggunakan gambar yang berformat PNG di blog anda guna menghindari munculnya masalah Optimize Image di PageSpeed Insights.

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:
  1. compresspng.com (untuk gambar ekstensi PNG)
  2. compressjpeg.com (untuk gambar ekstensi JPG dan JPEG)
  3. gifcompressor.com (untuk gambar ekstensi GIF)
Kembali ke cara pertama, cara kedua kali ini memiliki beberapa efek samping untuk gambar yang memiliki ekstensi selain PNG, yaitu kualitas gambar yang menurun setelah dikompres.

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='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</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.

Selamat mencoba dan semoga masalah Optimize Image dapat teratasi!

Silakan pilih sistem komentar anda ⇛   

4 komentar untuk Cara Mengatasi Optimize Image / Optimalkan Gambar di PageSpeed Insights.

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 23 Februari 2018 20.38

Itu sudah pasti risikonya...

Balas
ID Kholis Kode Jarwo
ID Kholis
# 23 Februari 2018 17.52

Lumayan, dengan menerapkan cara Penghapusan Snippet Count score Pengoptimalan naik 10% meskipun teks deskripsi sedikit terpotong..

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 11 Desember 2017 12.50

Mungkin enda... Tergantung keadaan

Balas
Surya Fitrianto Kode Jarwo
Surya Fitrianto
# 10 Desember 2017 20.05

Gan, klo gambar lama dari blog didownload -> dari jpeg diganti png -> dikompress.

Itu bikin gambar rusak/pecah nggak?

Balas