PNG vs WebP vs AVIF: elegir el formato de imagen correcto en 2026
Subes una imagen a tu sitio y de inmediato te enfrentas a una pregunta sin respuesta universalmente correcta: ¿en qué formato debería estar? PNG está en todas partes y siempre funciona. WebP recorta un tercio del tamaño del archivo. AVIF comprime aún más, pero codifica lentamente. JPEG XL acecha en el horizonte. Y mientras tanto tu puntuación en Lighthouse baja porque tomaste una decisión por costumbre, no por intención.
Esta guía corta con el ruido. Al final, sabrás exactamente qué formato elegir — y por qué — según el tipo de contenido, tu audiencia y tus restricciones de rendimiento.
Los formatos de un vistazo
Antes de profundizar en las ventajas e inconvenientes individuales, aquí tienes una referencia comparativa para los formatos cubiertos en este artículo.
Las cifras de soporte en navegadores son aproximadas a principios de 2026 y provienen de datos de Can I Use.
JPEG: la base universal
JPEG ha sido el formato predeterminado para fotografías en la web desde mediados de los años 90. Esa longevidad es tanto su fortaleza como su techo.
En qué destaca JPEG
JPEG utiliza compresión de transformada discreta del coseno (DCT) para descartar información visual a la que el ojo humano es menos sensible. Para imágenes de tono continuo — fotografías, degradados, escenas 3D renderizadas — esto funciona extremadamente bien. Con configuraciones de calidad alrededor de 75–85, las imágenes JPEG son prácticamente indistinguibles del original para la mayoría de los espectadores mientras ofrecen tamaños de archivo manejables para la web.
El soporte en navegadores es efectivamente del 100%. Todo cliente de correo, toda plataforma social, todo dispositivo del mundo lee JPEG sin problema.
Dónde falla JPEG
JPEG no puede almacenar un canal de transparencia (alfa). Cualquier imagen que necesite un fondo transparente — un logotipo sobre una tarjeta de color, una foto de producto sobre un fondo desconocido — no puede ser JPEG.
JPEG también gestiona mal los bordes duros y los bloques de color plano. Comprime una captura de pantalla de código o un diagrama con texto nítido y verás artefactos en bloque alrededor de cada borde. Para cualquier cosa con transiciones de alto contraste, JPEG es la herramienta equivocada.
Para fotografías guardadas como PNG en lugar de JPEG, el coste en tamaño es severo: los archivos PNG para fotos son habitualmente 5–10× más grandes que sus equivalentes JPEG, con cero beneficio perceptible en calidad.
PNG: precisión sin pérdida cuando importa
PNG (Portable Network Graphics) almacena cada píxel exactamente como fue guardado. No se descarta nada. La contrapartida es el tamaño — PNG usa compresión sin pérdida, lo que significa que las imágenes con variación de color compleja (fotos) se mantienen grandes.
En qué destaca PNG
PNG es el formato correcto siempre que importe la fidelidad perfecta a nivel de píxel:
- Logotipos y marcas — bordes nítidos, colores planos, transparencia para colocación en cualquier fondo
- Capturas de pantalla — elementos de UI, fragmentos de código y texto renderizado nítidamente a cualquier nivel de zoom
- Diagramas e ilustraciones — gráficos, diagramas de flujo, conjuntos de iconos con bordes definidos
- Imágenes que se editarán de nuevo — cada guardado de un JPEG recomprime y degrada; PNG hace ida y vuelta sin pérdida
PNG también soporta transparencia alfa completa, lo que significa que puedes tener píxeles semitransparentes, no solo enmascaramiento de on/off. Eso importa para sombras, brillos y bordes antialiased en formas no rectangulares.
Dónde falla PNG
No guardes una fotografía como PNG si pretendes servirla en la web. Una foto DSLR de alta resolución puede ser 3 MB como JPEG de calidad 85 y 25 MB como PNG. Ni el usuario ni tu factura de ancho de banda agradecerán esa decisión. Para contenido fotográfico, PNG es casi siempre el formato equivocado.
WebP: el todoterreno práctico
Google introdujo WebP en 2010 y pasó la siguiente década integrándolo en todos los navegadores. En 2026, el soporte global de navegadores se sitúa en torno al 97%, lo que en la práctica significa que puedes usarlo sin un fallback para la mayoría de audiencias.
Los números de compresión
La investigación original de Google comparando WebP con JPEG en calidad SSIM (Índice de Similitud Estructural) equivalente encontró que WebP es un 25–34% más pequeño que JPEG. Estudios independientes desde entonces han confirmado que este rango se mantiene en diversas bibliotecas de imágenes. Para un sitio que sirve miles de imágenes al mes, esa reducción se traduce directamente en menores costos de CDN y tiempos de carga más rápidos.
WebP soporta tanto el modo con pérdida como sin pérdida, convirtiéndolo en un sustituto real tanto de JPEG (modo con pérdida) como de PNG (modo sin pérdida) en la mayoría de situaciones. Crucialmente, también soporta transparencia alfa completa en ambos modos — algo que JPEG no puede hacer en absoluto.
Cuándo usar WebP
- Imágenes web generales donde la compatibilidad amplia es la prioridad
- Sustituir JPEG para fotos de productos, imágenes editoriales e imágenes destacadas
- Sustituir PNG para logotipos y gráficos donde quieras transparencia con una huella menor que PNG
- Cualquier situación donde quieras una decisión de formato único que funcione en toda tu biblioteca de imágenes
Para comprimir imágenes a WebP o convertir formatos de imagen entre PNG, JPEG y WebP, puedes hacerlo directamente en el navegador sin instalar nada.
Los casos extremos donde WebP rinde peor
El modo con pérdida de WebP puede introducir bandas sutiles en degradados suaves con configuraciones de compresión agresivas — más que JPEG con tamaños de archivo equivalentes. Para cierto contenido fotográfico, en particular tonos de piel y degradados de cielo, AVIF produce resultados más limpios con el mismo tamaño de archivo.
AVIF: máxima compresión, soporte en crecimiento
AVIF (AV1 Image File Format) deriva del códec de video AV1 desarrollado por la Alliance for Open Media. Representa un salto generacional en eficiencia de compresión.
Los números de compresión
Los estudios que comparan AVIF con JPEG en calidad visual equivalente muestran consistentemente reducción de tamaño del 50% o más. Un JPEG de 200 KB a menudo puede reproducirse como un AVIF de 90–100 KB indistinguible a distancias de visualización normales. Netflix, que codifica enormes volúmenes de imágenes de miniaturas y vistas previas, ha publicado resultados que muestran que AVIF reduce el ancho de banda de imágenes en un 50% en comparación con JPEG.
Para la entrega de imágenes de alto volumen — catálogos de productos de comercio electrónico, plataformas de redes sociales, sitios de noticias con artículos con muchas imágenes — esos ahorros no son marginales. Afectan significativamente al gasto en CDN y a los tiempos de carga de página.
Soporte de HDR y gama de colores amplia
AVIF soporta de forma nativa el color HDR (Alto Rango Dinámico) y gamas de colores amplias como Display P3. En pantallas compatibles, las imágenes AVIF pueden mostrar luces más brillantes y sombras más profundas que los formatos SDR. Para showcases de fotografía, portafolios de diseño y cualquier sitio donde importe la fidelidad de imagen en pantallas premium, esto es un diferenciador significativo.
El problema de la velocidad de codificación
La debilidad de AVIF es el tiempo de codificación. Comparado con JPEG o WebP, la codificación AVIF es significativamente más lenta — a menudo 5–10× más lenta con configuraciones de calidad equivalentes. La mayoría de los equipos mitigan esto codificando AVIF en tiempo de construcción o como un trabajo por lotes de una sola vez, en lugar de bajo demanda.
La velocidad de decodificación (lo que hace el navegador al renderizar la imagen) es rápida y no es una preocupación para el usuario en hardware moderno.
Soporte en navegadores en 2026
El soporte de AVIF se sitúa en aproximadamente el 93% entre navegadores a principios de 2026, lo que significa que deberías seguir sirviendo un fallback en WebP o JPEG para cobertura completa. El patrón estándar es:
<picture>
<source srcset="image.avif" type="image/avif" />
<source srcset="image.webp" type="image/webp" />
<img src="image.jpg" alt="Descripción" />
</picture>Este enfoque de mejora progresiva significa que los navegadores con capacidad AVIF obtienen el archivo más pequeño, los que pueden usar WebP obtienen un buen punto intermedio, y el resto cae al JPEG.
JPEG XL: merece seguimiento, aún no está listo
JPEG XL (.jxl) es el formato técnicamente más capaz de esta lista. Iguala o supera a AVIF en compresión, soporta la recodificación sin pérdida de archivos JPEG existentes (haciéndolo únicamente útil para el archivado) y gestiona HDR, gama de colores amplia y animación. El comité JPEG lo diseñó como sustituto a largo plazo de todo el ecosistema JPEG.
El problema es el soporte en navegadores. A principios de 2026, JPEG XL sigue detrás de flags experimentales en la mayoría de navegadores. Nuestra recomendación: No uses JPEG XL para entrega web hoy. Síguelo. Para trabajo web en producción, AVIF + fallback WebP es la combinación correcta ahora.
El árbol de decisión
¿Necesitas transparencia?
Sí — Usa WebP (modo sin pérdida) como tu formato principal. JPEG no es una opción.
No — Continúa abajo.
¿Es una fotografía o un gráfico?
Fotografía (tono continuo, color complejo):
- Si necesitas el soporte de navegadores más amplio posible: JPEG
- Si quieres archivos significativamente más pequeños con soporte casi universal: WebP (modo con pérdida)
- Si estás optimizando el ancho de banda a escala y puedes servir un fallback: AVIF con fallback WebP
Gráfico (logotipo, diagrama, captura de pantalla, texto):
- Usa WebP (modo sin pérdida) o PNG dependiendo de si importa más el tamaño del archivo o la compatibilidad con herramientas
- Nunca uses JPEG para gráficos con bordes duros o áreas de color plano
¿Estás sirviendo a escala?
Si tu sitio entrega más de unos pocos miles de solicitudes de imagen al día, la brecha de compresión entre JPEG y AVIF se vuelve significativa en costos reales. Implementa el elemento <picture> con fallbacks AVIF + WebP + JPEG.
Resumen de referencia rápida
Cómo convertir entre formatos
ImageMagick (línea de comandos):
# Convertir JPEG a WebP
magick input.jpg -quality 82 output.webp
# Convertir JPEG a AVIF
magick input.jpg -quality 60 output.avif
# Convertir PNG a WebP sin pérdida
magick input.png -define webp:lossless=true output.webpSquoosh (basado en navegador): La app Squoosh de Google te permite comparar formatos lado a lado con un control deslizante de calidad y vista previa del tamaño del archivo en tiempo real.
FileCrank: Puedes convertir formatos de imagen directamente en tu navegador sin instalar nada.
Para procesamiento masivo y reducción de tamaño, la herramienta de compresión de imágenes gestiona la conversión de formato y la optimización de calidad en un solo paso.
La relación entre la elección de formato y la compresión
Elegir el formato correcto es solo la mitad. Para profundizar en la calibración calidad-tamaño, el artículo sobre cómo comprimir imágenes sin perder calidad cubre la mecánica práctica. Para una explicación fundamental de por qué la compresión con y sin pérdida produce resultados tan diferentes, consulta compresión con pérdida vs. sin pérdida explicada.
Conclusión
Para la mayoría de proyectos web modernos en 2026:
- WebP como formato predeterminado — gestiona transparencia, funciona en modos con y sin pérdida, tiene soporte casi universal en navegadores y es un 25–34% más pequeño que JPEG
- AVIF donde más importan los ahorros de ancho de banda — con un fallback en WebP o JPEG
<picture>para el 7% restante de navegadores - PNG solo cuando la precisión sin pérdida o la compatibilidad con herramientas lo requiera específicamente
- JPEG como fallback de último recurso, y todavía la elección correcta para el correo electrónico
¿Listo para ponerlo en práctica? Convierte tus imágenes a WebP o AVIF, o comprime imágenes existentes para ver cuánto tamaño puedes recuperar.