Mejor formato de imagen para webs en 2026: ¿JPG, WebP, AVIF o PNG?

Respuesta rápida: el mejor formato de imagen para webs en 2026

En 2026, el mejor formato de imagen para la mayoría de las webs es WebP. Es el estándar práctico para fotos, imágenes de producto, miniaturas, imágenes de blog y muchos gráficos con transparencia, porque casi siempre da archivos más pequeños que JPEG o PNG y funciona en los navegadores modernos.

Eso no quiere decir que "convertir todo a WebP" sea un buen plan de migración. AVIF puede batir a WebP en tamaño de archivo para assets visuales grandes. JPEG sigue siendo el fallback más seguro para navegadores antiguos, correo, importaciones de CMS y formularios de subida de terceros. PNG sigue siendo correcto para capturas, diagramas y assets bitmap donde importan los bordes exactos o la transparencia. Y para logos e iconos, SVG es mejor que todos ellos cuando el arte es vectorial.

La respuesta real para 2026 es:

Por qué esta decisión sigue importando

El formato de imagen influye en cuántos bytes descarga un visitante. Eso afecta a la velocidad de la página, al consumo de datos en móvil y al Largest Contentful Paint, sobre todo cuando la imagen está por encima del fold. La guía de Chrome Lighthouse sigue tratando a AVIF y WebP como formatos modernos con mejor compresión y calidad que los clásicos JPEG y PNG para muchas imágenes web.

Aun así, el formato es solo una parte del SEO de imagen. Un AVIF perfectamente codificado puede seguir hundiendo el rendimiento si mide 4000 px de ancho y se muestra en un hueco de 700 px. Un WebP diminuto no ayudará al posicionamiento si la imagen no tiene un alt útil y la página apenas tiene contenido. Primero elige el formato, y luego redimensiona, comprime, define width y height, escribe un alt significativo y sirve fuentes responsive.

Un modelo mental sencillo funciona: primero los píxeles correctos, después el formato correcto.

Usa WebP como estándar diario

WebP es el mejor estándar para la mayor parte del trabajo con imágenes web en 2026. Admite compresión con pérdidas para fotos, sin pérdidas para gráficos, transparencia y animación. Google indica que las imágenes WebP sin pérdidas son un 26 % más pequeñas que los PNG, y las WebP con pérdidas un 25–34 % más pequeñas que los JPEG equivalentes a calidad comparable.

Usa WebP para:

• Fotos de blogs y centros de ayuda.
• Imágenes de fichas de producto y miniaturas.
• Imágenes de páginas de categoría.
• Fotos de equipo y retratos de autor.
• Imágenes de fondo que no necesitan el ahorro extra de AVIF.
• Gráficos con transparencia cuando tu CMS y los navegadores objetivo tratan WebP con fiabilidad.

WebP también es una buena elección operativa. La mayoría de editores, herramientas de build, plugins de CMS, CDN y conversores en navegador pueden generarlo. Si un equipo pequeño quiere un solo formato moderno y no quiere mantener varios fallbacks para cada imagen, WebP es la opción menos molesta.

Usa AVIF donde el ahorro compensa la complejidad del pipeline

AVIF es el formato que hay que probar cuando el peso de las imágenes es un problema de negocio real: un hero grande, una landing con mucho tráfico, un portafolio con fotografía a ancho completo o una galería de producto donde se cargan todas las imágenes en móvil. MDN describe AVIF como un formato de alto rendimiento y libre de royalties, con soporte para transparencia, animación, mayor profundidad de color, HDR y gama amplia. En la práctica, su mayor ventaja diaria son archivos más pequeños para muchas imágenes fotográficas.

El problema está en el flujo. AVIF puede tardar más en codificarse, y algunos navegadores antiguos, webviews de app, herramientas de CMS o portales de subida no lo manejan tan bien como JPEG o WebP. Por eso AVIF suele ir como primera fuente en una cadena de fallback, no como único archivo que guardas.

Usa AVIF cuando:

• La imagen sea lo bastante grande como para que el ahorro de bytes importe.
• El asset se genere en el build o a través de un CDN.
• Puedas evaluar la calidad visual antes de publicar.
• Puedas servir un fallback WebP o JPEG.
• Tu analítica muestre uso de navegadores modernos.

No uses AVIF a ciegas para cada miniatura minúscula. Si un WebP de 14 KB pasa a un AVIF de 10 KB pero tarda más en generarse y complica tu pipeline, la ganancia puede no compensar.

Mantén JPEG para compatibilidad, fallback y flujos fuera de la web

JPEG no ha muerto. Simplemente ya no es el mejor estándar cuando el foco es el rendimiento web.

Mantén JPEG cuando la compatibilidad pesa más que la compresión máxima:

• Newsletters y adjuntos de correo.
• Importaciones de CMS antiguos o bibliotecas con validaciones de archivo estrictas.
• Apps nativas o portales de subida que solo aceptan JPEG.
• Herramientas sociales que recomprimen todo de todos modos.
• Navegadores legacy, navegadores dentro de apps, kioscos o dispositivos embebidos.
• La imagen fallback dentro de un elemento <picture>.

JPEG también está bien cuando la página no tiene muchas imágenes y el rendimiento no es una limitación. Un JPEG bien redimensionado con una calidad sensata es mejor que un WebP enorme servido con las dimensiones equivocadas. La mayor parte del mal rendimiento de imagen viene de píxeles sobredimensionados, no del JPEG en sí.

Usa PNG cuando los píxeles tengan que ser exactos

PNG no es un formato moderno para entregar fotos. Es un formato de precisión. Úsalo cuando los bordes sin pérdidas, el texto o la transparencia importen más que el tamaño de archivo.

Buenos casos de uso para PNG:

• Capturas de UI con texto pequeño.
• Gráficos, diagramas y line art.
• Logos cuando no hay SVG disponible.
• Assets bitmap con transparencia en flujos de diseño.
• Archivos que se van a editar repetidamente.

Malos casos de uso para PNG:

• Fotos de cámara.
• Fondos de hero.
• Fotografías grandes de producto sin transparencia.
• Imágenes decorativas que podrían ser WebP o AVIF.

Un PNG fotográfico puede ser muchas veces mayor que un JPEG, WebP o AVIF visualmente similar. Si la imagen es fotográfica y no necesita transparencia ni preservación exacta de píxeles, PNG suele ser la exportación equivocada.

No te olvides de SVG para logos e iconos

La mayoría de los artículos sobre "mejor formato" comparan JPG, PNG, WebP y AVIF, pero los logos e iconos de una web muchas veces son mejores como SVG. SVG es vectorial, se mantiene nítido a cualquier tamaño y suele ser mucho más pequeño que un logo ráster.

Usa SVG para:

• Logos de sitio.
• Iconos simples.
• Símbolos de interfaz.
• Ilustraciones planas que ya son naturalmente vectoriales.

Usa PNG o WebP en su lugar cuando el asset es una imagen ráster compleja, cuando la plataforma elimina el SVG o cuando no confías en el origen del SVG. SVG puede contener marcado similar a código, así que utiliza SVG solo de flujos de trabajo de confianza.

Decisiones de formato por tipo de página

Páginas distintas merecen decisiones de formato distintas. El hero de una home y una captura en un artículo de ayuda no deberían tratarse igual.

Si esta semana solo puedes hacer un cambio, empieza por las imágenes más grandes por encima del fold y las plantillas con más imágenes más visitadas. Convertir primero cada iconito parece productivo, pero rara vez mueve las métricas de rendimiento.

El patrón de fallback correcto

Para páginas en producción, el elemento <picture> deja que el navegador elija el primer formato que admite. web.dev recomienda el patrón de AVIF primero, WebP en segundo lugar y JPEG como fallback. El img anidado sigue llevando el alt, el width, el height y el src de fallback.

<picture>
  <source
    type="image/avif"
    srcset="/images/hero-1200.avif 1200w, /images/hero-2400.avif 2400w"
    sizes="100vw"
  />
  <source
    type="image/webp"
    srcset="/images/hero-1200.webp 1200w, /images/hero-2400.webp 2400w"
    sizes="100vw"
  />
  <img
    src="/images/hero-1200.jpg"
    width="1200"
    height="800"
    alt="Una cocina reformada con muebles de nogal y luz natural"
  />
</picture>

Pon el JPEG de fallback en el elemento img. Pon ahí también un alt significativo. No escondas la única descripción útil dentro de una etiqueta source; el navegador no usa el source para el alt.

Para una imagen hero de LCP, piensa además en la prioridad de carga. No apliques lazy load al hero principal. Para imágenes por debajo del fold, el lazy loading sí ayuda.

Ajustes de calidad que sirven de verdad

Los valores de calidad no son universales. Una calidad WebP de 80, una AVIF de 50 y una JPEG de 85 no significan lo mismo. Además, los distintos codificadores se comportan de manera diferente.

Usa estos valores como punto de partida, no como reglas:

Compara siempre la imagen exportada al tamaño en el que aparecerá en la página. Si una imagen se muestra a 600 px de ancho, juzgarla al 4000 px completo puede hacer que una compresión inofensiva parezca peor de lo que verá cualquier visitante. Prueba también los degradados oscuros, los tonos de piel, la textura del producto y los textos superpuestos: ahí se ven antes los problemas de compresión que en un cielo azul plano.

Un plan de migración práctico

Si estás poniendo al día una web existente, no empieces convirtiendo toda la biblioteca de medios. Empieza donde el impacto es medible.

1. Exporta una lista de las imágenes más grandes en las páginas más visitadas.
2. Marca cuáles están por encima del fold o son candidatas a LCP.
3. Redimensiona cada imagen al mayor tamaño en el que realmente se muestre.
4. Convierte las fotos a WebP primero.
5. Prueba AVIF para los héroes o galerías más pesados.
6. Deja fallbacks JPEG en plantillas que necesiten compatibilidad con navegadores antiguos, correo o CMS.
7. Deja capturas, diagramas y gráficos exactos como PNG o WebP sin pérdidas.
8. Añade width, height, srcset, sizes y un alt descriptivo.
9. Vuelve a pasar Lighthouse o tu monitor de rendimiento antes y después.

Este flujo es menos glamuroso que decir "AVIF es lo mejor", pero es lo que suele funcionar en un sitio real.

Cómo convertir formatos con PhotoTools

PhotoTools puede convertir archivos JPG, PNG, WebP, AVIF y HEIC en tu navegador. Suelta la imagen, elige el formato de destino, ajusta la calidad para salidas con pérdidas, convierte y descarga el resultado. La conversión por lotes es útil cuando estás migrando una carpeta de imágenes de producto o fotos de blog.

Antes de convertir un lote grande, haz esta prueba sencilla:

• Elige una foto luminosa, una oscura, una con un rostro y una con detalle fino.
• Exporta versiones WebP y AVIF.
• Compáralas al tamaño real de visualización.
• Comprueba el ahorro en tamaño de archivo.
• Sube un archivo al CMS para asegurarte de que la plataforma lo acepta.

Para archivos HEIC de iPhone, conviértelos a JPEG o WebP antes de publicar. HEIC es útil como formato de captura y almacenamiento, pero no es un formato seguro para servir como contenido web público.

Notas de fuentes para la recomendación de 2026

Esta recomendación se basa en documentación actual de navegadores y rendimiento, más los flujos habituales de publicación web:

• Guía de MDN sobre tipos de archivo de imagen describe AVIF, WebP, JPEG, PNG, SVG, el soporte de los navegadores y cuándo conviene un fallback.
• Documentación de Chrome Lighthouse explica por qué AVIF y WebP pueden reducir el peso de las imágenes frente a los JPEG y PNG clásicos.
• Documentación de WebP de Google recoge el ahorro de WebP sin pérdidas y con pérdidas frente a PNG y JPEG.
• web.dev sobre rendimiento de imagen explica cómo encajan los formatos modernos y el elemento <picture> en la carga de imagen y el LCP.

Versión corta: usa WebP como formato web diario, añade AVIF donde el peso de las imágenes tenga un impacto real en el rendimiento, deja JPEG para la compatibilidad y guarda PNG o SVG para los assets que de verdad los necesitan.