Konten Galeri ini
Galeri ini menyajikan beberapa gambar contoh untuk menampilkan dua mode baru WebP: WebP-lossless dan WebP-lossy dengan alfa (dukungan transparansi).
Perbandingan Berdampingan
Tabel di bawah menampilkan gambar PNG (dikompresi dengan pngcrush dan pngout), gambar WebP tanpa kehilangan data, dan gambar WebP dengan Alfa untuk perbandingan berdampingan. Gambar ditempatkan di atas latar belakang kotak-kotak seperti yang biasa dilakukan dalam software grafis.
Perlu diperhatikan bahwa kami telah menggunakan kualitas webp 90 untuk gambar WebP lossy dengan kualitas alfa dan default untuk gambar tanpa kehilangan WebP. Lihat bagian Mereproduksi gambar untuk detail selengkapnya.
Kami menampilkan gambar WebP -- yang dikonversi kembali ke PNG -- untuk browser yang tidak dapat merender WebP. Jika memiliki browser yang kompatibel, Anda dapat menemukan link ke file WebP di bawah. Selain itu, gambar di halaman ini diperkecil untuk memudahkan Anda melihatnya. Klik gambar apa pun untuk melihat gambar berukuran penuh.
Tabel tersebut juga menunjukkan ukuran gambar yang diperoleh dalam setiap mode.
PNG | WebP tanpa loss | WebP-lossy (dengan alfa) |
|---|---|---|
| "Mawar Kuning" 1 | ||
 Ukuran file yang dioptimalkan untuk PNG: 110,7 KB |
 Ukuran file WebP tanpa kehilangan data: 79,9 KB |
 Ukuran file WebP-lossy (dengan alfa): 17,7 KB |
| "tux bayi untuk halaman pengguna saya" 2 | ||
 Ukuran file yang dioptimalkan untuk PNG: 38,1 KB |
 Ukuran file WebP tanpa kehilangan data: 27,0 KB |
 Ukuran file WebP-lossy (dengan alfa): 13,8 KB |
| "Demonstrasi transparansi PNG" 3 | ||
 Ukuran file yang dioptimalkan untuk PNG: 213,5 KB |
 Ukuran file WebP tanpa kehilangan data: 149,0 KB |
 Ukuran file WebP-lossy (dengan alfa): 51,6 KB |
| "Ulang Tahun Ke-189 Gregor Mendel" 4 | ||
 Ukuran file yang dioptimalkan untuk PNG: 49,2 KB |
 Ukuran file WebP tanpa kehilangan data: 33,2 KB |
 Ukuran file WebP-lossy (dengan alfa): 18,3 KB |
| "Kartu kompas transparan untuk overlay" 5 | ||
 Ukuran file yang dioptimalkan untuk PNG: 126,8 KB |
 Ukuran file WebP tanpa kehilangan data: 97,1 KB |
 Ukuran file WebP-lossy (dengan alfa): 57,3 KB |
Berikut adalah link ke file WebP (dapat dilihat di Chrome 22 dan yang lebih baru):
| "Mawar Kuning": | File WebP-lossless (80,1 KB) | File WebP-lossy (dengan alfa) (18,4 KB) |
| "tux bayi untuk halaman pengguna saya": | File WebP-lossless (27,0 KB) | File WebP-lossy (dengan alfa) (14,1 KB) |
| "Demonstrasi transperansi PNG": | File WebP-lossless (149,1 KB) | File WebP-lossy (dengan alfa) (52,6 KB) |
| "Ulang Tahun Ke-189 Gregor Mendel": | File WebP-lossless (33,3 KB) | File WebP-lossy (dengan alfa) (19,0 KB) |
| "Kartu kompas transparan untuk overlay": | File WebP-lossless (97,1 KB) | File WebP-lossy (dengan alfa) (57,3 KB) |
Kredit Gambar
Gambar di halaman ini berasal dari sejumlah sumber yang berbeda. Kredit untuk gambar di atas tercantum di sini secara berurutan.
| 1 |
"Stok Gratis Foto dengan Resolusi Tinggi - Mawar Kuning 3 - Bunga" Penulis Gambar: Jon Sullivan File ini berada di domain publik. Sumber JPEG |
| 2 |
"baby tux untuk halaman pengguna saya" Penulis Gambar: Fizyplankton File ini berada di domain publik. Sumber PNG |
| 3 |
"Demo transparansi PNG" Penulis Gambar: Kode sumber POV-Ray Foto yang dilisensikan berdasarkan lisensi Creative Commons Attribution-Share Alike 3.0 Unported. Sumber PNG |
| 4 |
"Ulang Tahun Ke-189 Gregor Mendel" Penulis Gambar: Tim Google Doodle Terima kasih kepada tim Google Doodle untuk gambar ini. Sumber PNG |
| 5 |
"Kartu kompas transparan untuk overlay" Penulis Gambar: Denelson83 File ini dilisensikan berdasarkan lisensi Creative Commons Attribution-Share Alike 3.0 Unported. Sumber PNG |
Mereproduksi Gambar
Demi reproduksi dan untuk menunjukkan penggunaan beberapa parameter kompresi WebP, kami menjelaskan di sini langkah-langkah yang tepat yang diperlukan saat membuat gambar di galeri ini.
Alat
Untuk kompresi ulang PNG, digunakan hasil terbaik dari pngcrush 1.8.13 dan ZopfliPNG 1.0.3. Opsi command line berikut digunakan
PNG:
pngcrush -brute -rem tEXt -rem tIME -rem iTXt -rem zTXt -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem alla -rem text input.png output-candidate.png
PNG:
zopflipng --lossy_transparent input.png output-candidate.png
ZopfliPNG dengan semua filter:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
Untuk mengubah skala beberapa gambar sumber yang lebih besar (hanya untuk dilihat), kami menggunakan versi terbaru alat ImageMagick bernama convert, yang tersedia di https://www.imagemagick.org. Command line persisnya adalah sebagai berikut:
convert image.png -resize 240x image_resized.png
Mengompresi ke WebP-lossless
Kami menggunakan opsi 'lossless' di alat cwebp untuk mengonversi PNG ke WebP lossless. Untuk mendapatkan output minimal, command line yang digunakan adalah sebagai berikut:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
Merender WebP tanpa kehilangan
Kami mengonversi gambar WebP lossless kembali ke PNG menggunakan alat dwebp untuk rendering. Command line yang digunakan adalah sebagai berikut:
dwebp webp_lossless.webp -o output.png
Mengompresi ke WebP-lossy (dengan alfa)
Kami menggunakan alat cwebp untuk mengonversi PNG ke WebP-lossy (dengan alfa). Kami memilih kualitas WebP 90 (kompresi lossy) dan kualitas alfa 100 (kompresi tanpa distorsi). Command line yang digunakan adalah sebagai berikut:
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
Merender WebP-lossy (dengan alfa)
Kami mengonversi gambar WebP-lossy (dengan alfa) kembali ke PNG menggunakan alat dwebp untuk rendering. Command line yang digunakan adalah sebagai berikut:
dwebp webp_alpha.webp -o output.png