-->
MqZ6MWB9MGBcNqBdMGBaNaJ6M8IeyCoFADMlNWZ=
6074645612605633477
Cara Menambahkan Gambar WebP di Halaman Blogspot atau AMP

Cara Menambahkan Gambar WebP di Halaman Blogspot atau AMP

Cara Menambahkan WebP di Blogspot atau Halaman Valid AMP
Cara Menambahkan WebP di Blogspot atau Halaman Valid AMP

Pada artikel kali ini, kita akan belajar cara menambahkan gambar WebP di Blogspot Anda yang sangat berguna di blog AMP. AMP memiliki fitur fallback yang perlu memasukkan WebP dan format gambar tradisional lainnya.

Struktur AMP secara otomatis akan beralih kembali ke format gambar tradisional jika browser tidak mendukung format WebP.

WebP adalah format gambar dengan kompresi lossy dan lossless. Ini diperkenalkan oleh On2 Technologies yang kemudian diakuisisi oleh Google. Ini juga merupakan proyek saudara untuk format wadah multimedia Web M.

Menurut Google [Sumber: Format gambar baru untuk Web]
Gambar lossless WebP berukuran 26% lebih kecil dibandingkan dengan PNG. Gambar lossy WebP berukuran 25-34% lebih kecil daripada gambar JPEG yang sebanding pada indeks kualitas SSIM yang setara.

WebP in Blogspot

Meskipun Blogger secara resmi tidak mendukung pengunggahan format gambar WebP, saya dapat memaksa Google untuk menafsirkan gambar sebagai WebP dengan sedikit perubahan pada URL saat ini.

Current URL 
https://1.bp.blogspot.com/-W9TYweGNZ84/XsDedWIBh0I/AAAAAAAADMo/2Rk-1ohfKygSmbGSqnpQn3c-pPjt0hqwQCK4BGAsYHg/d/blank-blogger-template.png
WebP URL
https://1.bp.blogspot.com/-W9TYweGNZ84/XsDedWIBh0I/AAAAAAAADMo/2Rk-1ohfKygSmbGSqnpQn3c-pPjt0hqwQCK4BGAsYHg/d-rw/blank-blogger-template.png

Cukup tambahkan -rw setelah d atau s600 atau tag serupa di atas.

Struktur lengkap gambar WebP dengan fallback akan menjadi seperti ini

<amp-img
  alt="bloginoobs"
  width="550"
  height="368"
  src="https://1.bp.blogspot.com/-W9TYweGNZ84/XsDedWIBh0I/AAAAAAAADMo/2Rk-1ohfKygSmbGSqnpQn3c-pPjt0hqwQCK4BGAsYHg/d-rw/blank-blogger-template.png"
  layout="responsive">
  <amp-img
    alt="bloginoobs"
    fallback
    width="550"
    height="368"
    src="https://1.bp.blogspot.com/-W9TYweGNZ84/XsDedWIBh0I/AAAAAAAADMo/2Rk-1ohfKygSmbGSqnpQn3c-pPjt0hqwQCK4BGAsYHg/d/blank-blogger-template.png"
    layout="responsive">
  </amp-img>
</amp-img>
Ubah URL dan tempel di dalam posting Anda.

Download Converter WebP

Ada alat resmi yang dapat digunakan untuk mengonversi format PNG, JPG ke WebP. Ini tersedia di halaman resmi.

Gunakan Tools : Convert img to amp-img

Apakah Layak Menambahkan WebP di Blogspot

Dalam hal dukungan, WebP tidak didukung oleh browser lama tetapi sebagian besar modern akan mendukung format WebP. Ketika saya mempertimbangkan kasus blogger, saya tidak dapat mengunggah gambar WebP secara langsung dan saya secara tidak langsung mengonversi gambar ke dalam format WebP.

DUKUNGAN WEBP LOSSY
  • Google Chrome (desktop) 17+
  • Google Chrome for Android version 25+
  • Microsoft Edge 18+
  • Firefox 65+
  • Opera 11.10+
  • Native web browser, Android 4.0+ (ICS)
Bisakah gambar WebP tumbuh lebih besar dari gambar sumbernya?
Ya, biasanya saat mengonversi dari format lossy ke WebP lossless atau sebaliknya. Hal ini terutama disebabkan oleh perbedaan ruang warna (YUV420 vs ARGB) dan konversi di antara keduanya.

Cukup uji dengan tautan Anda dengan PNG / JPG dan WebP dan bandingkan ukurannya saat menafsirkan gambar dengan teknik ini. Dalam kasus saya, format WebP untuk contoh di atas adalah 12Kb lebih besar dari format WebP.

Itu bisa jadi karena saya telah mengompresi gambar saya atau saya menggunakan gambar yang kurang berwarna. Saya akan merekomendasikan menggunakan WebP untuk mereka yang sudah memuat posting Anda dengan gambar besar atau berkualitas tinggi.

Kesimpulan

Saya harap artikel tentang Cara Menambahkan WebP di Blogspot atau Halaman AMP ini membantu Anda untuk lebih memahami tentang WebP. Jika Anda merasa ada yang kurang dalam artikel saya, beri tahu saya.

Anda dapat dengan bebas mengomentari keraguan dan pertanyaan Anda di bawah ini. Jika Anda menyukai artikel ini, silakan bagikan dengan teman-teman Anda. Terima Kasih!

1 comment

  1. Raihan Raaz
Tinggalkan komentar sesuai topik artikel. Komentar di luar topik tidak disarankan (terutama disertai link aktif).
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code code

© ‧ Tomy Tech ~ All rights reserved.