El mejor formato de imagen para páginas web en 2026: ¿JPG, PNG, WebP o AVIF?
·
Las imágenes suelen ser lo que más pesa en una página web, y el formato que elijas puede reducir su tamaño a la mitad o más. No hay un ganador único, porque cada formato sirve para algo distinto. Esta guía compara las opciones principales, explica qué se gana y qué se pierde con cada una y te da una forma clara de elegir.
Por qué importa el formato
El formato determina cómo se comprime una imagen, si puede tener transparencia o animación y qué programas pueden abrirla. En una web importan sobre todo tres cosas: el peso del archivo, la calidad y la compatibilidad. Los archivos más ligeros cargan antes, lo que beneficia a los visitantes y al posicionamiento. La calidad define cómo se ve la imagen. La compatibilidad define quién puede verla.
Elegir bien el formato suele ser la forma más rápida de aligerar una página sin cambiar su aspecto. El tamaño y la calidad también cuentan, como se explica en la lista de comprobación para optimizar imágenes web.
Comparativa de los formatos principales
| Formato | Ideal para | Puntos fuertes | Puntos débiles |
|---|---|---|---|
| JPG | Fotos | Compatible en todas partes, fotos ligeras | Sin transparencia, con pérdida |
| PNG | Gráficos, capturas de pantalla | Sin pérdida, con transparencia | Muy pesado para fotos |
| WebP | Fotos y gráficos | Más ligero que JPG y PNG, con transparencia y animación | Algunas herramientas antiguas no lo aceptan |
| AVIF | Fotos | Suele ser el más pequeño, admite HDR | Lento de generar, menos compatible |
| SVG | Logotipos, iconos, ilustraciones | Nítido a cualquier tamaño, muy ligero | No sirve para fotos |
| GIF | Animaciones muy pequeñas | Funciona en todas partes | 256 colores, archivos pesados |
Ventajas e inconvenientes de cada formato
JPG
- Ventajas: funciona en todas partes y las fotos pesan poco.
- Inconvenientes: no tiene transparencia y pierde calidad con compresiones altas.
PNG
- Ventajas: nitidez perfecta y transparencia.
- Inconvenientes: una foto puede pesar diez veces más que en JPG.
WebP
- Ventajas: suele pesar entre un 25 y un 35 por ciento menos que el JPG con calidad similar, admite transparencia y animación, y lo soportan todos los navegadores actuales.
- Inconvenientes: algunos programas y clientes de correo antiguos no pueden usarlo.
AVIF
- Ventajas: a menudo aún más pequeño, con HDR y gama de color amplia.
- Inconvenientes: es lento de generar y fuera de los navegadores tiene menos compatibilidad. Consulta qué es AVIF.
SVG
- Ventajas: muy ligero en gráficos sencillos, nítido en cualquier pantalla y se puede modificar con CSS.
- Inconvenientes: no es adecuado para fotografías.
Paso a paso: elige un formato para cada imagen
- 1¿Es un gráfico vectorial, como un logotipo o un icono? Usa SVG.
- 2¿Es una fotografía? Usa WebP, o JPG si necesitas la máxima compatibilidad. Valora AVIF para imágenes de cabecera en las que cada kilobyte cuenta.
- 3¿Es un gráfico o una captura con texto nítido? Usa PNG, o WebP sin pérdida si quieres un archivo más pequeño.
- 4¿Necesita transparencia? Usa PNG, WebP o AVIF. El JPG no puede ser transparente.
- 5¿Es una animación? Mejor un WebP animado o un vídeo corto sin sonido que un GIF.
- 6Convierte los archivos. JPG a WebP y PNG a WebP cubren los casos habituales en tu navegador, y PNG a JPG reduce las fotos que se guardaron como PNG.
Una forma segura de servir formatos modernos
Envuelve la imagen en un elemento picture con una fuente AVIF, después una fuente WebP y, como respaldo, una etiqueta img con un JPG normal: <picture><source type="image/avif" srcset="photo.avif"><source type="image/webp" srcset="photo.webp"><img src="photo.jpg" alt="..."></picture>. El navegador elige la primera que entiende, así que nadie ve una imagen rota. Muchas CDN de imágenes y frameworks lo hacen de forma automática. La guía de imágenes adaptables explica los detalles y la guía para pasar a WebP muestra cómo hacerlo sin riesgos.
Errores frecuentes
- Usar PNG para fotografías, lo que puede hacer que las páginas pesen diez veces más de lo necesario.
- Usar GIF para animaciones, cuando un WebP animado o un vídeo pesan mucho menos.
- Quitar los formatos de respaldo y dejar sin imagen a navegadores y herramientas antiguos.
- Elegir el formato pero olvidar el tamaño: un WebP bien dimensionado siempre gana a un JPG demasiado grande.
- Usar WebP en las imágenes de vista previa para redes sociales, que algunas plataformas no muestran.
Preguntas frecuentes
¿Cuál es el mejor formato de imagen para una web?
Para fotos, WebP es una buena opción por defecto, con JPG como respaldo y AVIF como mejora opcional. Usa SVG para logotipos e iconos vectoriales, y PNG o WebP sin pérdida para gráficos que necesiten bordes exactos.
¿WebP es mejor que JPG para el SEO?
WebP por sí solo no posiciona mejor, pero los archivos más ligeros hacen la página más rápida, lo que favorece las señales de experiencia de página. Google puede indexar imágenes WebP.
¿Debo usar AVIF en lugar de WebP?
AVIF puede ser más pequeño, pero es más lento de generar y algo menos compatible. WebP es más sencillo para la mayoría de las webs y puedes añadir AVIF más adelante en las imágenes importantes.
¿Cuándo sigue siendo recomendable el PNG?
Para capturas de pantalla, diagramas y gráficos con texto nítido en los que importa la exactitud, y cuando una plataforma exige PNG. Para fotos, elige WebP o JPG.
¿Necesito un formato de respaldo?
Es un seguro muy barato. Un elemento picture deja que el navegador use el primer formato que soporte, así que los navegadores y herramientas antiguos siguen mostrando una imagen.