Formatos de imagen para web: cuál elegir (guía 2026)

Las imágenes dan confianza, muestran tu producto y explican tus servicios, pero también suelen ser lo que más pesa en una página. Elegir bien el formato permite mantener la calidad sin que la web tarde en cargar. En esta guía repasamos JPG, PNG, WebP, AVIF, SVG y GIF: cuándo usar cada uno y cómo servirlos sin romper nada.

Revisado el 28 de octubre de 2026 con la guía de formatos de imagen de MDN, la documentación de Google Search sobre imágenes (actualizada el 2 de marzo de 2026), la página de WebP de Google (7 de agosto de 2025), el anuncio de AVIF en WordPress 6.5 y los artículos de web.dev sobre carga diferida y prioridad de recursos. El soporte de los navegadores y de tu hosting puede variar: comprueba el tuyo antes de decidir.

La respuesta corta: qué formato usar según la imagen

Tu imagen es…	Formato recomendado	Alternativa o respaldo
Una fotografía (producto, local, equipo)	WebP o AVIF	JPG como respaldo
Un logotipo, un icono o un diagrama sencillo	SVG	PNG o WebP si solo tienes la versión en píxeles
Una captura de pantalla o un gráfico con texto y bordes nítidos	PNG o WebP sin pérdida	AVIF sin pérdida, si tu entorno lo admite
Una imagen con fondo transparente	SVG, PNG, WebP o AVIF	Según sea vectorial o fotográfica
Una animación corta	WebP o AVIF animados	GIF solo si el entorno lo exige

La regla de fondo es sencilla: fotos, con pérdida y compresión moderna; logos y diagramas, vectoriales o sin pérdida. Veamos cada formato.

Los seis formatos de un vistazo

Formato	Mejor para	Transparencia	Animación	Compresión
JPG	Fotografías	No	No	Con pérdida
PNG	Capturas, diagramas, logos en píxeles	Sí (completa)	No	Sin pérdida
WebP	Fotos y gráficos en general	Sí	Sí	Con y sin pérdida
AVIF	Fotos con la máxima compresión	Sí	Sí	Con y sin pérdida
SVG	Logos, iconos, diagramas	Vectorial (fondo libre)	Posible con código	Basado en código
GIF	Animaciones simples y antiguas	Solo total o nula	Sí	Sin pérdida, 256 colores

JPG o JPEG: el clásico para fotografías

El JPG comprime con pérdida y es perfecto para fotografías y otras imágenes de tono continuo, porque toleran bien esa compresión. Funciona en todos los navegadores y programas, de ahí que siga siendo el mejor formato de respaldo. No admite transparencia ni animación. Ojo con subir fotos a tamaño de cámara: aunque el formato sea el adecuado, una imagen enorme pesa igual.

PNG: ideal para transparencias y gráficos nítidos

El PNG comprime sin pérdida y admite transparencia completa. MDN lo recomienda para capturas, diagramas, logos y líneas, o cuando necesitas fondo transparente. Ojo con usarlo para fotografías: el archivo será mucho más pesado sin ganar nada visible.

WebP: el formato moderno más equilibrado

WebP admite compresión con y sin pérdida, transparencia y animación. Según Google, las imágenes WebP con pérdida son entre un 25 % y un 34 % más pequeñas que los JPEG comparables con la misma calidad (medida con el índice SSIM) y las WebP sin pérdida son un 26 % más pequeñas que los PNG. Funciona en Chrome, Edge, Firefox, Opera y Safari, según MDN, y no en Internet Explorer. Es el punto de equilibrio para la mayoría de webs.

AVIF: máxima compresión para webs modernas

AVIF es un formato abierto y libre de regalías basado en AV1, con compresión con y sin pérdida, transparencia y animación. Según MDN funciona en Chrome, Edge, Firefox, Opera y Safari. Tiene dos cautelas: no admite renderizado progresivo (el archivo se descarga entero antes de mostrarse) y tu entorno debe poder generarlo. En WordPress, la versión 6.5 añadió soporte de subida de AVIF siempre que el hosting lo permita; se comprueba en Herramientas > Salud del sitio > Info > Manejo de medios. WordPress no convierte a AVIF automáticamente al subir: conserva el archivo original, salvo que un desarrollador lo configure.

SVG: perfecto para logos e iconos

El SVG es un gráfico vectorial basado en código: se ve nítido a cualquier tamaño y MDN recomienda priorizarlo para logos, iconos y diagramas. Ojo con la seguridad: es un archivo de código, así que sube solo SVG de fuentes de confianza y, si usas WordPress, hazlo con un método que los revise.

GIF: mejor evitarlo salvo casos muy concretos

El GIF es de 1987, limita a 256 colores y, según MDN, rinde peor que las alternativas. Para animaciones, MDN recomienda WebP o AVIF, y Google indica que los WebP animados pueden pesar menos que los GIF. Reserva el GIF para entornos antiguos que no admitan otra cosa.

Cómo servir el formato correcto sin romper nada

Como AVIF y WebP no tienen soporte histórico completo, MDN recomienda ofrecer un respaldo con la etiqueta picture, y Google indica que hay que especificar siempre una imagen de respaldo en el atributo src, porque no todos los navegadores y rastreadores entienden picture o srcset. Un ejemplo:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" width="1200" height="800"
       alt="Mesa de trabajo con un portátil y una libreta" loading="lazy">
</picture>

• Indica siempre ancho y alto. web.dev recomienda añadir width y height a todas las etiquetas img para que el navegador reserve el espacio y evitar saltos de diseño.
• Carga diferida solo debajo del primer pantallazo. loading="lazy" retrasa la carga hasta que la imagen se acerca; web.dev recomienda usarlo solo en imágenes fuera de la vista inicial, no en la imagen principal.
• Da prioridad a la imagen principal. El atributo fetchpriority="high" es una pista (no una orden) para que el navegador cargue antes la imagen más importante, según web.dev; es compatible con Chrome 102, Edge 102, Firefox 132 y Safari 17.2.
• Usa imágenes en la etiqueta img, no solo en CSS. Google no indexa las imágenes que solo se cargan desde CSS.

Este equilibrio entre peso y velocidad influye en las métricas de experiencia de la página: Core Web Vitals (LCP, INP y CLS), que Google usa junto con muchas otras señales sin que cumplirlas garantice una posición. Más contexto en diseño Mobile First.

Antes de subir una imagen: checklist

1. Elige el formato según la tabla de arriba.
2. Redimensiona al tamaño con el que se va a mostrar; no subas fotos a tamaño de cámara.
3. Comprime con una herramienta o con el propio editor de imágenes, comprobando que la calidad sigue siendo buena.
4. Pon un nombre descriptivo al archivo, corto y legible, con extensión que coincida con el tipo.
5. Escribe un texto alternativo útil (alt): descriptivo y sin rellenarlo de palabras clave.
6. Indica ancho y alto y aplica carga diferida salvo en la imagen principal.
7. Comprueba el resultado en el móvil y mide el peso real de la página.

Cómo afectan las imágenes al SEO

Según la documentación de Google Search sobre imágenes (actualizada el 2 de marzo de 2026), Google admite imágenes en BMP, GIF, JPEG, PNG, WebP, SVG y AVIF referenciadas en la etiqueta img. El texto alternativo es el atributo más importante para los metadatos de la imagen, y Google advierte de que rellenarlo con palabras clave perjudica la experiencia y puede considerarse spam. Los nombres de archivo son una pista leve: mejor cortos y descriptivos que genéricos como «image1.jpg». También recuerda que las fotos de alta calidad atraen más que las borrosas, y que para imágenes que Google podría no descubrir se puede usar un sitemap de imágenes.

Si quieres entender cómo se muestran tus imágenes en los resultados de búsqueda, mira qué es la visibilidad SERP y cómo usar Search Console.

Errores frecuentes al subir imágenes a una web

• Subir fotos a tamaño de cámara y dejar que el navegador las reduzca.
• Usar PNG para fotografías sin necesitar transparencia.
• Aplicar carga diferida a la imagen principal de la página.
• No indicar ancho y alto, de forma que la página salta al cargar.
• Dejar nombres como «IMG_4823.jpg» y textos alternativos vacíos o llenos de palabras clave.
• Subir SVG de cualquier procedencia sin revisarlos.
• Usar solo AVIF o solo WebP sin un respaldo cuando tu público puede usar navegadores antiguos.

Y en WordPress, ¿qué debo saber?

WordPress admite la subida de WebP y, desde la versión 6.5, también de AVIF si el hosting lo permite. Para generar versiones modernas hay plugins y configuraciones específicas; si no sabes qué soporta tu servidor, pregunta a quien gestione tu web o a tu hosting antes de instalar nada. Si quieres que lo dejemos resuelto, consulta nuestro servicio de desarrollo web para pymes y nuestra guía sobre cómo encajan todas las piezas de una estrategia digital.

Conclusión

No existe un formato perfecto, sino el adecuado para cada imagen: SVG para logos e iconos, WebP o AVIF para fotografías con un respaldo en JPG, PNG cuando necesitas transparencia o nitidez y GIF solo si no queda más remedio. Después, lo que más suma es redimensionar bien, indicar ancho y alto, cargar la imagen principal con prioridad y escribir un alt útil.

Preguntas frecuentes sobre formatos de imagen para web

¿Cuál es el mejor formato de imagen para una web?

No hay uno solo. Para fotografías, WebP o AVIF (con JPG de respaldo si lo necesitas); para logotipos, iconos y diagramas, SVG; para capturas o gráficos con transparencia y bordes nítidos, PNG o WebP sin pérdida; y para animaciones, WebP o AVIF animados en lugar de GIF. MDN recomienda precisamente SVG para logos e iconos y WebP o AVIF para lograr mejor compresión en fotos.

¿Es mejor WebP o JPG?

En general, WebP, porque comprime mejor: según Google, las imágenes WebP con pérdida son entre un 25 % y un 34 % más pequeñas que los JPEG comparables con la misma calidad medida con el índice SSIM. JPG sigue siendo útil por su compatibilidad universal y como formato de respaldo, o cuando necesitas enviar una imagen a alguien que no puede abrir WebP.

¿Debo usar PNG para fotos en mi web?

No, salvo que necesites transparencia o calidad sin pérdida. Las fotografías toleran bien la compresión con pérdida, así que en PNG pesan mucho más sin que se note la mejora. Reserva el PNG para capturas, diagramas, líneas y gráficos con bordes nítidos.

¿Puedo usar AVIF ya?

Sí, con precauciones. MDN indica que AVIF funciona en Chrome, Edge, Firefox, Opera y Safari, y Google Imágenes acepta AVIF. Aun así, conviene mantener un formato de respaldo con la etiqueta picture, y tener en cuenta que AVIF no admite renderizado progresivo (el archivo debe descargarse completo antes de mostrarse). En WordPress, la subida de AVIF existe desde la versión 6.5 si tu hosting lo permite.

¿Es buena idea usar SVG para mi logotipo?

Sí, en la mayoría de los casos. Es un formato vectorial: se ve nítido a cualquier tamaño y suele pesar muy poco en logotipos e iconos sencillos. Súbelo solo si procede de una fuente de confianza y, si usas WordPress, mediante un método que revise el archivo, porque un SVG es un archivo de código y no debe aceptarse sin control.

¿Sigue valiendo la pena usar GIF?

Rara vez. MDN indica que el GIF tiene peor rendimiento y recomienda WebP o AVIF para animaciones, y Google señala que los WebP animados pueden pesar menos que los GIF. Úsalo solo si necesitas compatibilidad con un entorno antiguo, como algunos correos electrónicos.

¿Google indexa las imágenes en WebP o AVIF?

Sí. Según la documentación de Google Search (actualizada el 2 de marzo de 2026), admite imágenes referenciadas en la etiqueta img en formato BMP, GIF, JPEG, PNG, WebP, SVG y AVIF. Ten en cuenta que Google no indexa las imágenes que solo se cargan desde CSS, y que conviene que la extensión del archivo coincida con su tipo.

¿Cómo sé si las imágenes de mi web pesan demasiado?

Mide la página con herramientas como PageSpeed Insights o las de desarrollador del navegador: te muestran qué imágenes son pesadas, cuáles se pueden servir en un formato moderno y cuál es la imagen principal de la carga (LCP). También puedes revisar el informe de Core Web Vitals en Search Console. Empieza por las imágenes más pesadas y por las que se ven al abrir la página.

Fuentes consultadas el 28 de octubre de 2026: guía de formatos de imagen (MDN), WebP (Google), imágenes en Google Search, WordPress 6.5 añade soporte de AVIF, carga diferida de imágenes (web.dev), Fetch Priority (web.dev) y Core Web Vitals (web.dev).