Cara Memperbaiki Gambar Dalam Format Generasi Berikutnya di Blogger

Apa itu Google Pagespeed Insight?

Google Pagespeed Insight adalah alat yang disediakan Google sebagai sarana untuk mengukur kecepatan tampilan pada website.

Ini biasanya digunakan sebagai parameter / tolak ukur seberapa cepat dan nyaman ketika seorang pengguna mengunjungi website / blog.

Namun seringkali blog yang kita miliki terkendala speed loading yang lambat sehingga mengurangi kenyamanan pengunjung. Salah satunya faktor terbesar adalah gambar yang kita unggah ternyata tidak optimal.

hasil pengujian Google Pagespeed Insight dengan gambar JPG konvensional terdeteksi lambat (5.1 detik)

Sementara waktu untuk memuat halaman yang ideal adalah kurang dari 2,5 detik agar mendapatkan skor yang baik di Google Pagespeed Insight.

Agar performa pemuatan halaman blog lebih cepat, salah satunya kita dapat menggunakan format gambar generasi berikutnya.

Apa itu Gambar Generasi Berikutnya?

Gambar generasi berikutnya atau (next generation image) adalah gambar berformat modern dengan kompresi yang lebih baik dari format gambar sebelumnya sehingga dapat dimuat dengan cepat pada website.

Contoh format gambar generasi selanjutnya adalah JPEG 2000, JPEG XR, dan WebP. Format ini adalah format gambar yang memiliki karakteristik kompresi dan kualitas yang unggul dibandingkan dengan JPEG konvensional.

Saat ini gambar generasi berikutnya yang paling umum digunakan adalah gambar berformat WebP. Gambar ini dapat menciptakan visual berkualitas tinggi dengan ukuran yang lebih kecil daripada JPEG dan PNG.

Menurut caniuse.com Saat ini browser yang sudah kompatibel dengan format WebP mencapai 95%

Format WebP pada dasarnya bertujuan untuk membuat gambar yang lebih kecil dan terlihat lebih baik yang dapat membantu membuat web lebih cepat.

Gambar Format Generasi Berikutnya di Blogger

perbandingan ukuran file JPG vs WebP

Untuk membuat format gambar generasi selanjutnya kamu dapat menggunakan software editor gambar seperti adobe photoshop yang telah diinstall / dilengkapi dengan plugin WebP. Mudah sekali!

Save gambar ke format .webP di Adobe Photoshop, kalau mau coba ini link plugin nya

Tapi tunggu, jika kamu telah berhasil membuat gambar berformat WebP dan mengunggahnya di platform Blogger, ternyata peringatannya masih belum terdeteksi format gambar berikutnya. Contohnya seperti ini

Gambar berformat WebP yang diunggah di Blogger, tampak masih belum terdeteksi format generasi berikutnya

Kami mencoba menyimpan "save as" gambar kembali ke komputer ternyata format gambar yang sudah berformat WebP kembali berekstensi JPG. Sungguh sangat menyebalkan bukan?

ternyata masih terdeteksi .JPG 🤨

Sepertinya Blogger tidak mengizinkan kita mengunggah gambar berekstensi .WebP

Solusi Gambar Generasi Berikutnya di Blogger

Lalu bagaimana cara memperbaiki gambar dalam format generasi berikutnya di blogger?

Untuk itu kami telah mengadakan beberapa pengujian dengan menggunakan teknik modifikasi url pada gambar blog.

Dengan sedikit perubahan url ternyata kita bisa menikmati gambar WebP tanpa harus menggunakan software editor gambar.

1. Unggah gambar seperti biasa ke blog, boleh dengan menggunakan format apa saja seperti JPG atau PNG.
2. Setelah gambar diunggah, lalu edit url dengan pola seperti ini

3. Perhatikan yang ditandai bold diatas, url s1200 artinya lebar gambarnya adalah 1200 pixel
4. Ganti url s1200 menjadi s1200-rw, contohnya seperti ini

5. Dengan menambahkan -rw artinya gambar akan otomatis berubah menjadi format .WebP
6. Bila kamu ragu, kamu dapat mencoba dengan copy paste url gambar diatas ke browser kamu, lalu save as. Nantinya gambar akan terdeteksi WebP
7. Selesai.

Teknik modifikasi url ini bisa mengubah format gambar apapun menjadi format WebP. Hasil pengujian yang kami lakukan di Google Pagespeed Insight seperti ini. Cukup memuaskan

gambar generasi berikutnya telah terdeteksi dengan baik (lulus audit)

Dengan menggunakan gambar berekstensi WebP akan mempercepat loading halaman secara signifikan, terutama bila diterapkan pada artikel yang memiliki banyak gambar.

Berikut tadi cara memperbaiki gambar dalam format generasi berikutnya di Blogger, semoga artikel ini dapat membantu kamu. Selamat mencoba! 😀