WebP vs PNG vs JPG: cómo elegir el formato de imagen adecuado
JPG sirve para fotos que deben abrirse en cualquier sitio, PNG para conservar los píxeles exactos, y WebP cumple las dos funciones en la web con archivos más pequeños.
Elegir un formato de imagen se reduce a tres preguntas: ¿puede el codificador descartar detalle?, ¿necesita la imagen zonas transparentes? y ¿dónde se va a abrir el archivo? JPG, PNG y WebP responden de forma distinta a cada una. Para las imágenes de un sitio web, WebP suele ser la mejor opción, pero PNG y JPG siguen ganando en algunos casos, y saber cuáles le evitará logotipos borrosos, recuadros blancos alrededor de los recortes y formularios que rechazan su archivo.
Los formatos, uno al lado del otro
| JPG (JPEG) | PNG | WebP | |
|---|---|---|---|
| Compresión | Con pérdida | Sin pérdida | Con o sin pérdida |
| Transparencia | No | Sí, canal alfa completo | Sí, en los dos modos |
| Animación | No | Mediante APNG | Sí |
| Profundidad de color | 8 bits por canal en la práctica | Hasta 16 bits por canal | 8 bits por canal |
| Tamaño máximo | 65 535 × 65 535 píxeles | Más de 2000 millones de píxeles por lado | 16 383 × 16 383 píxeles |
| Se abre en | Prácticamente todo | Prácticamente todo | Todos los navegadores principales actuales; no en todas las aplicaciones ni en todos los formularios de subida |
| Ideal para | Fotos que deben funcionar en todas partes | Capturas de pantalla, interfaces, gráficos con bordes nítidos | La mayoría de las imágenes de un sitio web |
Con pérdida y sin pérdida: la diferencia real
La compresión con pérdida descarta detalles que el ojo difícilmente notará, y el ajuste de calidad decide cuántos. Encaja bien con las fotografías, donde el ruido y los degradados disimulan los pequeños cambios. Perjudica al texto, a las líneas finas y a las zonas de color plano, que acaban con bordes blandos y manchas tenues. Cada vez que se vuelve a guardar se pierde un poco más, así que convierta siempre desde el original y no desde un JPG anterior.
La compresión sin pérdida conserva cada píxel exactamente igual. Es la opción correcta para capturas de pantalla, diagramas, pixel art y cualquier imagen que vaya a volver a editar. Con una fotografía produce un archivo mucho más grande, porque guardar con exactitud el ruido de la cámara sale caro.
JPG solo tiene modo con pérdida y PNG solo sin pérdida. WebP reúne los dos modos en un único formato, y esa es su principal ventaja práctica: una foto y una captura de pantalla pueden ser WebP, cada una comprimida de la forma que le corresponde.
¿Cuánto más pequeño es WebP?
Google, que desarrolló el formato, publica esta comparación: las imágenes WebP sin pérdida son un 26% más pequeñas que los PNG, y las WebP con pérdida son entre un 25 y un 34% más pequeñas que JPEG comparables con una calidad SSIM equivalente. Son promedios sobre las imágenes de prueba de Google, no una promesa para cada archivo.
Sus propios resultados pueden ser mejores o peores. Las preguntas frecuentes de WebP de Google advierten que un WebP puede salir más grande que su origen, normalmente cuando un PNG con pocos colores se convierte a WebP con pérdida, o cuando una imagen que ya tenía pérdida se guarda como WebP sin pérdida. Además, WebP con pérdida usa siempre submuestreo de croma 4:2:0, es decir, guarda el color a la mitad de la resolución horizontal y vertical del brillo, así que los bordes rojos o azules saturados de un gráfico pueden verse ligeramente corridos donde un PNG se mantiene nítido. Lo fiable es convertir y comparar: el conversor de imágenes muestra el tamaño original y el nuevo de cada archivo, para que vea el ahorro real antes de quedarse con el resultado.
Transparencia y animación
JPG no tiene canal alfa. Al convertir un logotipo transparente a JPG, la zona transparente se rellena con un color sólido; el conversor de este sitio usa el blanco. PNG guarda el canal alfa completo sin pérdida, lo que hace pesadas las fotos con transparencia, como los recortes de productos. WebP admite alfa también en el modo con pérdida, así que una foto recortada puede conservar sus bordes suaves con una fracción del tamaño del PNG. Es el caso en el que PNG a WebP ahorra más.
En cuanto a la animación, JPG no la admite, PNG tiene la extensión APNG y WebP la trae integrada. Según Google, los WebP animados pueden ocupar menos que la misma animación en GIF o APNG. Para clips largos o complejos, un vídeo MP4 o WebM sin sonido suele pesar menos que cualquier formato de imagen.
Qué formato usar
| Imagen | Formato | Por qué |
|---|---|---|
| Fotos en un sitio web | WebP con pérdida | La opción más pequeña con amplia compatibilidad |
| Fotos para correo, impresión o formularios de subida | JPG | Se abre en cualquier programa y la acepta cualquier formulario |
| Capturas con texto, maquetas de interfaz | PNG o WebP sin pérdida | El texto sigue nítido y nada se emborrona |
| Logotipos e iconos | SVG si tiene los vectores; si no, PNG o WebP | Conserva los bordes nítidos y la transparencia |
| Foto de producto con fondo transparente | WebP con pérdida y alfa | Bordes suaves con una fracción del tamaño del PNG |
| Animación corta | WebP animado, o MP4/WebM para clips más largos | Mucho más ligero que un GIF |
| Copias maestras que volverá a editar | PNG, o el archivo original de la cámara | Sin pérdida acumulada entre guardados |
Pasar las imágenes existentes es rápido: JPG a WebP para las fotos y PNG a WebP para los gráficos y los recortes. Cuando un WebP no se abre en un programa antiguo, WebP a JPG lo soluciona, y PNG a JPG reduce las fotos que se guardaron como PNG por error.
Compatibilidad con navegadores y alternativa con picture
Las versiones actuales de Chrome, Edge, Firefox y Safari muestran WebP, así que para la mayoría de los sitios basta con un WebP en una etiqueta <img> normal. Si también tiene que dar servicio a navegadores antiguos, o quiere ofrecer primero un formato más reciente, use el elemento <picture>. El navegador toma el primer <source> cuyo tipo admite y, si no hay ninguno, recurre al <img>, que además lleva el texto alternativo y las dimensiones:
<picture>
<source srcset="hero.avif" type="image/avif">
<source srcset="hero.webp" type="image/webp">
<img src="hero.jpg" alt="Puerto al atardecer" width="1600" height="900">
</picture>Un servidor o una CDN pueden hacer lo mismo sin marcado adicional: miran la cabecera Accept de la petición de la imagen y devuelven WebP cuando aparece en la lista. Si lo hace así, envíe Vary: Accept para que las cachés mantengan separadas las versiones.
Dónde encaja AVIF
AVIF se basa en el códec de vídeo AV1 y lo admiten las versiones actuales de Chrome, Edge, Firefox y Safari. A menudo genera archivos más pequeños que WebP con una calidad visual similar, pero codificarlo es más lento y lo aceptan menos herramientas, editores y formularios de subida. Una configuración habitual es AVIF primero, WebP en segundo lugar y JPG al final, como en el ejemplo anterior. El conversor de este sitio puede leer archivos AVIF cuando su navegador sabe decodificarlos, pero escribe WebP, PNG, JPG e ICO, no AVIF.
Convertir en el navegador: una advertencia sobre Safari
Los conversores que funcionan en el navegador dibujan la imagen en un canvas y piden al navegador que la codifique. Chrome, Edge y Firefox pueden codificar WebP de esa manera. Safari muestra WebP, pero no puede codificarlo desde un canvas y, sin avisar, devuelve un PNG; por eso el conversor de este sitio se detiene con un mensaje en lugar de guardar un PNG con extensión .webp. En un Mac, haga las conversiones a WebP en Chrome, Edge o Firefox. En un iPhone o iPad, los demás navegadores suelen usar también el motor de Safari, así que convierta en un ordenador o elija PNG o JPG.
Conviene saber dos cosas más. En Chrome, una calidad de 100 produce un WebP sin pérdida, mientras que los valores inferiores producen WebP con pérdida; lo comprobamos inspeccionando los archivos codificados. Y la codificación con canvas no copia los metadatos, así que los datos EXIF, como el modelo de cámara o la posición GPS, no pasan al archivo convertido.