Pengenalan format WebP

WebP adalah format gambar baru yang dikembangkan Google. Format ini mendukung kompresi lossy, kompresi lossless, dan transparansi, dengan ukuran berkas terkompresi yang lebih kecil daripada JPEG, PNG, dan format lainnya. Karena itu, WebP dapat menghemat bandwidth, mengurangi waktu pemuatan halaman, dan menghemat kuota data pengguna.

Aplikasi Android dan iOS dapat dengan mudah mendukung format WebP cukup dengan menyertakan pustaka dekoder yang disediakan Google. Namun, dukungan WebP di web belum begitu luas, menurut Data dari Can I Use，saat ini hanya browser Chrome, Opera, serta WebView Android yang mendukung WebP. Namun, dengan begitu banyak keunggulan gambar WebP, bisakah kita menggunakannya di halaman web？Bisa. Artikel ini akan membahas persoalan tersebut.

Mengubah gambar yang sudah ada ke format WebP

Untuk menggunakan format WebP, kamu perlu membuat versi WebP dari semua gambar yang digunakan di situsmu. Jika kamu menggunakan penyedia layanan CDN, mereka biasanya menyediakan opsi konversi ke format WebP. Contohnya, Upyun:

Setelah menambahkan konfigurasi ini, kita dapat menggunakan versi sumber daya berformat WebP dengan menambahkan akhiran yang sesuai pada URL gambar.

Anda juga dapat menggunakan plugin webpack dan gulp untuk mengonversi format gambar secara massal. Hal itu tidak akan dibahas lebih lanjut di sini.

Menggunakan format WebP di browser

Karena tidak semua peramban mendukung format WebP, ada dua pendekatan: menggunakan format WebP hanya pada peramban yang mendukungnya; atau membuat peramban yang belum mendukung WebP dapat mendukungnya.

Cara pertama: <picture>Tag

<picture>merupakan tag baru dalam HTML5, mirip dengan <video>Ia juga dapat menentukan sumber daya dalam beberapa format, lalu browser memilih format yang didukungnya untuk dimuat.

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>

Jika peramban mendukung format WebP, maka akan memuat image.webp, jika tidak, akan memuat image.jpg。

Sekalipun peramban tidak mendukung<picture>tag, gambar tetap akan ditampilkan secara normal, hanya saja CSS mungkin tidak dapat memilihnya dengan benar picture elemen. Misalnya, di IE8, CSS berikut tidak akan berfungsi：

.picture img {  width: 100px;  height: 100px;
}

Namun, gaya gambar dapat ditulis seperti ini：

.image {  width: 100px;  height: 100px;
}

Meskipun peramban menggunakan gambar berformat WebP, pada akhirnya tetap akan diterapkan img Gaya elemen.

Namun, asalkan menggunakan html5shiv, sehingga peramban lama mendukung tag ini dan selektor CSS dapat digunakan secara normal.

Metode ini paling sederhana, tetapi tidak dapat diterapkan pada gambar dalam CSS（seperti latar belakang）.

Cara kedua：menggunakan JS untuk mengganti URL gambar。

Banyak halaman kita sering menggunakan “pemuatan lambat” gambar—biasanya dengan menempatkan URL gambar di img ke dalam atribut kustom sebuah elemen, lalu gunakan JS untuk menetapkan URL pada waktu yang tepat ke src atribut. Dengan prinsip serupa, berdasarkan apakah peramban mendukung format WebP, kita dapat memberikan kepada img memberikan yang berbeda kepada elemen src nilai.

Pertama, kita perlu menggunakan JS untuk memeriksa apakah peramban mendukung format WebP. Caranya adalah memberikan gambar berformat WebP kepada peramban dan melihat apakah peramban dapat merendernya dengan benar. Metode ini bersifat asinkron, sehingga operasi selanjutnya perlu ditulis dalam fungsi callback. Kita dapat menyimpan hasilnya di localStorage di dalamnya, sehingga nantinya tidak perlu diperiksa lagi.

function checkWebp(callback) {  var img = new Image();
  img.onload = function () {    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}

Kemudian gunakan kode berikut untuk mengganti src yang sesuai berdasarkan dukungan terhadap WebP.

function showImage(useWebp){  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){    var src = i.attributes['data-src'].value;    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

Kelebihan cara ini adalah dapat dipadukan dengan fungsi pemuatan malas yang sudah ada. Selain itu, dengan JS, kita juga dapat menangani gambar dalam CSS（seperti gambar latar, dan sebagainya）。

Cara ketiga：menggunakan JS untuk mendekode gambar WebP

Karena dekoder WebP bersifat sumber terbuka, bisakah ia diimplementasikan dengan JS? Tentu saja bisa，Ada yang bahkan menulis dekoder WebP menggunakan JS。Dengan menyertakan pustaka JS ini, semua gambar WebP didekode menggunakan JS lalu dikonversi menjadi base64，lalu ganti URL aslinya, sehingga peramban yang semula tidak mendukung WebP dapat menampilkan WebP dengan benar. Cara menggunakan pustaka ini sangat sederhana, cukup baca petunjuk di halaman webnya.

Kekurangan metode ini adalah karena JS harus mendekode gambar WebP, URL dalam src perlu diminta lagi secara asinkron di sini (namun, karena gambar itu sendiri telah diunduh sebelumnya, cache langsung digunakan); selain itu, dekode oleh JS relatif lambat dan memengaruhi kinerja, sehingga mungkin perlu waktu sebelum gambar dapat ditampilkan.

Itulah beberapa cara menggunakan gambar WebP di peramban, Anda dapat memilih sesuai kebutuhan nyata. Dalam praktik kami, setelah menggunakan format WebP, ukuran gambar umumnya berkurang lebih dari 1/3, sehingga pemuatan menjadi lebih cepat sekaligus menghemat kuota data pengguna, kami sangat menyarankan untuk mulai menggunakan format ini sekarang.