WebP, PNG o JPG: ¿qué formato para tus imágenes?
"Usa WebP para todo" es el consejo que más escucharás, y se equivoca con suficiente frecuencia como para tenerlo en cuenta. Los tres formatos comprimen de maneras fundamentalmente distintas, y cuál gana depende del contenido de la imagen, a veces con diferencias de varias veces su tamaño. Aquí explicamos cómo funciona cada uno y cómo decidir para cada archivo.
Cómo comprime cada formato
JPG: con pérdida, optimizado para fotografías
JPG divide la imagen en bloques de 8×8, convierte cada uno en componentes de frecuencia y descarta el detalle de alta frecuencia que menos suele percibir el ojo. El control de calidad determina la intensidad de descarte. Funciona especialmente bien en fotografías, donde el detalle es fino e irregular y los pequeños errores se ocultan en el ruido.
Funciona mal con bordes nítidos. Una línea negra sobre blanco es información de alta frecuencia pura, precisamente lo que el formato descarta, por lo que aparecen halos alrededor del texto y los contornos. JPG tampoco tiene canal alfa: no uno limitado, sino ninguno. Guardar una imagen transparente como JPG sustituye permanentemente la transparencia por un color uniforme, normalmente negro o blanco.
PNG: sin pérdida, optimizado para gráficos planos
PNG nunca descarta datos de píxeles. Predice cada uno a partir de sus vecinos, guarda las pequeñas diferencias y aplica DEFLATE. Las secuencias de píxeles iguales o parecidos ocupan casi nada; por eso gráficos planos, capturas de interfaz, dibujo lineal y pixel art se comprimen tan bien.
El formato tiene dos modos que conviene distinguir. PNG de color verdadero almacena color completo de 24 bits y alfa opcional. PNG con paleta (PNG-8) almacena un índice en una tabla de hasta 256 colores, por lo que cada píxel ocupa un byte en lugar de cuatro. Para gráficos planos que realmente usan pocos colores, el modo de paleta ocupa muchísimo menos y no tiene ninguna pérdida. Casi nadie lo utiliza, y es la razón por la que PNG a veces supera claramente a WebP.
WebP: ambos en un contenedor
WebP tiene dos modos distintos que comparten extensión. WebP con pérdida usa predicción por bloques del vídeo y suele generar un 20–30% menos que JPG a calidad percibida comparable. WebP sin pérdida usa otro esquema con predicción más sofisticada que PNG y suele ocupar 20–30 % menos que un PNG de color verdadero.
Lo fundamental es que ambos modos admiten alfa. Esa es la verdadera ventaja de WebP: antes, una imagen transparente tenía que ser PNG, lo que significaba sin pérdida y, por tanto, grande. WebP con pérdida y alfa permite comprimir una foto recortada del mismo modo que una normal.
La comparación de un vistazo
| JPG | PNG | WebP | |
|---|---|---|---|
| Compresión | Solo con pérdida | Solo sin pérdida | Con o sin pérdida |
| Canal alfa | Ninguno | Sí, 8 bits | Sí, ambos modos |
| Ideal para | Fotografías | Gráficos planos, pixel art y capturas de pantalla | Fotos para la web, fotos transparentes |
| Limitado en | Texto, dibujos de líneas y transparencia | Fotografías (archivos muy grandes) | Ilustración plana con pocos colores frente a PNG con paleta |
| Animación | No | APNG, compatibilidad irregular | Sí |
| Guardados repetidos | Se degrada cada vez | Seguro | Se degrada en modo con pérdida |
| Compatibilidad con navegadores | Universal | Universal | Universal desde aproximadamente 2020 |
| Herramientas fuera del navegador | En todas partes | En todas partes | Bueno, pero no garantizado |
Elegir según el contenido de la imagen
Fotografías, sin transparencia
WebP con pérdida y calidad 80 es la opción razonable más pequeña, con JPG y calidad 80 como alternativa compatible. Ambos funcionan; WebP suele ocupar una cuarta parte menos. Un recurso negociado según el contenido <picture> que sirve WebP con alternativa JPG ofrece ambos, aunque en 2026 la alternativa es sobre todo una precaución adicional.
Gráficos planos, logotipos, pixel art y capturas de interfaces
PNG, probando el modo de paleta. Aquí falla más la regla «WebP para todo». Un logotipo de doce colores en PNG de paleta puede ocupar pocos kilobytes; en WebP con pérdida y calidad 80 suele ser mayor porque describe bloques que la paleta codifica sin coste, y añade artefactos a zonas planas. WebP sin pérdida compite y a veces gana, pero conviene exportar ambos y comparar.
Sprites y cualquier imagen que necesite alfa
PNG. Todos los motores, editores y flujos de recursos lo leen; es sin pérdida, así que editar repetidamente no acumula daño, y los sprites rara vez son tan grandes como para limitar por tamaño. WebP sin pérdida es razonable para distribuir si tu motor lo admite, pero conserva PNG para trabajar. Nunca JPG: sin alfa, el sprite llega dentro de un recuadro blanco.
Fotografías con transparencia
Este es el terreno de WebP con pérdida y una ventaja real. Una foto de producto recortada con transparencia puede pesar 800KB como PNG y menos de 100KB como WebP alfa a calidad 80, sin diferencia visible. PNG es la alternativa de reserva y será varias veces mayor.
Dos ejemplos que conviene conocer
Las cifras concretas facilitan comprender las concesiones. Dos casos de procesos reales de optimización:
- Una tarjeta para redes sociales PNG de 606 KB recodificada como JPG de 81 KB. La tarjeta tenía fondo fotográfico y texto, exportada a PNG por ser el predeterminado de muchas herramientas. PNG no encaja con fotos y el archivo era enorme; con JPG de calidad 82 no hay diferencia visible al tamaño habitual. Cambiar un desplegable ahorró un 87%.
- Las imágenes de fondo bajaron aproximadamente un 57 % al pasar de PNG a WebP. Eran imágenes grandes, suaves y con muchos degradados: sin bordes definidos ni transparencia, justo el contenido que mejor maneja la compresión con pérdida. El mismo resultado visual con menos de la mitad de bytes.
Ambas mejoras se lograron ajustando el formato al contenido, no aplicando una regla universal. Haz la misma prueba con un conjunto de iconos de colores planos y PNG habría ganado las dos veces.
La excepción de las imágenes sociales
Un caso donde conviene evitar WebP: imágenes Open Graph y tarjetas de Twitter. Sus URL las consultan rastreadores y bots de vista previa —Slack, Discord, iMessage, WhatsApp, LinkedIn, lectores RSS, navegadores integrados y muchas herramientas internas—, no los navegadores modernos de las estadísticas de compatibilidad WebP.
La compatibilidad de ese conjunto es mucho peor y falla de forma incómoda: no ves un error, sino un enlace sin imagen, y lo descubres semanas después. Usar JPG puede añadir un 30% de bytes a un archivo que descarga la infraestructura, no usuarios con datos limitados.
La misma precaución se aplica al correo electrónico. Sus clientes tienen su propia compatibilidad y varios aún no admiten WebP. Los adjuntos y las imágenes destinados al correo deben ser JPG o PNG.
Un procedimiento de decisión
- ¿Necesita transparencia? Si no, pasa al paso 3. Si sí, JPG queda descartado por completo.
- ¿La imagen transparente es fotográfica? Contenido fotográfico con alfa → WebP con pérdida. Ilustración plana o sprites con alfa → PNG.
- ¿Es una fotografía? Sí → WebP con pérdida o JPG si importa la compatibilidad. No → continúa.
- ¿Colores planos y bordes nítidos? Exporta PNG con paleta y WebP sin pérdida, compara los archivos y distribuye el más pequeño. No lo des por hecho.
- ¿Es una tarjeta social, una imagen para correo o un recurso para un proceso desconocido? Ignora todo lo anterior y usa JPG o PNG.
El paso 4 es el que suele omitirse. Exportar dos archivos y comparar sus bytes tarda quince segundos y es más fiable que cualquier regla general, porque la respuesta depende realmente de la imagen concreta.
Nuestro Divisor de hojas de sprites exporta PNG, JPG o WebP con calidad para los formatos con pérdida, permitiendo probar dos formatos sin salir. Para sprites, PNG sigue siendo seguro: el formato importa más para los recursos web finales que para fotogramas intermedios.
Preguntas frecuentes
¿Ya es seguro usar WebP sin un formato alternativo?
Para navegadores, prácticamente sí: todos los actuales lo admiten desde aproximadamente 2020, cuando Safari lo incorporó. Las carencias restantes están fuera de los navegadores: aplicaciones de escritorio antiguas, algunos clientes de correo, rastreadores y bots de vista previa de enlaces y ciertos validadores de subida de CMS. Decide según quién obtiene el archivo, no según la tabla de compatibilidad de navegadores.
¿Convertir PNG a WebP puede aumentar el tamaño del archivo?
Sí, habitualmente en gráficos planos de pocos colores, especialmente PNG de paleta. WebP con pérdida tiene un mínimo de bits por bloque; largas secuencias de un color en PNG casi no ocupan. Compara siempre salidas reales, no la afirmación de que WebP pesa menos.
¿Qué hay de AVIF y JPEG XL?
AVIF comprime mejor que WebP, especialmente con calidad baja, y su compatibilidad con los navegadores ya es amplia, aunque la codificación es más lenta y hay menos herramientas fuera de los navegadores. JPEG XL es técnicamente sólido, pero su compatibilidad con los navegadores ha sido inestable. WebP sigue siendo la opción práctica predeterminada; merece la pena añadir AVIF como primera <source> en un elemento picture cuando los bytes importen mucho.
¿Guardar repetidamente un JPG realmente lo degrada?
Sí, al decodificar y recodificar; también WebP con pérdida. Cada pasada cuantiza lo ya cuantizado y acumula artefactos. Conserva un maestro sin pérdida —PNG o formato nativo— y exporta desde él, no edites el archivo con pérdida.
Convierte en ambas direcciones y compara los bytes
El paso 4 merece hacerse, no adivinarse. El conversor admite PNG, JPG y WebP en ambas direcciones y por lotes; rellena el fondo al perder alfa en JPG. Exporta dos veces, compara y entrega el menor. Si el formato ya es correcto y solo pesa demasiado, usa el compresor.
Abrir Convertidor de imágenesAbrir Compresor de imágenes