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 ini menyajikan gambar PNG (dikompresi dengan pngcrush dan pngout), Gambar WebP lossless dan gambar WebP lossy dengan Alfa untuk berdampingan perbandingan. Gambar ditempatkan pada latar belakang kotak-kotak seperti biasa dilakukan dalam perangkat lunak grafis.
Perhatikan bahwa kami menggunakan kualitas webp 90 untuk gambar WebP-lossy dengan alfa dan kualitas default untuk gambar WebP-lossless. Lihat Bagian Reproduksi gambar untuk detail selengkapnya.
Kami menyajikan gambar WebP -- dikonversi kembali ke PNG -- untuk browser yang tidak mampu merender WebP. Jika browser Anda kompatibel, Anda dapat menemukan link ke file WebP di bawah. Selain itu, gambar di halaman ini diperkecil untuk memudahkan menonton. Klik gambar mana pun untuk melihat ukuran penuh gambar.
Tabel ini juga menunjukkan ukuran gambar yang diperoleh dalam setiap mode.
PNG | WebP tanpa kehilangan | WebP-lossy (dengan alfa) |
|---|---|---|
| "Mawar Kuning" 1 | ||
 Ukuran file PNG yang dioptimalkan: 110,7 KB |
 Ukuran file WebP-lossless: 79,9 KB |
 Ukuran file WebP-lossy (dengan alfa): 17,7 KB |
| "baby tux untuk halaman pengguna saya" 2 | ||
 Ukuran file PNG yang dioptimalkan: 38,1 KB |
 Ukuran file WebP-lossless: 27,0 KB |
 Ukuran file WebP-lossy (dengan alfa): 13,8 KB |
| "Demonstrasi transparansi PNG" 3 | ||
 Ukuran file PNG yang dioptimalkan: 213,5 KB |
 Ukuran file WebP-lossless: 149,0 KB |
 Ukuran file WebP-lossy (dengan alfa): 51,6 KB |
| "Ulang Tahun Ke-189 Gregor Mendel" 4 | ||
 Ukuran file PNG yang dioptimalkan: 49,2 KB |
 Ukuran file WebP-lossless: 33,2 KB |
 Ukuran file WebP-lossy (dengan alfa): 18,3 KB |
| "Kartu kompas transparan untuk overlay" 5 | ||
 Ukuran file PNG yang dioptimalkan: 126,8 KB |
 Ukuran file WebP-lossless: 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) |
| "baby tux 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 dicantumkan di sini secara berurutan.
| 1 |
"Foto Stok Gratis dalam 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 |
"Demonstrasi transparansi PNG" Penulis Gambar: Kode sumber POV-Ray Foto dilisensikan berdasarkan Creative Commons Lisensi 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 Creative Commons Lisensi Attribution-Share Alike 3.0 Unported. Sumber PNG |
Reproduksi Gambar
Demi kemampuan reproduksi dan untuk menunjukkan penggunaan beberapa WebP parameter kompresi, kami menjelaskan di sini langkah-langkah yang tepat yang terlibat ketika membuat gambar di galeri ini.
Alat
Untuk kompresi ulang PNG, hasil terbaik dari pngcrush 1.8.13 dan ZopfliPNG 1.0.3 digunakan. Opsi command line berikut digunakan
{i>Pngcrush<i}:
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
versi terbaru alat ImageMagick bernama convert, tersedia di
https://www.imagemagick.org. Command line persisnya adalah sebagai berikut:
convert image.png -resize 240x image_resized.png
Mengompresi ke WebP-lossless
Kita menggunakan {i>lossless<i} di alat cwebp untuk mengonversi PNG ke WebP- lossless. Untuk mendapatkan {i>output<i} yang minimal, baris perintah 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)
Kita menggunakan alat cwebp untuk mengonversi PNG ke WebP-lossy (dengan alfa). Kita memilih Kualitas WebP 90 (kompresi lossy) dan kualitas alfa 100 (lossless kompresi). 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 proses rendering. Command-line yang digunakan adalah sebagai berikut:
dwebp webp_alpha.webp -o output.png