Contenido de esta galería
En esta galería, se presentan algunas imágenes de ejemplo para mostrar los dos nuevos modos de WebP: WebP sin pérdida y WebP con pérdida con alfa (compatibilidad con transparencia).
Comparación uno a uno
En la siguiente tabla, se presentan imágenes en formato PNG (comprimidas con pngcrush y pngout), imágenes sin pérdida de WebP e imágenes con pérdida de WebP con la versión alfa para comparar en paralelo. Las imágenes se superponen sobre un fondo a cuadros, como se suele hacer en el software de gráficos.
Ten en cuenta que usamos la calidad WEBP 90 para imágenes con pérdida de WebP con la calidad alfa y predeterminada para imágenes sin pérdida de WebP. Consulta la sección Cómo reproducir las imágenes para obtener más detalles.
Presentamos las imágenes WebP (convertidas de nuevo a PNG) para navegadores que no pueden renderizar WebP. Si tienes un navegador compatible, puedes encontrar los vínculos a los archivos WebP a continuación. Además, se reduce la escala de las imágenes de esta página para facilitar su visualización. Haz clic en cualquier imagen para verla en tamaño completo.
La tabla también indica el tamaño de la imagen obtenido en cada modo.
PNG | WebP sin pérdida | WebP con pérdida (con alfa) |
|---|---|---|
| “Rosa amarilla” 1 | ||
 Tamaño de archivo optimizado para PNG: 110.7 KB |
 Tamaño del archivo sin pérdida de WebP: 79.9 KB |
 Tamaño de archivo WebP con pérdida (con alfa): 17.7 KB |
| “tux para bebé para mi página de usuario” 2 | ||
 Tamaño de archivo optimizado para PNG: 38.1 KB |
 Tamaño del archivo sin pérdida de WebP: 27.0 KB |
 Tamaño de archivo WebP con pérdida (con alfa): 13.8 KB |
| "Demostración de transparencia en PNG" 3 | ||
 Tamaño de archivo optimizado para PNG: 213.5 KB |
 Tamaño del archivo sin pérdida de WebP: 149.0 KB |
 Tamaño del archivo WebP con pérdida (con alfa): 51.6 KB |
| "189o aniversario del nacimiento de Gregor Mendel" 4 | ||
 Tamaño de archivo optimizado para PNG: 49.2 KB |
 Tamaño del archivo sin pérdida de WebP: 33.2 KB |
 Tamaño de archivo WebP con pérdida (con alfa): 18.3 KB |
| "Tarjeta de brújula transparente para superposiciones" 5 | ||
 Tamaño de archivo optimizado para PNG: 126.8 KB |
 Tamaño del archivo sin pérdida de WebP: 97.1 KB |
 Tamaño del archivo WebP con pérdida (con alfa): 57.3 KB |
Estos son los vínculos a los archivos WebP (se pueden ver en Chrome 22 y versiones posteriores):
| “Rosa amarilla”: | Archivo WebP sin pérdidas (80.1 KB) | WebP-lossy (con alfa) (18.4 KB) |
| "tux para bebé para mi página de usuario": | Archivo WebP sin pérdidas (27.0 KB) | WebP-lossy (con alfa) (14.1 KB) |
| "Demostración de transparencia de PNG": | Archivo WebP sin pérdidas (149.1 KB) | WebP-lossy (con alfa) archivo (52.6 KB) |
| "189o aniversario del nacimiento de Gregor Mendel": | Archivo WebP sin pérdidas (33.3 KB) | WebP-lossy (con alfa) (19.0 KB) |
| "Tarjeta de brújula transparente para superposiciones": | Archivo WebP sin pérdidas (97.1 KB) | WebP-lossy (con alfa) (57.3 KB) |
Créditos de la imagen
Las imágenes de esta página provienen de distintas fuentes. Los créditos de las imágenes anteriores se enumeran aquí en orden.
| 1 |
“Foto de archivo gratuita en alta resolución - Rosa amarillo 3 - Flores” Autor de la imagen: Jon Sullivan Este archivo es de dominio público. Fuente JPEG |
| 2 |
“baby tux para mi página de usuario” Autor de la imagen: Fizyplankton Este archivo es de dominio público. Fuente en PNG |
| 3 |
"Demostración de transparencia en PNG" Autor de la imagen: código fuente POV-Ray Foto con licencia de Creative Commons Attribution-Share Alike 3.0 Unported. Fuente en PNG |
| 4 |
"189o aniversario del nacimiento de Gregor Mendel" Autor de la imagen: Equipo de Doodles de Google Gracias al equipo de Doodles de Google por esta imagen. Fuente en PNG |
| 5 |
"Tarjeta de brújula transparente para superposiciones" Autor de la imagen: Denelson83 Este archivo está bajo una licencia de Creative Commons Attribution-Share Alike 3.0 Unported. Fuente en PNG |
Cómo reproducir las imágenes
Para lograr reproducibilidad y demostrar el uso de algunos parámetros de compresión de WebP, describimos aquí los pasos exactos que se requieren para generar las imágenes en esta galería.
Herramientas
Para la recompresión de PNG, se usa el mejor resultado de pngcrush 1.8.13 y ZopfliPNG 1.0.3. Las siguientes opciones de línea de comandos se usan
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 con todos los filtros:
zopflipng --iterations=500 --filters=01234mepb --lossy_8bit --lossy_transparent input.png output-candidate.png
Para redimensionar algunas de las imágenes de origen más grandes (solo para visualización), usamos una versión reciente de la herramienta de ImageMagick llamada convert, disponible en https://www.imagemagick.org. La línea de comandos exacta era la siguiente:
convert image.png -resize 240x image_resized.png
Comprime a WebP sin pérdida
Usamos la opción "sin pérdidas" en la herramienta cwebp para convertir PNG a WebP sin pérdidas. Para obtener el resultado mínimo, la línea de comandos exacta que se usó fue la siguiente:
cwebp input.png -lossless -m 6 -q 100 -o webp_lossless.webp
Cómo procesar WebP sin pérdidas
Volvimos a convertir las imágenes sin pérdida de WebP a PNG con la herramienta dwebp para su renderización. La línea de comandos exacta que se usó fue la siguiente:
dwebp webp_lossless.webp -o output.png
Comprime a WebP con pérdida (con alfa)
Usamos la herramienta cwebp para convertir PNG a WebP con pérdida (con alfa). Seleccionamos calidad WebP de 90 (compresión con pérdida) y calidad alfa de 100 (compresión sin pérdida). La línea de comandos exacta que se usó fue la siguiente:
cwebp input.png -q 90 -alpha_q 100 -m 6 -o webp_alpha.webp
Cómo procesar WebP con pérdida (con alfa)
Volvimos a convertir las imágenes con pérdida de WebP (con alfa) a PNG con la herramienta dwebp para el procesamiento. La línea de comandos exacta que se usó fue la siguiente:
dwebp webp_alpha.webp -o output.png