Optimalisasi gambar dengan webp

Kami telah membuat beberapa artikel tentang pengoptimalan gambar jpegoptim, jpegtran, optipng, pngcrush, dan ImageMagick. Hari ini, Kami ingin menjelaskan pengoptimalan gambar dengan webp.

Minifikasi dan kompresi telah lama menjadi hal yang cukup standar untuk mengoptimalkan kode halaman web. Semua sumber daya web populer mengoptimalkan gambar, menggunakan CSS yang sama bila memungkinkan, dan memilih format gambar yang tepat. Tapi ini tidak cukup. Statistik Arsip HTTP menunjukkan bahwa gambar menempati sekitar 64% dari ukuran halaman web. Standar WebP baru hadir untuk membantu menggantikan JPEG dan PNG.

Secara singkat tentang WebP

Format ini muncul kembali pada tahun 2010 dan sejak itu telah dikembangkan oleh Google. WebP didasarkan pada algoritma kompresi untuk keyframe dari codec video VP8, dengan atau tanpa kehilangan, dan dikemas dalam wadah berdasarkan RIFF. Gambar lossless WebP rata-rata 26% lebih kecil dibandingkan PNG, dan gambar lossy WebP 25-34% lebih kecil dibandingkan JPEG dengan indeks SSIM yang sama. Format baru ini juga mendukung transparansi (dikenal sebagai saluran alfa).

Prinsip operasi

Dalam kompresi lossy, WebP menggunakan pengkodean prediktif, di mana nilai blok piksel tetangga digunakan untuk memprediksi nilai blok piksel yang diinginkan, dan kemudian perbedaannya dikodekan.

Kompresi lossless menggunakan fragmen gambar yang terkenal untuk merekonstruksi piksel secara akurat. Palet lokal juga dapat digunakan jika tidak ada algoritma yang cocok untuk Anda.

Keuntungan dan kerugian

Di belakang:

• ukuran gambar lebih kecil;
• algoritma kompresi lanjutan;
• kualitas gambar tinggi;
• dukungan untuk transparansi

Melawan:

• prevalensi buruk;
• “Plastisitas” dalam kompresi dengan kerugian;
• warna dalam piksel dan grafik komputer lainnya mungkin hilang.

WebP sudah didukung di Chrome, Opera, dan browser Android standar, dan dengan bantuan perpustakaan WebPJS, dapat ditampilkan di semua browser populer (di IE 6 dan lebih tinggi menggunakan Flash). Selain itu, perpustakaan ringan encoding dan decoding libwebp, utilitas baris perintah untuk encoding dan decoding WebP, serta alat untuk melihat, multiplexing, dan menganimasikan gambar dalam format ini telah dikembangkan.

Menginstal cwebp

Cwebp memiliki binari Linux yang telah dikompilasi sebelumnya. Jadi, penginstalan mudah untuk diunduh dan dibongkar:

# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz
# tar zxf libwebp-1.0.3-linux-x86-64.tar.gz 
# cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/
# cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/

Penggunaan cwebp

Utilitas cwebp digunakan untuk mengkonversi dari JPEG, PNG, dan TIFF, dan dwebp digunakan untuk decoding. Konversi dimulai dengan perintah sederhana (dari direktori utilitas):

# cwebp input.png -q 80 -o output.webp

Dengan prinsip yang sama, decoding dapat dimulai. Ada banyak opsi dan parameter tambahan, termasuk untuk memeriksa encoding.

Penerapan WebP

Jadi, Anda tertarik dengan format baru, Anda melakukan semua pengujian, melihat statistik lagi, dan memastikan bahwa Chrome masih menjadi peramban web paling populer. Apa selanjutnya? Selanjutnya, Anda perlu membuat salinan semua gambar di WebP (Anda dapat menulis skrip sederhana untuk mengonversi semua file), lalu periksa pengguna situs dan berikan gambar ringkas, jika browser mereka mendukung WebP.

Artinya, Anda dapat membuat skrip Anda sendiri yang akan memeriksa browser klien untuk dukungan format, yang kemudian akan keluar dari server web, atau sepenuhnya menetapkan tugas ini ke server web. Opsi kedua menurut kami lebih logis.

Negosiasi menggunakan header Terima

Browser meneruskan header Terima sebagai:

di Opera:

Accept: text / html, application / xml; q = 0.9, application / xhtml + xml,
image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1

di Chrome:

Accept: image / webp, * / *; q = 0.8

Mengetahui hal ini, Anda dapat mengonfigurasi server web untuk mengirimkan WebP secara otomatis. Sebagai contoh, kami menggunakan Nginx, di file konfigurasi yang Anda perlu menambahkan sesuatu seperti ini:

location / {

  if ($http_accept ~* "webp")    { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local  "true"; }

  if ($webp_local = "true") {
    add_header Vary Accept;
  }

  # if the client supports WebP, then upload the file
  if ($webp_accept = "true") {
    rewrite (.*) $1.webp break;
  }
}

Konfigurasi Apache akan serupa. Jika dukungan WebP tidak ditemukan di Terima, maka file biasa akan ditransfer. Nah, jika Nginx digunakan sebagai proxy untuk caching statics, maka konfigurasinya akan berbeda:

server {
  location / {
   
    if ($http_accept ~* "webp") { set $webp T; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp;

    proxy_pass http://backend;
    proxy_cache my-cache;
  }
}

Kesimpulan

Format gambar WebP akan secara signifikan mengurangi ukuran halaman web, tetapi mengingat dukungannya yang terbatas, Anda harus mengonfigurasi server web tambahan dan berisi salinan semua gambar dalam beberapa format.