Percepat Situs Web Anda Dengan WebP

(Ini adalah posting bersponsor.) Luangkan cukup waktu untuk menjalankan situs web melalui PageSpeed ​​Insights dan Anda akan melihat bahwa Google memiliki keunggulan besar dengan format gambar tradisional seperti JPG, PNG, dan bahkan GIF. Juga seharusnya.

Bahkan jika Anda mengubah ukuran gambar ke spesifikasi yang tepat dari situs web Anda dan menjalankannya melalui kompresor, gambar tersebut masih dapat membebani kinerja dan meningkatkan penggunaan bandwidth. Lebih buruk lagi, semua manipulasi gambar itu dapat membahayakan kualitas yang dihasilkan.

Mempertimbangkan betapa pentingnya gambar untuk desain web, ini bukanlah elemen yang dapat kita singkirkan dengan mudah dan kita juga tidak dapat mengambil jalan pintas untuk mengoptimalkannya. Jadi, apa solusinya?

Inilah yang disarankan Google:

Bertahun-tahun yang lalu, Google bertujuan untuk menghentikan masalah ini dengan membuat format gambar generasi berikutnya yang disebut WebP. Anda dapat melihat di tangkapan layar ini dari PageSpeed ​​Insights bahwa Google merekomendasikan penggunaan WebP dan format generasi berikutnya lainnya untuk secara signifikan mengurangi ukuran gambar Anda sambil mempertahankan kualitasnya.

Dan jika 0,75 detik tidak tampak seperti banyak untuk Anda (setidaknya dalam contoh ini), itu bisa membuat perbedaan besar dalam kehidupan pengunjung Anda, orang-orang yang duduk di sana bertanya-tanya berapa lama terlalu lama untuk menunggu. Hanya kurang satu detik memuat dapat membuat perbedaan besar pada tingkat konversi Anda.

Tetapi apakah WebP merupakan solusi terbaik untuk masalah ini? Hari ini, kita akan memeriksa:

• Apa itu WebP,
• Apa keuntungan menggunakannya,
• Cara kerjanya dengan browser dan perangkat,
• Apa tantangan dalam mengonversi dan menghadirkan WebP, dan
• Cara menyederhanakan konversi dan pengiriman dengan KeyCDN.

Apa itu WebP?

Google mengembangkan WebP pada tahun 2010 setelah mengakuisisi perusahaan bernama On2 Technologies. On2 telah mengerjakan sejumlah teknologi kompresi video, yang akhirnya menjadi dasar untuk format audiovisual baru Google WebM dan format gambar generasi berikutnya WebP.

Awalnya, WebP menggunakan kompresi lossy dalam upaya membuat gambar yang lebih kecil namun tetap berkualitas tinggi untuk web.

Jika 0,75 detik sepertinya tidak banyak bagi Anda, itu bisa membuat perbedaan besar dalam kehidupan pengunjung Anda, orang-orang yang duduk di sana bertanya-tanya berapa lama terlalu lama untuk menunggu.

“

Kompresi Rugi Untuk WebP

Kompresi lossy adalah bentuk kompresi yang digunakan untuk sangat mengurangi ukuran file JPG dan GIF. Untuk mewujudkannya, beberapa data (piksel) dari file perlu dikeluarkan atau "hilang". Ini, pada gilirannya, menyebabkan beberapa penurunan kualitas gambar, meskipun tidak selalu terlihat.

WebP memasuki gambar dengan penggunaan kompresi lossy yang jauh lebih efisien (yang akan saya jelaskan di bawah) dan menjadi penerus JPG yang sangat dibutuhkan.

Anda dapat melihat demonstrasi hebat tentang perbedaan ini karena KeyCDN membandingkan perbedaan ukuran file dari JPG terkompresi vs. WebP:

Perhatikan betapa signifikannya perbedaan ini dalam hal ukuran file, bahkan setelah JPG telah dikompresi ke kualitas yang sebanding. Seperti yang dijelaskan Adrian James di sini, Anda harus berhati-hati dengan kompresi WebP.

“Pengaturan kompresi tidak cocok satu-ke-satu dengan JPEG. Jangan berharap JPEG berkualitas 50% cocok dengan WebP berkualitas 50%. Kualitas turun cukup tajam pada skala WebP, jadi mulailah dengan kualitas tinggi dan terus turun.”

Mempertimbangkan seberapa banyak ukuran file yang menyusut dengan WebP dibandingkan dengan JPG, itu seharusnya tidak terlalu menjadi masalah. Itu hanya sesuatu untuk dipikirkan jika Anda mempertimbangkan untuk mendorong batas apa yang dapat dilakukan WebP lebih jauh.

Sekarang, seiring berjalannya waktu, Google terus mengembangkan teknologi WebP, yang pada akhirnya mencapai titik di mana ia tidak hanya mendukung grafik web berwarna, tetapi juga metadata XMP, profil warna, ubin, animasi, dan transparansi.

Akhirnya, Google membawa kompresi lossless ke WebP, mengubahnya menjadi pesaing yang layak untuk PNG juga.

Kompresi Lossless Untuk WebP

Kompresi lossless tidak menurunkan kualitas gambar seperti lossy. Sebagai gantinya, ini mencapai ukuran file yang lebih kecil dengan menghapus metadata berlebih dari backend file. Dengan cara ini, kualitas gambar tetap utuh sekaligus mengecilkan ukurannya. Yang mengatakan, kompresi lossless tidak dapat mencapai jenis ukuran file kompresi lossy.

Itu sampai kompresi lossless WebP datang.

Anda dapat melihat beberapa contoh indah tentang bagaimana kompresi lossy dan lossless WebP melawan PNG di galeri WebP Google:

Jika ada penurunan kualitas gambar WebP, itu hampir tidak terlihat oleh pengunjung Anda. Satu-satunya hal yang benar-benar akan mereka perhatikan adalah seberapa cepat situs Anda dimuat.

Apa Keuntungan Menggunakan WebP?

Tidaklah cukup untuk mengatakan bahwa WebP “lebih baik” daripada JPG dan PNG. Sangat penting untuk memahami mekanisme cara kerja WebP dan mengapa hal itu sangat bermanfaat untuk digunakan di atas format file lain sebagai hasilnya.

Dengan format gambar tradisional, kompresi selalu menghasilkan tradeoff.

Kompresi lossy JPG menyebabkan degradasi kejernihan dan kehalusan gambar. Setelah diterapkan, itu tidak dapat dibalik.

Kompresi lossy WebP, di sisi lain, menggunakan apa yang dikenal sebagai pengkodean prediksi untuk menyesuaikan piksel dalam gambar dengan lebih akurat. Seperti yang dijelaskan Google, ada faktor lain yang juga bekerja:

“Memblokir kuantisasi adaptif juga membuat perbedaan besar. Pemfilteran membantu pada bitrate sedang/rendah. Encoding aritmatika Boolean memberikan keuntungan kompresi 5% -10% dibandingkan dengan encoding Huffman.”

Rata-rata, Google memperkirakan bahwa kompresi lossy WebP menghasilkan file yang berukuran antara 25% dan 34% lebih kecil dari JPG dengan kualitas yang sama.

Adapun kompresi lossless PNG, ia bekerja dengan baik dalam menjaga kualitas gambar, tetapi tidak memiliki dampak yang signifikan pada ukuran gambar sebagai rekan JPG-nya. Dan tentu saja tidak jika dibandingkan dengan WebP.

WebP menangani jenis kompresi ini dengan lebih efisien dan efektif. Hal ini disebabkan berbagai teknik kompresi yang digunakan serta entropi encoding yang diterapkan pada gambar. Sekali lagi, Google menjelaskan cara kerjanya:

“Transformasi yang diterapkan pada gambar termasuk prediksi spasial piksel, transformasi ruang warna, menggunakan palet yang muncul secara lokal, mengemas beberapa piksel menjadi satu piksel dan penggantian alfa.”

Rata-rata, Google memperkirakan bahwa kompresi lossless WebP menghasilkan file yang kira-kira 26% lebih kecil dari PNG dengan kualitas yang sama.

Itu tidak semua. WebP memiliki kemampuan untuk melakukan sesuatu yang tidak dapat dilakukan oleh format file lain. Desainer dapat menggunakan penyandian lossy WebP pada warna RGB dan penyandian lossless pada gambar dengan latar belakang transparan (saluran alfa).

Gambar animasi, jika tidak disajikan dalam format GIF, juga mendapat manfaat dari sistem kompresi WebP. Ada beberapa alasan untuk ini:

Sebagai hasil dari kombinasi kompresi lossless dan lossy yang kuat ini, video animasi dapat diturunkan ke ukuran yang jauh lebih kecil daripada GIF.

Google memperkirakan pengurangan rata-rata menjadi sekitar 64% dari ukuran asli GIF saat menggunakan kompresi lossy dan 19% saat menggunakan lossless.

Tak perlu dikatakan, tidak ada yang bisa mengalahkan WebP dalam hal kecepatan sambil mempertahankan integritas gambar.

“

Penerimaan WebP Di Antara Peramban, Perangkat, dan CMS

Seperti yang dapat Anda bayangkan, ketika WebP pertama kali dirilis, itu hanya didukung oleh browser dan perangkat Google. Namun, seiring waktu, platform lain mulai memberikan dukungan untuk gambar WebP.

Meskipun demikian, WebP masih belum memiliki dukungan universal, yang dapat menyebabkan masalah bagi desainer web yang menggunakan format gambar ini secara default.

Mari kita lihat di mana Anda dapat mengharapkan penerimaan penuh dari gambar WebP Anda, di mana Anda tidak akan menerimanya dan kemudian kami akan membahas apa yang dapat Anda lakukan untuk mengatasi masalah ini.

Saat menulis ini pada tahun 2019, Dapatkah saya menggunakan… telah memperhitungkan platform berikut yang mendukung WebP:

Versi terbaru dari platform berikut didukung:

• Tepian
• Firefox
• Chrome
• Opera
• Opera Mini
• Peramban Android
• Opera Seluler
• Chrome untuk Android
• Firefox untuk Android
• UC Browser untuk Android
• Samsung Internet
• Peramban QQ
• Peramban Baidu

Platform yang terus menahan dukungan adalah:

• Internet Explorer
• Safari
• Safari iOS
• Peramban KaiOS

Bukan hanya browser yang berada di pagar tentang WebP. Perangkat lunak pengedit gambar dan sistem manajemen konten juga demikian.

ImageMagick, Pixelmator, dan GIMP semuanya mendukung WebP, misalnya. Sketch memungkinkan pengguna untuk mengekspor file sebagai WebP. Dan untuk perangkat lunak yang tidak mendukung WebP, seperti Photoshop, pengguna biasanya dapat menginstal plugin yang memungkinkan mereka untuk membuka dan menyimpan file sebagai WebP.

Sistem manajemen konten berada di tempat yang sama. Beberapa telah memimpin dalam memindahkan pengguna mereka ke WebP, apakah mereka mengunggah file mereka dalam format itu atau tidak. Shopify dan Wix adalah dua pembuat situs yang secara otomatis mengonversi dan menyajikan gambar dalam format WebP.

Meskipun ada platform lain yang tidak mendukung WebP secara native, biasanya ada ekstensi atau plugin yang dapat Anda gunakan untuk mengunggah gambar WebP atau mengonversi gambar yang diunggah ke format generasi berikutnya.

WordPress adalah salah satu platform tersebut. Drupal adalah CMS populer lainnya yang menyediakan modul WebP kepada pengguna yang menambahkan dukungan WebP. Magento adalah satu lagi.

Sangat jarang untuk tidak menemukan semacam dukungan tambahan untuk WebP. Satu-satunya contoh yang saya tahu tidak menerimanya adalah Squarespace.

Tantangan Mengonversi Dan Menyampaikan WebP

Oke, jadi WebP tidak memiliki dukungan 100% di web. Belum lagi. Tidak apa-apa. Untuk sebagian besar, kami memiliki semacam solusi dalam hal menambahkan dukungan ke alat yang kami gunakan untuk merancang dan membangun situs web.

Tapi apa yang kita lakukan tentang bagian browser? Jika pengunjung kami muncul di perangkat iOS, bagaimana kami memastikan mereka masih mendapatkan gambar jika gambar default kami adalah WebP?

Pertama, Anda perlu tahu cara mengonversi gambar menjadi WebP.

Tahun lalu, pengembang front end Jeremy Wagner menulis panduan untuk Smashing Magazine tentang topik ini. Di dalamnya, ia membahas cara mengonversi ke WebP menggunakan:

• Sketsa,
• Photoshop,
• Baris perintah,
• Pesta,
• Node.js,
• meneguk,
• Menggerutu,
• paket web

Salah satu dari opsi ini akan membantu Anda mengonversi PNG dan JPG menjadi WebP. Perangkat lunak pengedit gambar Anda hanya akan membawa Anda setengah jalan ke tujuan Anda.

Ini akan menangani konversi, tetapi tidak akan membantu Anda memodifikasi server asal Anda sehingga tahu kapan harus mengirimkan WebP dan kapan harus mengirimkan format gambar tradisional kepada pengunjung.

Beberapa metode ini memungkinkan Anda mendikte bagaimana server Anda mengirimkan gambar berdasarkan batasan browser pengunjung Anda. Namun, dibutuhkan sedikit kerja untuk memodifikasi server asal untuk mewujudkannya. Jika Anda tidak nyaman melakukannya atau Anda tidak ingin menghadapinya, KeyCDN punya solusinya.

Solusinya: Sederhanakan Pengiriman WebP Dengan KeyCDN

KeyCDN memahami betapa pentingnya memiliki situs web yang memuat dengan kecepatan secepat kilat. Itulah yang harus dilakukan KeyCDN dalam bisnis. Itulah mengapa tidak mengherankan bahwa itu mengembangkan solusi pemrosesan gambar dan caching WebP bawaan yang membantu pengembang lebih mudah mengirimkan format file yang tepat kepada pengunjung.

Apa itu Caching WebP?

Caching adalah bagian integral dari menjaga situs web apa pun berjalan cepat. Dan caching WebP hanya akan membuatnya lebih baik. Pada dasarnya, ini adalah bentuk negosiasi konten yang terjadi di header HTTP.

Ini bekerja seperti ini:

Seseorang mengunjungi situs web yang mengaktifkan cache WebP KeyCDN. Browser pengunjung mengirimkan header HTTP accept sebagai bagian dari permintaan ke server dengan daftar jenis aset yang diinginkannya. Tetapi alih-alih pergi ke server asal (di web host), permintaan diproses oleh server tepi (di KeyCDN). Server tepi meninjau daftar jenis file yang dapat diterima dan mengirimkan header content-type sebagai tanggapan.

Berikut ini contoh tampilannya:

 curl -I 'https://ip.keycdn.com/example.jpg' -H 'accept: image/webp' HTTP/2 200 server: keycdn-engine date: Thu, 06 Jun 2019 08:29:50 GMT content-type: image/webp content-length: 56734 last-modified: Tue, 14 May 2019 23:36:28 GMT etag: "5cdb50fc-1040a" expires: Thu, 13 Jun 2019 08:29:50 GMT cache-control: max-age=604800 x-ip: 1 x-ip-info: osz=56734 odim=700x467 ofmt=webp x-cache: HIT x-shield: active x-edge-location: chzh access-control-allow-origin: * accept-ranges: bytes

Contoh permintaan tipe konten yang dikirim KeyCDN ke browser yang menerima WebP. (Sumber: KeyCDN)

Jadi, untuk pengunjung Google Chrome, tipe content-type: image/webp akan diterima secara otomatis dan aset WebP yang di-cache akan dikirimkan ke browser.

Untuk pengguna Safari, di sisi lain, permintaan tidak akan diterima. Tapi tidak apa-apa. CDN Anda akan mengetahui format file mana yang akan dikirim. Pada baris pertama pada contoh di atas, Anda dapat melihat bahwa format gambar asli adalah JPG, jadi itulah versi file yang akan dikirimkan.

Seperti yang Anda lihat, tidak perlu memodifikasi server asal atau menyiapkan beberapa versi file Anda untuk memperhitungkan kompatibilitas WebP. Caching KeyCDN WebP menangani semuanya.

Bagaimana Anda Menggunakan Caching WebP KeyCDN?

Ada dua cara di mana pengguna KeyCDN dapat memanfaatkan fitur caching WebP.

Pemrosesan Gambar Melalui KeyCDN

Yang pertama membutuhkan tidak lebih dari membalik sakelar dan menyalakan pemrosesan gambar KeyCDN. Setelah diaktifkan, header permintaan accept akan dimuat secara otomatis.

Anda tentu saja dapat menggunakan layanan pemrosesan gambar untuk lebih dari sekadar caching WebP. Anda dapat menggunakannya untuk menyesuaikan ukuran, memotong, memutar, mengaburkan, dan atribut fisik lainnya dari gambar yang Anda kirim. Tetapi jika Anda mencoba menyederhanakan sistem pengiriman gambar Anda dan hanya ingin mempercepat dengan WebP, cukup aktifkan fitur tersebut dan biarkan KeyCDN yang bekerja.

WebP Caching Melalui Server Asal Anda

Katakanlah Anda membuat aset gambar WebP Anda sendiri. Anda masih dapat memetik manfaat dari solusi caching WebP KeyCDN.

Untuk melakukan ini, Anda harus membuat WebP dengan benar. Sekali lagi, inilah tautan ke panduan yang menunjukkan cara melakukannya.

Terserah Anda untuk mengonfigurasi server asal Anda sehingga hanya memberikan WebPs saat accept: image/webp hadir. KeyCDN memberikan beberapa contoh bagaimana Anda akan melakukan ini dengan Nginx:

 # http config block map $http_accept $webp_ext { default ""; "~*webp" ".webp"; } # server config block location ~* ^(/path/to/your/images/.+)\.(png|jpg)$ { set $img_path $1; add_header Vary Accept; try_files $img_path$webp_ext $uri =404; }

KeyCDN menunjukkan bagaimana Anda dapat memodifikasi server asal dengan Nginx untuk mengirimkan aset WebP cache Anda sendiri. (Sumber: KeyCDN)

Dan dengan Apache:

 <IfModule mod_rewrite.c> RewriteEngine On RewriteCond %{HTTP_ACCEPT} image/webp RewriteCond %{DOCUMENT_ROOT}/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] </IfModule> <IfModule mod_headers.c> Header append Vary Accept env=REDIRECT_accept </IfModule> AddType image/webp .webp

KeyCDN menunjukkan bagaimana Anda dapat memodifikasi server asal dengan Apache untuk mengirimkan aset WebP cache Anda sendiri. (Sumber: KeyCDN)

Jelas, opsi ini memberi Anda lebih banyak kontrol untuk mengelola format gambar Anda dan bagaimana mereka disajikan kepada pengunjung. Karena itu, jika Anda baru menggunakan WebP, caching WebP otomatis dan pemrosesan gambar KeyCDN mungkin adalah pilihan terbaik Anda.

Alternatif Untuk Desainer WordPress Dan Magento

Jika Anda mendesain situs web di WordPress atau Magento, KeyCDN memiliki plugin yang dapat Anda gunakan untuk menambahkan dukungan dan caching WebP.

Untuk WordPress, Anda akan menggunakan Custom Cache Enabler KeyCDN bersama dengan Optimus.

Cache Enabler memeriksa untuk melihat apakah gambar Anda memiliki versi WebP. Jika ada dan browser pengunjung mendukungnya, itulah yang akan dikirimkan dalam file cache. Jika tidak ada, maka itu hanya akan beralih ke JPG, PNG atau GIF yang ada di sana.

Pengembang Magento memiliki solusi yang disederhanakan untuk mengonversi dan mengirimkan WebP juga. Pertama, Anda harus menginstal ekstensi Webp. Kemudian, Anda harus mengonfigurasi binari WebP di server Anda.

Membungkus

Ada alasan mengapa Google bersusah payah mengembangkan format gambar baru dan mengapa semakin banyak browser, sistem desain, dan sistem manajemen konten yang mendukungnya.

Gambar dapat menyebabkan banyak masalah untuk situs web yang sebelumnya dibuat menjadi ramping dan jahat. Jika tidak diunggah dengan ukuran yang tepat, jika tidak dikompresi dan jika caching tidak diaktifkan, gambar Anda bisa menjadi alasan kecepatan situs web Anda membuat pengunjung menjauh.

Tetapi dengan WebP, situs web Anda pasti dimuat lebih cepat. Terlebih lagi, tidak perlu ada kompromi antara kualitas gambar (atau kuantitas!) untuk mendapatkan kecepatan itu. WebP secara efisien mengompresi file sambil menjaga integritas konten gambar.

Jika Anda benar-benar berjuang untuk meningkatkan kecepatan situs web Anda, maka WebP harus menjadi alat berikutnya yang Anda gunakan untuk meminta bantuan.