Pertanyaan Umum (FAQ)

Apa itu WebP? Mengapa saya harus menggunakannya?

WebP adalah metode kompresi lossy dan lossless yang dapat digunakan pada berbagai gambar fotografi, transparan, dan grafis yang ditemukan di web. Tingkat kompresi lossy dapat disesuaikan sehingga pengguna dapat memilih kompromi antara ukuran file dan kualitas gambar. WebP biasanya mencapai kompresi lebih tinggi 30% daripada JPEG dan JPEG 2000, tanpa kehilangan gambar (lihat Studi Perbandingan).

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

Browser web apa yang secara native mendukung WebP?

Webmaster yang tertarik untuk meningkatkan kinerja situs dapat dengan mudah membuat alternatif WebP yang telah dioptimalkan untuk gambar saat ini, dan yang ditargetkan ke browser yang mendukung WebP.

  • Dukungan lossy WebP
    • Google Chrome (desktop) 17+
    • Google Chrome untuk Android versi 25+
    • Microsoft Edge 18 dan yang lebih baru
    • Firefox 65+
    • Opera 11.10+
    • Browser web native, Android 4.0+ (ICS)
    • Safari 14+ (iOS 14+, macOS Big Sur+)
  • WebP lossy, lossless & dukungan alfa
    • Google Chrome (desktop) 23 atau yang lebih baru
    • Google Chrome untuk Android versi 25+
    • Microsoft Edge 18 dan yang lebih baru
    • Firefox 65+
    • Opera 12.10+
    • Browser web asli, Android 4.2+ (JB-MR1)
    • Bulan Pucat 26+
    • Safari 14+ (iOS 14+, macOS Big Sur+)
  • Dukungan Animasi WebP
    • Google Chrome (desktop dan Android) 32+
    • Microsoft Edge 18 dan yang lebih baru
    • Firefox 65+
    • Opera 19 atau yang lebih baru
    • Safari 14+ (iOS 14+, macOS Big Sur+)

Lihat juga:

Bagaimana cara mendeteksi dukungan browser untuk WebP?

Sebaiknya hanya tayangkan gambar WebP kepada klien yang dapat menampilkannya dengan benar, dan beralih kembali ke format lama untuk klien yang tidak bisa melakukannya. Untungnya ada beberapa teknik untuk mendeteksi dukungan WebP, baik pada sisi klien dan sisi server. Beberapa penyedia CDN menawarkan deteksi dukungan WebP sebagai bagian dari layanan mereka.

Negosiasi konten sisi server melalui header Terima

Umumnya klien web mengirim "Accept" header permintaan, yang menunjukkan format konten mana yang ingin mereka terima sebagai respons. Jika browser menunjukkan di awal bahwa browser akan "menerima" format image/webp, server web tahu bahwa ia dapat mengirim gambar WebP dengan aman, sehingga sangat menyederhanakan negosiasi konten. Lihat link berikut untuk informasi selengkapnya.

Modernizr

Modernizr adalah library JavaScript untuk mendeteksi HTML5 dan Dukungan fitur CSS3 di browser web. Cari properti Modernizr.webp, Modernizr.webp.lossless, Modernizr.webp.alpha, dan Modernizr.webp.animation.

Elemen <picture> HTML5

HTML5 mendukung elemen <picture>, yang memungkinkan Anda mencantumkan beberapa, target gambar alternatif dalam urutan prioritas, sehingga klien akan meminta gambar kandidat pertama yang dapat ditampilkan dengan benar. Lihat diskusi tentang HTML5 Rocks. Elemen <picture> merupakan didukung oleh lebih banyak browser setiap saat.

Di JavaScript Anda sendiri

Metode deteksi lainnya adalah mencoba mendekode gambar WebP yang sangat kecil yang menggunakan fitur tertentu, dan memeriksa keberhasilannya. Contoh:

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Perlu diketahui bahwa pemuatan gambar bersifat tidak memblokir dan asinkron. Ini berarti bahwa setiap kode yang bergantung pada dukungan WebP sebaiknya ditempatkan di callback .

Mengapa Google merilis WebP sebagai open source?

Kami sangat percaya dengan pentingnya model open source. Dengan WebP di {i>open source<i}, siapa pun dapat bekerja dengan format itu dan menyarankan perbaikan. Dengan input dan saran Anda, kami yakin WebP akan menjadi lebih berguna dalam bentuk grafik dari waktu ke waktu.

Bagaimana cara mengonversi file gambar pribadi saya ke WebP?

Anda dapat menggunakan utilitas command line WebP untuk mengonversi file gambar pribadi ke format WebP. Lihat Menggunakan WebP untuk detail selengkapnya.

Jika Anda memiliki banyak gambar untuk dikonversi, Anda dapat menggunakan {i>shell<i} platform Anda untuk menyederhanakan operasi. Misalnya, untuk mengonversi semua {i>file<i} jpeg dalam sebuah folder, coba hal berikut:

Windows:

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / macOS:

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

Bagaimana cara menilai sendiri kualitas gambar WebP?

Saat ini, Anda dapat melihat file WebP dengan mengonversinya ke dalam format umum yang menggunakan kompresi lossless, seperti PNG, dan kemudian melihat file PNG dalam browser atau penampil gambar apa pun. Untuk mengetahui sekilas kualitas WebP, lihat Galeri di situs ini untuk foto berdampingan perbandingan.

Bagaimana cara mendapatkan kode sumber?

Kode konverter tersedia di bagian download project open source WebP kami. Kode untuk decoder ringan dan spesifikasi VP8 aktif situs WebM. Lihat Halaman Penampung RIFF untuk penampung spesifikasi pendukung.

Berapa ukuran maksimum gambar WebP?

WebP kompatibel dengan bitstream dengan VP8 dan menggunakan lebar dan tinggi 14 bit. Dimensi piksel maksimum gambar WebP adalah 16383x16383.

Ruang warna apa yang didukung oleh format WebP?

Sesuai dengan bitstream VP8, WebP lossy bekerja secara eksklusif dengan 8-bit Y'CbCr 4:2:0 (sering disebut YUV420) format gambar. Lihat Bagian 2, "Format Overview" dari RFC 6386, Panduan Format dan Dekode Data VP8 untuk mengetahui detail selengkapnya.

lossless WebP berfungsi secara eksklusif dengan format RGBA. Lihat Spesifikasi WebP Lossless Bitstream.

Dapatkah 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 antaranya.

Ada tiga situasi yang umum terjadi:

  1. Jika gambar sumber dalam format ARGB lossless, downsampling spasial untuk YUV420 akan memperkenalkan warna baru yang lebih sulit untuk dikompresi daripada dengan yang asli. Situasi ini biasanya dapat terjadi ketika sumber dalam format PNG dengan sedikit warna: mengonversi ke WebP lossy (atau, ke JPEG lossy) akan berpotensi menghasilkan ukuran file yang lebih besar.
  2. Jika sumber dalam format lossy, gunakan kompresi WebP lossless untuk menangkap sifat lossy dari sumber biasanya akan mengakibatkan file yang lebih besar. Hal ini tidak berbeda dengan WebP, dan dapat terjadi saat mengonversi sumber JPEG ke format WebP atau PNG lossless.
  3. Jika sumber memiliki format lossy dan Anda mencoba mengompresinya sebagai WebP lossy dengan setelan kualitas yang lebih tinggi. Misalnya, mencoba mengonversi file JPEG yang disimpan dengan kualitas 80 ke file WebP dengan kualitas 95 biasanya akan menghasilkan file yang lebih besar, bahkan jika kedua format tersebut lossy. Menilai kualitas sumber sering kali tidak mungkin, jadi disarankan untuk menurunkan kualitas WebP target jika ukuran file secara konsisten lebih besar. Kemungkinan lain adalah menghindari penggunaan pengaturan kualitas, dan menargetkan ukuran file tertentu menggunakan opsi -size di alat cwebp, atau API yang setara. Misalnya, menargetkan 80% dari file asli mungkin akan lebih tangguh.

Perhatikan bahwa mengonversi sumber JPEG ke WebP lossy, atau sumber PNG ke lossless WebP tidak rentan terhadap kejutan ukuran file tersebut.

Apakah WebP mendukung tampilan progresif atau bertautan?

WebP tidak menawarkan refresh decoding progresif atau bertautan dalam JPEG atau arti PNG. Hal ini cenderung memberikan terlalu banyak tekanan pada CPU dan memori karena setiap peristiwa refresh melibatkan penerusan penuh melalui sistem dekompresi.

Rata-rata, mendekode gambar JPEG progresif setara dengan decoding baseline sebanyak 3 kali.

Selain itu, WebP menawarkan decoding inkremental, dengan semua input bitstream digunakan untuk mencoba dan menghasilkan baris sampel yang bisa ditampilkan sebagai sesegera mungkin. Cara ini menghemat memori, CPU, dan upaya penggambaran ulang sambil memberikan petunjuk visual tentang status download. Inkremental fitur decoding tersedia melalui API Decoding Lanjutan.

Bagaimana cara menggunakan binding Java libwebp di project Android saya?

WebP menyertakan dukungan untuk binding JNI ke encoder dan decoder sederhana antarmuka di direktori swig/.

Membuat library di Eclipse:

  1. Pastikan Anda memiliki Plugin ADT diinstal bersama dengan alat NDK dan jalur NDK Anda sudah diatur dengan benar (Preferensi > Android > NDK).
  2. Membuat project baru: File > Baru > Proyek > Android Project Aplikasi.
  3. Clone atau ekstrak libwebp ke folder bernama jni di project baru.
  4. Tambahkan swig/libwebp_java_wrap.c ke daftar LOCAL_SRC_FILES.
  5. Klik kanan project baru dan pilih Android Tools > Tambahkan Dukungan Native ... untuk menyertakan library dalam build Anda.

  6. Buka properti project, lalu buka C/C++ Build > Perilaku. Tambah ENABLE_SHARED=1 ke bagian Build (Incremental build) untuk membuat {i>libwebp<i} sebagai pustaka bersama.

    Catatan Menyetel NDK_TOOLCHAIN_VERSION=4.8 secara umum akan meningkat Performa build 32-bit.

  7. Tambahkan swig/libwebp.jar ke folder project libs/.

  8. Bangun project Anda. Tindakan ini akan membuat libs/<target-arch>/libwebp.so.

  9. Gunakan System.loadLibrary("webp") untuk memuat library saat runtime.

Perlu diperhatikan bahwa library dapat dibuat secara manual dengan ndk-build dan yang disertakan Android.mk. Dalam kasus tersebut, beberapa langkah yang dijelaskan di atas dapat digunakan kembali.

Bagaimana cara menggunakan libwebp dengan C#?

WebP dapat dibangun sebagai DLL yang mengekspor API libwebp. Fungsi-fungsi ini dapat kemudian diimpor di C#.

  1. Buatlah libwebp.dll. Ini akan menyetel WEBP_EXTERN dengan benar untuk mengekspor API fungsi-fungsi lainnya.

    libwebp> nmake /f Makefile.vc CFG=release-dynamic

  2. Tambahkan libwebp.dll ke project Anda dan impor fungsi yang diinginkan. Perhatikan jika Anda menggunakan API sederhana Anda harus memanggil WebPFree() untuk mengosongkan buffer yang ditampilkan.

    [DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPEncodeBGRA(IntPtr rgba, int width, int height, int stride,
                                 float quality_factor, out IntPtr output);
[DllImport("libwebp.dll", CallingConvention = CallingConvention.Cdecl)]
static extern int WebPFree(IntPtr p);

void Encode() {
  Bitmap source = new Bitmap("input.png");
  BitmapData data = source.LockBits(
      new Rectangle(0, 0, source.Width, source.Height),
      ImageLockMode.ReadOnly,
      PixelFormat.Format32bppArgb);
  IntPtr webp_data;
  const int size = WebPEncodeBGRA(data.Scan0,
                                  source.Width, source.Height, data.Stride,
                                  80, out webp_data);
  // ...
  WebPFree(webp_data);
}

Mengapa saya harus menggunakan WebP animasi?

Kelebihan WebP animasi dibandingkan GIF animasi

  1. WebP mendukung warna RGB 24-bit dengan saluran alfa 8-bit, dibandingkan dengan Warna 8-bit GIF dan alfa 1-bit.

  2. WebP mendukung kompresi lossy dan lossless; pada kenyataannya, satu animasi dapat menggabungkan frame lossy dan lossless. GIF hanya mendukung kompresi lossless. Teknik kompresi lossy WebP hingga gambar animasi yang dibuat dari video di dunia nyata, semakin populer gambar animasi.

  3. WebP memerlukan lebih sedikit byte daripada GIF1. GIF animasi yang dikonversi ke WebP lossy berukuran 64% lebih kecil, sedangkan lossless WebP 19% lebih kecil. Hal ini sangat penting di jaringan seluler.

  4. WebP membutuhkan lebih sedikit waktu untuk mendekode saat ada pencarian. Di beberapa Berkedip, men-scroll atau berganti tab dapat menyembunyikan dan menampilkan gambar, yang mengakibatkan animasi dijeda dan kemudian dilompati ke titik yang berbeda. Penggunaan CPU yang berlebihan yang menyebabkan animasi yang menurunkan frame juga bisa mengharuskan decoder animasinya. Dalam skenario ini, WebP animasi mengambil total 0,57x lebih waktu dekode2 sebagai GIF, sehingga menghasilkan lebih sedikit jank selama scrolling dan pemulihan yang lebih cepat dari lonjakan penggunaan CPU. Ini adalah karena dua keunggulan WebP dibandingkan GIF:

    • Gambar WebP menyimpan metadata apakah setiap frame berisi alfa, menghilangkan kebutuhan untuk memecahkan kode {i>frame<i} untuk membuat keputusan ini. Hal ini mengarah pada inferensi yang lebih akurat tentang frame sebelumnya, tergantung pada frame, sehingga mengurangi decoding yang tidak perlu dari {i>frame<i}.

    • Mirip seperti encoder video modern, encoder WebP secara heuris menambahkan frame utama dengan interval reguler (yang tidak dilakukan oleh sebagian besar encoder GIF). Hal ini secara dramatis meningkatkan pencarian dalam animasi panjang. Untuk memfasilitasi menyisipkan bingkai tersebut tanpa meningkatkan ukuran gambar secara signifikan, WebP menambahkan 'metode pencampuran' laporkan untuk setiap {i>frame<i} selain metode pemusnahan {i>frame<i} yang digunakan GIF. Cara ini memungkinkan keyframe menggambar seolah-olah seluruh gambar telah dihapus ke warna latar belakang tanpa memaksa {i>frame<i} sebelumnya menjadi {i>full-size<i}.

Kelemahan WebP animasi dibandingkan dengan GIF animasi

  1. Dengan tidak adanya pencarian, decoding garis lurus WebP lebih menggunakan CPU secara intensif daripada GIF. WebP lossy membutuhkan waktu dekode 2,2x lebih GIF, sedangkan WebP lossless membutuhkan 1,5x lebih besar.

  2. Dukungan WebP tidak seluas dukungan GIF, yang universal secara efektif.

  3. Menambahkan dukungan WebP ke browser meningkatkan jejak kode dan permukaan serangan. Di Blink, terdapat kira-kira 1.500 baris tambahan kode (termasuk library demux WebP dan gambar WebP sisi Blink decoder). Perhatikan bahwa masalah ini dapat dikurangi di masa mendatang jika WebP dan WebM berbagi kode decoding yang lebih umum, atau jika WebP kemampuan yang disebutkan dalam WebM.

Mengapa tidak hanya mendukung WebM di <img>?

Dukungan untuk format video dalam <img> mungkin merupakan pilihan jangka panjang . Namun, melakukannya sekarang, dengan tujuan yang dapat diisi oleh WebM di <img> peran WebP animasi yang diusulkan, bermasalah:

  1. Saat mendekode frame yang bergantung pada frame sebelumnya, WebM memerlukan Memori 50% lebih banyak daripada WebP animasi untuk menampung jumlah minimum frame sebelumnya3.

  2. Dukungan codec dan penampung video sangat bervariasi di berbagai browser dan perangkat. Untuk memfasilitasi transcoding konten otomatis (misalnya, untuk untuk menghemat bandwidth), browser perlu menambahkan header menunjukkan format yang didukung tag image mereka. Bahkan ini mungkin tidak memadai, karena jenis MIME seperti "video/webm" atau "video/mpeg" diam jangan menunjukkan dukungan codec (misalnya VP8 vs. VP9). Di sisi lain format WebP secara efektif dibekukan, dan jika vendor yang mengirimkan ia setuju untuk mengirimkan WebP animasi, perilaku WebP di semua UA harus konsisten; dan karena "image/webp" header terima adalah sudah digunakan untuk menunjukkan dukungan WebP, tidak ada perubahan header terima baru diperlukan.

  3. Stack video Chromium dioptimalkan untuk pemutaran yang lancar, dan menganggap hanya ada satu atau dua video yang diputar baik. Akibatnya, penerapannya agresif dalam menghabiskan sistem (thread, memori, dll.) untuk memaksimalkan kualitas pemutaran. Seperti tidak dapat diterapkan dengan baik pada banyak video yang dijalankan secara serentak dan perlu dirancang ulang agar sesuai untuk digunakan pada halaman web yang sarat gambar.

  4. Saat ini WebM tidak menggabungkan semua teknik kompresi dari WebP. Hasilnya, gambar ini melakukan kompresi jauh lebih baik dengan WebP dibandingkan dengan alternatifnya:

1 Untuk semua perbandingan antara GIF animasi dan WebP animasi, kami menggunakan korpus sekitar 7000 gambar animasi GIF yang diambil secara acak dari web. Gambar ini dikonversi ke WebP animasi menggunakan 'gif2webp' menggunakan setelan default (dibuat dari hierarki sumber libwebp per 10/08/2013). Bilangan komparatif adalah nilai rata-rata di gambar.

2 Waktu dekode dihitung menggunakan libwebp + ToT terbaru Berkedip per 08/10/2013 menggunakan alat tolok ukur. "Waktu dekode dengan mencari" dihitung sebagai "Dekodekan lima {i>frame<i} pertama, hapus {i>frame<i} {i>buffer cache<i}, mendekode lima {i>frame<i} berikutnya, dan seterusnya.

3 WebM menyimpan 4 frame referensi YUV dalam memori, dengan setiap frame menyimpan (lebar+96)*(tinggi+96) piksel. Untuk YUV 4:2:0, kita membutuhkan 4 byte per 6 piksel (atau 3/2 byte per piksel). Jadi, {i>reference frame <i}ini menggunakan 4*3/2*(width+96)*(height+96) byte. Di sisi lain, WebP akan hanya perlu menyediakan {i>frame<i} sebelumnya (dalam RGBA), yaitu 4*width*height byte.

4 Rendering WebP animasi memerlukan Google Chrome versi 32 ke atas