Konten Galeri ini
Galeri ini menampilkan beberapa contoh gambar 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 Gambar WebPP, dan gambar floating WebP dengan Alfa untuk perbandingan secara berdampingan. Gambar ditempatkan di latar belakang kotak-kotak seperti yang biasa dilakukan dalam software grafis.
Perlu diketahui bahwa kami telah menggunakan kualitas webp 90 untuk gambar WebP-lossy dengan kualitas alfa dan default untuk gambar WebP-lossless. Lihat bagian Membuat ulang gambar untuk mengetahui detail selengkapnya.
Kami menampilkan gambar WebP -- 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 melihat. Klik gambar apa pun untuk melihat gambar berukuran penuh.
Tabel ini juga menunjukkan ukuran gambar yang diperoleh di setiap mode.
PNG | WebPless | WebP-lossy (dengan alfa) |
|---|---|---|
| "Mawar Kuning" 1 | ||
 Ukuran file yang dioptimalkan dengan PNG: 110,7 KB |
 Ukuran file tanpa WebP: 79,9 KB |
 Ukuran file WebPloss-lossy (dengan alfa): 17,7 KB |
| "tux bayi untuk halaman pengguna saya" 2 | ||
 Ukuran file yang dioptimalkan dengan PNG: 38,1 KB |
 Ukuran file tanpa WebP: 27,0 KB |
 Ukuran file WebP-lossy (dengan alfa): 13,8 KB |
| " demonstrasi transparansi PNG" 3 | ||
 Ukuran file yang dioptimalkan dengan PNG: 213,5 KB |
 Ukuran file tanpa WebP: 149,0 KB |
 Ukuran file WebP campuran (dengan alfa): 51,6 KB |
| Ulang Tahun Ke-189 "Gregor Mendel ' 4 | ||
 Ukuran file yang dioptimalkan dengan PNG: 49,2 KB |
 Ukuran file tanpa WebP: 33,2 KB |
 Ukuran file WebP campuran (dengan alfa): 18,3 KB |
| "Kartu kompas transparan untuk overlay" 5 | ||
 Ukuran file yang dioptimalkan dengan PNG: 126,8 KB |
 Ukuran file tanpa WebP: 97,1 KB |
 Ukuran file WebP campuran (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 tanpa kehilangan WebP (27,0 KB) | File WebP-lossy (dengan alfa) (14,1 KB) |
| "Demonstrasi transparansi PNG": | File WebP-lossless (149,1 KB) | File WebP-lossy (dengan alfa) (52,6 KB) |
| Ulang Tahun Ke-189 "Gregor Mendel' | File tanpa kehilangan WebP (33,3 KB) | File WebP-lossy (dengan alfa) (19,0 KB) |
| "Kartu kompas transparan untuk hamparan": | 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 dicantumkan di sini secara berurutan.
| 1 |
"Foto Stok Gratis dalam Resolusi Tinggi - Mawar Kuning 3 - Bunga" Penulis Gambar: Jon Sullivan File ini ada di domain publik. Sumber JPEG |
| 2 |
"tutu bayi untuk halaman pengguna saya" Penulis Gambar: Fizyplankton File ini berada di domain publik. Sumber PNG |
| 3 |
"Demonstrasi transparansi PNG" Penulis Gambar: Kode sumber POV-Ray Foto 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" Pengarang Gambar: Denelson83 File ini dilisensikan berdasarkan lisensi Creative Commons Attribution-Share Alike 3.0 Unported. Sumber PNG |
Mereproduksi Gambar
Demi produktivitas dan untuk mendemonstrasikan penggunaan beberapa parameter kompresi WebP, kami menjelaskan langkah-langkah persis yang diperlukan saat membuat gambar di galeri ini di sini.
Alat
Untuk kompresi ulang PNG, hasil terbaik dari pngcrush 1.8.13 dan ZopfliPNG 1.0.3 digunakan. Opsi command line berikut digunakan
Pngcrush:
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
ZopfliPNG:
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
alat ImageMagick terbaru bernama convert, yang tersedia di
https://www.imagemagick.org. Berikut adalah command line yang tepat:
convert image.png -resize 240x image_resized.png
Mengompresi ke WebP tanpa kehilangan
Kami menggunakan opsi 'lossless' di alat cwebp untuk mengonversi PNG ke WebP-tanpa pengurangan. Untuk mendapatkan output minimal, command line persis yang digunakan adalah sebagai berikut:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
Rendering WebP-lossless
Kami mengonversi kembali gambar tanpa kehilangan WebP ke PNG menggunakan alat dwebp untuk rendering. Berikut adalah command line yang tepat:
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 blur) dan kualitas alfa 100 (kompresi tanpa pengurangan). Berikut adalah command line yang tepat:
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. Berikut adalah command line yang tepat:
dwebp webp_alpha.webp -o output.png