{"id":10925,"date":"2020-10-05T09:39:59","date_gmt":"2020-10-05T09:39:59","guid":{"rendered":"https:\/\/blog.hostinger.io\/co-id-tutorial\/?p=10925"},"modified":"2023-03-01T16:12:27","modified_gmt":"2023-03-01T09:12:27","slug":"apa-itu-webp","status":"publish","type":"post","link":"\/id\/tutorial\/apa-itu-webp\/","title":{"rendered":"Apa itu WebP? Definisi, kelebihan, dan kekurangannya"},"content":{"rendered":"<p><div class=\"protip\"><div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                   Apa itu WebP?\n                <\/p>\n            <\/div>\n            <p class=\"protip__content\">WebP adalah format gambar generasi baru yang dikembangkan oleh Google, menggunakan metode kompresi gambar lossy dan lossless sehingga ukuran file gambar menjadi lebih kecil tapi kualitasnya tetap dipertahankan sebaik mungkin.<\/p><\/div>\n\n\n\n<\/p><p class=\"wp-block-paragraph\">Banyak website kini mulai menggunakan <a href=\"\/id\/tutorial\/format-gambar\/\">format gambar<\/a> baru yang disebut WebP.&nbsp;Tapi, masih banyak yang belum betul-betul memahami tentang apa itu WebP, serta kelebihan dan kekurangannya dibandingkan dengan format gambar lainnya.<\/p><p class=\"wp-block-paragraph\">Jadi, WebP adalah format gambar yang dikembangkan oleh Google setelah mereka mengakuisisi On2 Technologies. Berdasarkan codec video VP8, format WebP menjadikan gambar lebih HD dan jelas, dengan ukuran yang lebih kecil daripada PNG atau JPEG.<\/p><p class=\"wp-block-paragraph\">WebP menggabungkan dan meningkatkan kualitas terbaik format JPEG dan PNG dengan menyediakan kompresi <a href=\"\/id\/tutorial\/lossy-vs-lossless\/\">lossy dan lossless<\/a> tingkat lanjut.<\/p><p class=\"wp-block-paragraph\">Mengoptimalkan ukuran gambar adalah langkah yang penting untuk meningkatkan performa website. Nah, format WebP cocok untuk tujuan ini, tanpa harus mengorbankan kualitas gambar sehingga layak dipertimbangkan bagi Anda yang memiliki website.<\/p><p class=\"wp-block-paragraph\">Dalam artikel ini, Anda akan mempelajari apa itu WebP, serta kelebihan dan kekurangannya. Kami juga akan membahas cara menggunakan WebP di WordPress dan cara menyimpan file WebP ke komputer Anda. Mari mulai!<\/p><p class=\"has-text-align-center wp-block-paragraph\"><a href=\"https:\/\/assets.hostinger.com\/content\/ID-Web-Development-Glossary-for-Beginners.pdf\" target=\"_blank\" rel=\"noopener\">Download Istilah-Istilah Web Development untuk Pemula<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-kelebihan-webp\">Kelebihan WebP<\/h2><p class=\"wp-block-paragraph\">Ada empat keuntungan untuk menggunakan gambar WebP:<\/p><ul class=\"wp-block-list\">\n<li><strong>Meningkatkan performa website.<\/strong> Format WebP lebih ringan dibandingkan dengan JPEG dan PNG. Ukuran file yang lebih kecil akan meningkatkan kecepatan loading website.<\/li>\n\n\n\n<li><strong>Menghemat lebih banyak bandwidth.<\/strong> Bandwidth adalah kecepatan transfer data dari server Anda ke pengguna akhir dalam jangka waktu tertentu. WebP bisa menghemat bandwidth, sehingga website bisa menyajikan lebih banyak konten. Ini sangat penting untuk website yang memuat banyak gambar, seperti&nbsp;<a href=\"\/id\/tutorial\/blog-makanan\/\">blog&nbsp;makanan<\/a>,&nbsp;<a href=\"\/id\/tutorial\/cara-membuat-blog-travel\/\">perjalanan<\/a>, atau&nbsp;<a href=\"\/id\/tutorial\/website-fotografi\/\">website fotografi<\/a>.<\/li>\n\n\n\n<li><strong>Memaksimalkan upaya SEO<\/strong>.&nbsp;Kecepatan halaman yang meningkat karena gambar yang lebih ringan akan secara positif memengaruhi peringkat website di mesin pencari seperti Google.<\/li>\n\n\n\n<li><strong>Kualitas gambar lebih tinggi<\/strong>.&nbsp;Anda tidak perlu mengorbankan kualitas gambar untuk mendapatkan kecepatan loading yang optimal.&nbsp;Dengan WebP, Anda bisa menyajikan gambar HD, sekaligus meningkatkan pengalaman pengguna website.<\/li>\n\n\n\n<li><strong>Bisa menampilkan lebih banyak jenis gambar.&nbsp;<\/strong>WebP mendukung gambar transparan dan animasi.<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Untuk menjelaskan lebih lanjut tentang kelebihan WebP dibandingkan dengan format lain seperti JPEG dan PNG, mari lihat perbandingan keduanya.<\/p><p class=\"wp-block-paragraph\"><strong>JPEG (atau JPG)<\/strong>&nbsp;sangat baik untuk gambar yang mengandung banyak warna, dan paling cocok untuk foto yang tidak bergerak.&nbsp;Tapi, file gambar JPEG menggunakan kompresi <strong>lossy<\/strong>, yang berarti kualitasnya akan menurun saat disimpan ulang atau diedit.&nbsp;Kelemahan lainnya adalah, JPG tidak mendukung transparansi atau animasi.<\/p><p class=\"wp-block-paragraph\">File <strong>PNG<\/strong> sangat baik untuk mempertahankan kualitas gambar karena termasuk kompresi <strong>lossless<\/strong>. Format ini cocok untuk gambar yang memiliki banyak piksel, seperti infografis yang mengandung banyak teks.&nbsp;PNG juga mendukung transparansi, sehingga cocok untuk elemen dan logo desain web.&nbsp;Sayangnya, ukuran file PNG biasanya lebih besar dan tidak mendukung animasi.<\/p><p class=\"wp-block-paragraph\">Di sisi lain, <strong>WebP<\/strong> adalah yang terbaik dalam hal kualitas dibandingkan dengan JPG atau PNG. Lebih kerennya lagi, ukuran file WebP <a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webp_study\" target=\"_blank\" rel=\"noreferrer noopener\">rata-rata lebih kecil sekitar 25-34%<\/a>, dengan indeks kualitas SSIM yang setara dengan PNG atau JPEG.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"903\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/webp-jpeg.png\/public\" alt=\"\" class=\"wp-image-17816\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/webp-jpeg.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/webp-jpeg.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/webp-jpeg.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/webp-jpeg.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Coba lihat contoh gambar dari&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/webp\/gallery1\" target=\"_blank\" rel=\"noreferrer noopener\">galeri WebP<\/a> Google di atas.&nbsp;Website tersebut membandingkan gambar JPEG dan WebP yang memiliki kualitas tidak beda jauh.<\/p><p class=\"wp-block-paragraph\">Klik setiap gambar di website tersebut dan bandingkan yang Anda lihat.&nbsp;Kualitas antara gambar JPEG di sebelah kiri dan gambar WebP di sebelah kanan terlihat tidak begitu berbeda.&nbsp;Tapi, ukuran file WebP secara signifikan lebih kecil dibandingkan dengan file JPEG.<\/p><h2 class=\"wp-block-heading\" id=\"h-kekurangan-webp\">Kekurangan WebP<\/h2><p class=\"wp-block-paragraph\">Meskipun ada banyak manfaat untuk menggunakan format WebP, format ini juga masih memiliki beberapa kekurangan yang perlu Anda ketahui.&nbsp;Pertama, kami akan membahas software untuk menampilkannya, terutama web browser.<\/p><p class=\"wp-block-paragraph\">Meskipun dukungan WebP pada sejumlah web browser utama kini semakin luas, beberapa browser masih tidak mendukung jenis file ini.<\/p><p class=\"wp-block-paragraph\">Web browser populer seperti <strong>Google Chrome<\/strong>, <strong>Mozilla Firefox<\/strong>,&nbsp;<strong>Opera<\/strong>, dan&nbsp;<strong>Microsoft Edge<\/strong>&nbsp;sudah mendukung format WebP selama bertahun-tahun.&nbsp;Baru-baru ini, <strong>Safari<\/strong> akhirnya&nbsp;juga <a href=\"https:\/\/developer.apple.com\/documentation\/safari-release-notes\/safari-14-release-notes\" target=\"_blank\" rel=\"noreferrer noopener\">menambahkan dukungan WebP<\/a>.<\/p><p class=\"wp-block-paragraph\">Dengan melihat tren saat ini, sepertinya bisa dipastikan bahwa browser lain yang belum mendukung WebP pada akhirnya juga akan turut serta, jadi jangan ragu untuk <a href=\"https:\/\/caniuse.com\/?search=webp\" target=\"_blank\" rel=\"noreferrer noopener\">mengikuti<\/a> perkembangannya.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"485\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/dukungan-webp.png\/public\" alt=\"\" class=\"wp-image-17817\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/dukungan-webp.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/dukungan-webp.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/dukungan-webp.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/dukungan-webp.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Nah, untuk software selain web browser, masih belum begitu banyak yang mendukung format WebP. Beberapa image viewer dan tool editing masih belum bisa membuka file WebP. Contohnya,&nbsp;<a href=\"https:\/\/www.photoshop.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Photoshop<\/a>&nbsp;tidak mendukungnya secara default.<\/p><p class=\"wp-block-paragraph\">Untuk mengedit file WebP di Adobe Photoshop, Anda harus menginstal plugin&nbsp;<a href=\"https:\/\/developers.google.com\/speed\/webp\/docs\/webpshop\" target=\"_blank\" rel=\"noreferrer noopener\">WebPShop<\/a>&nbsp;lebih dulu.<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-menggunakan-webp-di-wordpress\">Cara Menggunakan WebP di WordPress<\/h2><p class=\"wp-block-paragraph\">WordPress mulai mendukung format WebP sejak versi&nbsp;WordPress 5.8&nbsp;untuk memungkinkan Anda mengupload gambar berformat WebP ke media library.<\/p><p class=\"wp-block-paragraph\">Caranya, buka <strong>Media<\/strong> -&gt; <strong>Add New<\/strong>&nbsp;lalu pilih file WebP yang akan diupload. Setelah menambahkan gambar ke media library, periksa apakah file tersebut bisa dibuka tanpa masalah. Anda juga bisa mengupload gambar saat menulis postingan atau mengedit halaman.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"738\" height=\"419\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/gambar-webp-di-wordpress.png\/public\" alt=\"\" class=\"wp-image-17818\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/gambar-webp-di-wordpress.png\/w=738,fit=scale-down 738w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/gambar-webp-di-wordpress.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/gambar-webp-di-wordpress.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 738px) 100vw, 738px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Akan tetapi, dukungan WebP WordPress tidak otomatis mengubah format gambar yang ada di media library menjadi WebP.&nbsp;Untuk melakukannya, gunakan plugin optimasi gambar agar gambar dikonversi menjadi WebP saat ditampilkan di website Anda.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"395\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-shortpixel.png\/public\" alt=\"\" class=\"wp-image-17819\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-shortpixel.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-shortpixel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-shortpixel.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-shortpixel.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\"><a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener\">ShortPixel<\/a>&nbsp;adalah plugin kompresi gambar freemium untuk WordPress.&nbsp;Setelah diinstal, plugin ini bisa mengonversi gambar yang sudah diupload dan gambar berikutnya di library Anda menjadi WebP.<\/p><p class=\"wp-block-paragraph\">Plugin ini memanfaatkan cloud dan&nbsp;<a href=\"\/id\/tutorial\/apa-itu-cdn\/\">jaringan pengiriman konten<\/a>&nbsp;(CDN) untuk menyimpan dan mentransfer gambar yang dioptimasi, memungkinkan Anda menghemat storage dan bandwidth secara lebih maksimal.<\/p><p class=\"wp-block-paragraph\">Selain konversi WebP, ShortPixel juga menawarkan fitur optimasi gambar lainnya yang cukup berguna, seperti <a href=\"https:\/\/wordpress.org\/plugins\/wp-retina-2x\/\" target=\"_blank\" rel=\"noreferrer noopener\">WP Retina 2x<\/a> dan&nbsp;kompatibilitas&nbsp;<a href=\"https:\/\/www.cloudflare.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">CloudFlare<\/a>.&nbsp;Dukungan tersedia langsung dari developer.<\/p><p class=\"wp-block-paragraph\">Paket gratis ShortPixel memungkinkan Anda mengompresi hingga <strong>100 gambar\/bulan<\/strong>. Kalau ada banyak gambar di website Anda, pertimbangkan untuk upgrade ke salah satu&nbsp;<a href=\"https:\/\/shortpixel.com\/pricing\" target=\"_blank\" rel=\"noreferrer noopener\">paket premiumnya<\/a>. Tersedia pilihan untuk membeli paket bulanan atau kredit satu kali.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"370\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-optimole.png\/public\" alt=\"\" class=\"wp-image-17820\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-optimole.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-optimole.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-optimole.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/plugin-optimole.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><p class=\"wp-block-paragraph\">Plugin lain yang fungsinya serupa adalah <a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noreferrer noopener\">Optimole<\/a>. Dengan paket gratis, tidak&nbsp;<strong>ada batasan<\/strong> jumlah gambar yang bisa Anda optimasi, asalkan jumlah kunjungan website Anda <strong>kurang dari 5.000\/bulan<\/strong>. Kalau lebih dari itu, pertimbangkan untuk membeli salah satu&nbsp;<a href=\"https:\/\/optimole.com\/pricing\/\" target=\"_blank\" rel=\"noreferrer noopener\">paket premiumnya<\/a>.<\/p><p class=\"wp-block-paragraph\">Atau, kalau ingin cara manual, gunakan <a href=\"https:\/\/developer.wordpress.com\/docs\/photon\/api\/\" target=\"_blank\" rel=\"noreferrer noopener\">Photon API<\/a>. Fungsi <a href=\"\/id\/tutorial\/api-adalah\/\">API<\/a> ini adalah mengubah gambar JPEG dan PNG menjadi format file apa pun yang Anda inginkan, termasuk WebP.&nbsp;Tapi, Anda hanya bisa memanfaatkannya kalau menggunakan <a href=\"https:\/\/wordpress.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">WordPress.com<\/a>, atau kalau website WordPress self-hosted Anda terhubung ke&nbsp;<a href=\"https:\/\/jetpack.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Jetpack<\/a>.<\/p><h2 class=\"wp-block-heading\" id=\"h-cara-menyimpan-webp-sebagai-jpeg-atau-png\">Cara Menyimpan WebP sebagai JPEG atau PNG<\/h2><p class=\"wp-block-paragraph\">Meskipun WebP memiliki lebih banyak keunggulan daripada PNG dan JPEG, ada beberapa situasi yang mungkin mengharuskan Anda untuk menyimpannya sebagai JPEG atau PNG. Misalnya, kalau software grafis yang Anda gunakan tidak mendukung WebP.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/id\/\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29634\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2023\/02\/ID-Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><p class=\"wp-block-paragraph\">Berikut beberapa cara menyimpan gambar WebP sebagai JPEG atau PNG yang bisa Anda coba:<\/p><ul class=\"wp-block-list\">\n<li><strong>Gunakan browser lain<\/strong>.&nbsp;Buka halaman web yang memuat gambar WebP di browser yang tidak mendukung WebP. Nantinya, browser akan menampilkan versi JPEG atau PNG gambar tersebut, dan Anda bisa menyimpannya seperti biasa.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/menyimpan-gambar.png\/public\" alt=\"\" class=\"wp-image-17821\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/menyimpan-gambar.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/menyimpan-gambar.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/menyimpan-gambar.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/menyimpan-gambar.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Gunakan Microsoft Paint<\/strong>.&nbsp;Kalau menggunakan Windows, simpan gambar WebP lalu buka di Microsoft Paint. Buka <strong>File<\/strong> -&gt; <strong>Save as<\/strong>, kemudian pilih format pilihan Anda.<\/li>\n<\/ul><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"1024\" height=\"782\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/format-gambar-di-paint.png\/public\" alt=\"\" class=\"wp-image-17822\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/format-gambar-di-paint.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/format-gambar-di-paint.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/format-gambar-di-paint.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/37\/2022\/04\/format-gambar-di-paint.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div><ul class=\"wp-block-list\">\n<li><strong>Gunakan tool konversi gambar online.&nbsp;<\/strong>Simpan gambar WebP ke komputer Anda dan ubah secara online menggunakan tool seperti&nbsp;<a href=\"https:\/\/cloudconvert.com\/webp-converter\" target=\"_blank\" rel=\"noreferrer noopener\">CloudConvert<\/a>.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-kesimpulan\">Kesimpulan<\/h2><p class=\"wp-block-paragraph\">WebP adalah format gambar generasi baru yang memiliki kualitas lebih baik daripada format gambar versi lama, seperti JPEG dan PNG. Format file ini menawarkan teknologi kompresi canggih yang bisa mempertahankan kualitas gambar, tapi ukuran filenya tetap kecil.<\/p><p class=\"wp-block-paragraph\">Nah, melalui artikel ini, kami juga sudah menjelaskan cara menangani format WebP,&nbsp;seperti cara menggunakan WebP di WordPress dan cara menyimpan WebP sebagai JPEG atau PNG.<\/p><p class=\"wp-block-paragraph\">Semoga artikel ini bisa membantu Anda memahami WebP secara lebih jelas dan mengatasi masalah terkait format ini. Terima kasih sudah membaca!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Banyak website kini mulai menggunakan format gambar baru yang disebut WebP.&nbsp;Tapi, masih banyak yang belum betul-betul memahami tentang apa itu WebP, serta kelebihan dan kekurangannya dibandingkan dengan format gambar lainnya. Jadi, WebP adalah format gambar yang dikembangkan oleh Google setelah mereka mengakuisisi On2 Technologies. Berdasarkan codec video VP8, format WebP menjadikan gambar lebih HD dan [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/id\/tutorial\/apa-itu-webp\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":190,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Apa Itu WebP? Definisi, Kelebihan, dan Kekurangannya","rank_math_description":"WebP adalah format gambar baru yang kini banyak digunakan di website atau media online. Yuk, cari tahu apa itu WebP di artikel ini!","rank_math_focus_keyword":"apa itu webp, webp adalah, webp format, google webp","footnotes":""},"categories":[9532,9479],"tags":[9321,5538,9318,9319,9320,9323,9322],"class_list":["post-10925","post","type-post","status-publish","format-standard","hentry","category-optimasi-website","category-website","tag-google-webp","tag-jpeg","tag-jpg","tag-png","tag-webp","tag-webp-adalah","tag-webp-format"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-webp\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/webp\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/webp\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-es-webp\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/apa-itu-webp\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/webp\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/webp\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-webp\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-webp\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-webp\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-webp\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-webp\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-es-webp\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-es-webp\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-es-webp\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/webp\/","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/10925","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/users\/190"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/comments?post=10925"}],"version-history":[{"count":8,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/10925\/revisions"}],"predecessor-version":[{"id":29728,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/posts\/10925\/revisions\/29728"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/media?parent=10925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/categories?post=10925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/id\/tutorial\/wp-json\/wp\/v2\/tags?post=10925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}