Cara Membuat Gambar Format WebP NextGen di Blogger 2022

samuelpasaribu.com

30 May, 2022

Cara Membuat Gambar Format WebP NextGen di Blogger Pelajari cara memperbaiki masalah penyajian gambar dalam format generasi berikutnya di Blogger dan menggunakan gambar webp dengan benar di blogger. Google telah meluncurkan pembaruan core web vitals terbaru untuk semua situs web.

Jika Anda pernah menganalisis halaman situs web Anda menggunakan alat kecepatan halaman Google seperti alat PageSpeed Insights, saya yakin rekomendasi untuk menyajikan gambar dalam format WebP NexGen adalah cara modern yang paling umum.

Google PageSpeed Insights Tool sendiri merekomendasikan ke server gambar nextGen. Dan pada artikel ini, kita akan membahas bagaimana kita dapat mengetahui Cara Menyajikan gambar Format WebP NextGen di Blogger.

Sajikan Gambar WebP NextGen di Blogger

Biasanya kita dapat menyajikan gambar Generasi Berikutnya untuk situs web WordPress dengan bantuan plugin. Namun berbeda dengan penggunaan pada platform blogger. Blogger tidak mendukung plugin tetapi didukung oleh Server Gambar Google yang kuat. Server gambar Google dapat menyajikan gambar webP, apa pun format file yang diunggah.

Blogger memiliki server gambar Google yang kuat. Ini dapat melayani hampir semua jenis gambar sesuai permintaan. Seperti yang sudah Anda ketahui, mengoptimalkan blog blogger untuk pengalaman pengguna terbaik sama dengan melakukan semuanya secara manual.

Blogger tidak mendukung plugin atau server gambar seperti WordPress yang dapat menyajikan gambar WebP generasi berikutnya, tetapi mendukung server gambar Google yang kuat. Server gambar Google dapat menyajikan gambar WebP terlepas dari format file yang diunggah.

Upload webP Image to Blogger

Anda dapat mengunggah gambar JPG, JPEG, PNG ke blog Blogger. Blogger secara otomatis mengonversi file-file ini ke format webP. Mari kita pahami cara meminta gambar NextGen dari Blogger. Untuk ini, Anda perlu mengunggah file gambar ke dashboard Blogger, seperti yang ditunjukkan di bawah ini.

Sekarang ubah mode HTML pada postingan blog menggunakan mode edit dan klik tombol edit (pensil) di sudut kiri atas. Pilih mode HTML untuk tujuan mengonversi ke gambar Blogger dalam format webP NextGen.

Setelah Anda berada dalam tampilan HTML posting Anda, cukup cari kode gambar. Kode gambar akan terlihat seperti yang ditunjukkan pada kode di bawah ini.

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGKvA7TRydzmI1Px9x3Ib3DSyG51QcuFClCSiNZF-rKgK_7zceDjLWcqnmE0Bep8I2cz37RtmJOKXr0PpIeTkIkrPKQJeLi3Bikex9XLRqXURjB3U9inYmQWCO828iUgKNx16o2KJ98UYQWSp60C53_Kfy9HOg9aOChlhc0w8xo1ZYzVx0qEQzNjp3/s728/NextGen%20WebP%20image.webp" style="margin-left: 1em; margin-right: 1em;"><img alt="NextGen WebP image" border="0" data-original-height="400" data-original-width="728" height="352" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGKvA7TRydzmI1Px9x3Ib3DSyG51QcuFClCSiNZF-rKgK_7zceDjLWcqnmE0Bep8I2cz37RtmJOKXr0PpIeTkIkrPKQJeLi3Bikex9XLRqXURjB3U9inYmQWCO828iUgKNx16o2KJ98UYQWSp60C53_Kfy9HOg9aOChlhc0w8xo1ZYzVx0qEQzNjp3/w640-h352/NextGen%20WebP%20image.webp" title="Cara Membuat Gambar Format WebP NextGen di Blogger" width="640" /></a></div>

Anda akan melihat kode yang mirip dengan yang ditunjukkan di atas. Anda harus mengedit tautan sumber gambar yang merupakan tag seperti pada gambar di bawah ini.

Sekarang Anda dapat menyajikan berbagai ukuran dan format gambar menggunakan server gambar Google. Untuk melakukan tindakan ini, ubah nilai dalam ukuran yang disediakan dalam kode src di tag. Pada gambar di atas, ukuran yang dideklarasikan adalah s640 yang berarti akan ditampilkan gambar berukuran sedang, ubah s640 menjadi s320 untuk ukuran gambar kecil. Ubah nilai ukuran sesuai kebutuhan Anda.

Dengan menggunakan nilai -rw ini pada gambar, Anda dapat menyajikan gambar webp berikutnya ke Blogger. Ubah saja s320 ke s320-rw, atau ubah s640 ke s640-rw. Anda harus menambahkan -rw setelah nilai ukuran gambar untuk webP.

📢 Blogger memperbarui struktur URL gambar (pembaruan 2022).

Pada tahun 2022, Blogger menghentikan struktur lama untuk gambar Blogger dan memperkenalkan struktur baru. Tidak ada perubahan untuk unggahan lama.

Struktur URL gambar terbaru dari Blogger menghadirkan properti gambar seperti ukuran, jenis, dan sebagainya.

Anda harus meletakkan -rw di akhir URL gambar, dan mempublikasikan kontennya.

Sekarang perbarui posting Anda, gambar sekarang dikonversi dan disajikan dalam format webP. Anda dapat memeriksanya dengan menyeret gambar di layar desktop.

Ikuti langkah-langkah di atas setiap kali Anda mengunggah gambar baru ke Blogger dan mengonversinya ke format webP NextGen.

Bagaimana Jika Tema Anda Tidak mendukung format webP?

Gambar apa pun yang Anda rahasiakan akan berfungsi sebagai gambar webP. Tapi, Apakah tema Blogger Anda mampu menangani permintaan gambar webP?

Ini akan membuat beberapa masalah dengan tema Anda yaitu beberapa gadget mungkin tidak terlihat. Itu semua karena tema Blogger yang Anda gunakan tidak mendukung webP nextGen.

Untuk mengatasi masalah ini, Edit Tema Blogger dan ubah file fungsi tema utama > file js panjang yang biasanya ditemukan tepat sebelum tag </body>.

Anda dapat menambahkan beberapa pembaruan pada template atau tema blogger Anda seperti yang ditunjukkan pada kode berikut.

Untuk itu Ganti kode diatas dengan kode berikut.

💡 Pastikan Anda harus mengikuti ini untuk semua kode serupa di file fungsi utama. Jika Anda menggunakan tema Blogger gratis, maka Anda harus mendekripsi file tema.

Jika Anda tidak tahu bagaimana melakukan ini? Anda dapat menggunakan Template Blogger ramah gambar WebP kami untuk blog Blogger. Tema ini akan menampilkan semua gambar widget dalam format webP. Tetapi untuk gambar di dalam posting, Anda harus mengikuti metode -rw untuk setiap gambar yang Anda unggah.

Kesimpulan

Jadi, itu saja tentang cara menyajikan gambar WebP generasi berikutnya di situs web Blogger. Caranya cukup mudah. Ini juga meningkatkan skor Kecepatan Halaman situs web Anda, jadi Anda harus mencobanya.

Saya harap artikel ini membantu Anda bagaimana Cara Membuat Gambar Format WebP NextGen di Blogger. Jika Anda memiliki keraguan, jangan ragu untuk bertanya di bagian komentar yang disediakan di bawah ini.

Demikian posting kali tentang Cara Membuat Gambar Format WebP NextGen di Blogger 2022. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!

samuelpasaribu.com

samuelpasaribu.com working in the Search Engine Optimization field since 2019. And worked on many successful projects since then. He shares the real-life experience of best SEO practices with his followers on samuelpasaribu.com. You also can learn Advance level SEO for WordPress, Blogger, or any other blogging platform. Stay tuned.

Herwanto August 9, 2022 at 12:46 AM

Makasih min ternyata bisa saya terapkan di blog saya
- samuelpasaribu.com August 10, 2022 at 8:56 AM
  
  ok steady 👍
Aldy Ndo September 17, 2022 at 9:01 PM

Akhirnya ketemu juga solusinya, thanks min
- samuelpasaribu.com September 18, 2022 at 3:17 AM
  
  Penelusuran terkait lainnya
  
  serve images in next-gen formats wordpress
  serve images in nextgen formats wordpress without plugin
  serve images in nextgen formats laravel
  convert png to next gen format
  properly size images
  webp express
  efficiently encode images
  webp cli
Admin Redaksi October 8, 2022 at 7:26 AM

template ini kok ringan banget jir.. cara optimasi gimana bang?
- samuelpasaribu.com October 8, 2022 at 11:14 AM
  
  Optimasi Template Blog menjadi SEO dan Fash Loading. Tentu saja itu semua tergantung pada template yang digunakan. Karena template yang berbeda juga memiliki pengaturan yang berbeda.