Los mejores formatos de imagen para la web en 2026

Las imágenes siguen siendo lo más pesado en la mayoría de las páginas web: normalmente ocupan más bytes que tus scripts, fuentes y hojas de estilo juntos. Elegir el formato adecuado es la decisión de rendimiento con mayor impacto que puedes tomar, y en 2026 la respuesta por fin se ha asentado. La versión corta: recurre primero a AVIF, usa WebP como alternativa y mantén JPEG como red de seguridad universal. PNG sigue teniendo su papel, pero más reducido de lo que la mayoría supone. Así es como conviene plantearlo.

El stack de imagen moderno de un vistazo

Tres formatos con pérdida dominan ahora el contenido fotográfico en la web, en orden descendente de eficiencia de compresión:

AVIF: derivado del códec de vídeo AV1, suele producir los archivos más pequeños con una calidad visual dada, a menudo entre un 30 y un 50 % más pequeños que JPEG y sensiblemente menores que WebP. Además admite gama de color amplia, HDR, transparencia y modos tanto con pérdida como sin pérdida.
WebP: un formato de Google algo más antiguo que sigue siendo excelente: aproximadamente entre un 25 y un 35 % más pequeño que JPEG, con soporte de transparencia y animación. Su mayor ventaja hoy es la velocidad de codificación y un soporte de navegador sólido como una roca.
JPEG: tiene casi 35 años y soporte universal. Es tu respaldo, no tu primera opción, pero se renderizará literalmente en todas partes.

La buena noticia para 2026 es que esto ya no es una apuesta. AVIF es compatible con las versiones actuales de Chrome, Edge, Firefox y Safari, y WebP lleva años funcionando en todos los navegadores importantes. Puedes consultar la matriz de soporte en tiempo real en la referencia de tipos de imagen de MDN, que registra la disponibilidad por navegador de cada formato.

AVIF o WebP: ¿cuál deberías elegir?

Si solo puedes servir un formato moderno, la decisión suele reducirse a un equilibrio entre el tamaño del archivo y el coste de codificación:

Elige AVIF cuando los bytes son lo más importante: imágenes hero grandes, portfolios de fotografía, cualquier cosa donde cada kilobyte cuente para tus métricas de carga. Además gestiona los degradados suaves y los cielos con muchos menos artefactos de bandeado que JPEG.
Elige WebP cuando necesites una codificación rápida y barata a gran escala, o cuando quieras un único formato moderno con el mayor alcance posible y un comportamiento predecible. WebP codifica mucho más rápido que AVIF, lo que importa si estás convirtiendo miles de imágenes.

En realidad no tienes por qué elegir. La respuesta correcta para un sitio en producción es ofrecer ambos y dejar que el navegador escoja, que es justo para lo que sirve el elemento <picture>. Puedes experimentar con ambos ahora mismo con el compresor de AVIF y el compresor de WebP de FileShrinking, comparar los tamaños de salida en paralelo y decidir qué funciona mejor para tu contenido. Todo se ejecuta en tu navegador, así que no se sube nada.

Servir el formato adecuado con <picture>

La forma más limpia de enviar formatos modernos con un respaldo es la negociación de contenido en HTML. El elemento <picture> te permite listar fuentes candidatas por orden de prioridad; el navegador usa la primera que entiende e ignora las demás:

Lista primero tu fuente AVIF, ya que el formato más eficiente debería ganar cuando esté disponible.
Lista WebP en segundo lugar, para captar cualquier navegador que carezca de AVIF pero admita WebP.
Pon un JPEG (o PNG) corriente en la etiqueta <img> de cierre como respaldo garantizado, y para llevar tu texto alt, el width y el height.

Como el navegador solo descarga la única fuente que elige, esto te da el formato más pequeño que cada visitante puede renderizar sin nada de JavaScript ni detección en el servidor. Para conocer el patrón de marcado completo, la guía de imágenes adaptables de web.dev explica cómo combinar <picture> con srcset también para cambiar la resolución.

Cuándo siguen importando PNG (y SVG)

Los formatos modernos con pérdida están pensados para fotografías. Son la herramienta equivocada para gráficos planos, y PNG aún se gana su lugar en unos pocos casos concretos:

Gráficos de bordes nítidos con pocos colores: logotipos, iconos, capturas de interfaz y diagramas. El PNG sin pérdida mantiene el texto y los bordes definidos, donde la compresión con pérdida los emborronaría.
Capturas de pantalla con precisión de píxel que quieras reproducir exactamente, byte a byte.
Másteres de origen que vayas a volver a editar más adelante, ya que PNG es sin pérdida y no acumula pérdida de generación.

Dicho esto, para muchos de estos trabajos SVG es aún mejor: los logotipos y los iconos sencillos dibujados como vectores se mantienen nítidos a cualquier tamaño y a menudo pesan menos que un equivalente rasterizado. Y cuando sí necesites un gráfico rasterizado con transparencia en la web, tanto AVIF como WebP admiten también un canal alfa, de modo que un WebP sin pérdida a menudo puede superar a PNG en tamaño. Si tienes un recurso en el formato equivocado, el conversor de imágenes puede cambiarlo sin volver a subir nada.

El peso de las imágenes y los Core Web Vitals

La elección del formato no solo afecta a las facturas de ancho de banda: repercute directamente en los Core Web Vitals de Google, que influyen tanto en la experiencia de usuario como en el posicionamiento en buscadores. La métrica más vinculada a las imágenes es el Largest Contentful Paint (LCP): en una página típica, el elemento más grande es la imagen hero, así que la rapidez con la que llega esa imagen determina en gran medida tu puntuación de LCP. El objetivo recomendado es un LCP por debajo de 2,5 segundos para la mayoría de tus visitas.

Unas cuantas palancas prácticas, en orden aproximado de impacto:

Reduce los bytes sirviendo AVIF o WebP en lugar de JPEG. Una imagen LCP más pequeña llega antes: esta es la mayor mejora individual.
Ajusta las imágenes a sus dimensiones de visualización. Enviar una foto de 4000 px a un hueco de 800 px desperdicia la mayor parte de la descarga. Usa srcset para servir variantes de tamaño adecuado.
Define siempre width y height (o usa aspect-ratio en CSS) para que el navegador reserve espacio y evites el desplazamiento de la maquetación, lo que protege tu puntuación de CLS.
Evita la carga diferida de la imagen LCP. Difiere la carga de las imágenes por debajo del pliegue, pero deja que la imagen hero cargue de inmediato para que no se retrase.

La conclusión para 2026

Para el contenido fotográfico, usa AVIF por defecto para obtener los archivos más pequeños, ofrece WebP como alternativa rápida y ampliamente compatible, y conserva un respaldo en JPEG dentro de un elemento <picture> para que todos los navegadores reciban algo. Reserva PNG para gráficos nítidos, capturas de pantalla y másteres sin pérdida, y usa SVG para logotipos e iconos siempre que puedas. Comprime antes de publicar, ajusta cada imagen a su hueco y tus Core Web Vitals te lo recompensarán.

¿Quieres ponerlo en práctica? Convierte y comprime tus imágenes directamente en tu navegador con las herramientas de AVIF y WebP, o cambia de formato con el conversor de imágenes: sin subidas, sin cuentas y tus archivos nunca salen de tu dispositivo.