Elige el formato de imagen adecuado para una foto, una captura, un recurso transparente o una interfaz, sin sacrificar innecesariamente la calidad ni el rendimiento.
Publicado el 31 de agosto de 2026Lectura : 25 minPor Equipo Bethemesh
Elegir un formato de imagen para la Web parece sencillo hasta que se combinan varias restricciones: fotografía, transparencia, logotipo, captura de pantalla, animación, compatibilidad, peso del archivo y calidad visual. En ese momento, la pregunta «¿qué formato es el mejor?» se vuelve engañosa.
No existe un formato universalmente mejor. Existe un formato más adecuado para un tipo de contenido y un uso determinados.
JPEG sigue siendo extremadamente eficaz para muchas fotografías. PNG conserva un papel importante para las imágenes que necesitan compresión sin pérdida o determinados usos de transparencia. WebP reúne varias capacidades en un formato ampliamente implantado. AVIF puede ofrecer una compresión muy eficiente, especialmente para fotografías, pero su utilidad depende del contenido, de la codificación y de la cadena de distribución.
Y para un logotipo o un icono, la mejor respuesta puede ser no elegir ninguno de estos cuatro formatos raster y utilizar en su lugar SVG.
Este artículo propone, por tanto, un método de decisión en lugar de una clasificación artificial.
La elección rápida
Si tienes que decidir en unos segundos:
Contenido
Primera opción que probar
Alternativa
Fotografía
AVIF o WebP
JPEG
Captura de pantalla / interfaz
WebP o PNG
AVIF según el resultado
Imagen con transparencia
WebP, AVIF o PNG
según compatibilidad y calidad
Logotipo / icono geométrico
SVG
PNG si el raster es obligatorio
Ilustración raster compleja
WebP / AVIF
PNG o JPEG según el contenido
Animación raster
WebP según la necesidad
GIF en determinados contextos históricos
Archivo que requiere una restitución exacta
PNG según el caso
formato fuente apropiado
Esta tabla es un punto de partida, no una regla absoluta.
La elección correcta debe validarse con el archivo real. El conversor de imágenes permite comparar varios formatos, y el compresor de imágenes ayuda a encontrar un equilibrio entre peso y calidad.
Antes del formato: ¿qué es una imagen raster?
JPEG, PNG, WebP y AVIF pueden representar imágenes raster, es decir, imágenes compuestas por una cuadrícula de píxeles.
Cada píxel contiene información de color y, según el formato y el archivo, eventualmente información de transparencia.
Si este concepto todavía no está claro, consulta ¿Cómo se construye una imagen digital?. Comprender los píxeles, los canales RGB, el alfa y las dimensiones hace mucho más sencilla la elección de un formato.
El formato no cambia la naturaleza fundamental de una fotografía: determina principalmente cómo se codifican, comprimen y almacenan los datos necesarios para reproducirla.
Formato, resolución y compresión: tres decisiones diferentes
Un error frecuente consiste en mezclarlo todo.
Tomemos una fotografía de 4.000 × 3.000 píxeles.
Puedes:
redimensionarla a 1.600 × 1.200;
elegir WebP;
ajustar un nivel de calidad.
Estas tres acciones responden a tres preguntas diferentes.
Una optimización eficaz combina las tres decisiones en lugar de esperar que el formato lo resuelva todo.
JPEG: ¿por qué se sigue utilizando?
JPEG es antiguo, pero «antiguo» no significa «inútil».
Sigue siendo especialmente adecuado para muchas fotografías porque su compresión con pérdida aprovecha eficazmente las características de las imágenes que contienen:
muchos tonos;
transiciones progresivas;
texturas;
ruido fotográfico.
Una fotografía natural puede reducirse considerablemente de peso manteniendo una calidad visual aceptable.
JPEG también disfruta de una compatibilidad extremadamente amplia y de un ecosistema maduro.
Su principal defecto aparece cuando se le pide representar contenidos para los que nunca fue ideal: texto muy nítido, colores planos, contornos gráficos o transparencia.
¿Por qué JPEG funciona bien con las fotografías?
Una fotografía suele contener variaciones complejas pero progresivas.
JPEG puede eliminar parte de la información que el sistema visual humano percibe con menor facilidad, lo que permite reducir considerablemente el volumen de datos.
Esta compresión es con pérdida: el archivo descomprimido no es una copia bit a bit de los píxeles originales.
Cuanto mayor sea la compresión, más visibles serán las pérdidas.
Pueden aparecer:
bloques;
halos;
manchas;
pérdida de detalles finos;
degradación de los contornos.
Por tanto, el ajuste adecuado no es «calidad máxima», sino calidad suficiente para el uso previsto.
¿Por qué JPEG es malo para determinados gráficos?
Imagina una captura de pantalla que contiene:
texto negro;
fondo blanco;
líneas finas;
iconos;
colores planos.
La compresión JPEG puede crear artefactos alrededor de los contornos.
Alrededor de un carácter negro sobre blanco pueden aparecer píxeles intermedios no deseados.
El archivo puede entonces resultar:
más borroso;
menos limpio;
incluso, en ocasiones, más pesado que una alternativa mejor adaptada.
Para interfaces, diagramas o imágenes con colores planos, PNG o WebP pueden ser más adecuados.
¿JPEG admite transparencia?
El JPEG tradicional utilizado en la Web no proporciona un canal alfa comparable al de PNG, WebP o AVIF.
Si tu imagen debe contener zonas transparentes, JPEG no suele ser la opción adecuada.
A veces se ve una imagen recortada guardada en JPEG sobre fondo blanco. Esto solo funciona si el fondo final debe permanecer realmente blanco.
En cuanto el archivo se coloca sobre otro color, el rectángulo blanco se hace visible.
PNG: ¿por qué es diferente?
PNG utiliza compresión sin pérdida para sus datos de imagen.
Esto significa que, después de la descompresión, los valores representados pueden recuperarse sin las pérdidas típicas de una compresión fotográfica como JPEG.
PNG es especialmente útil para:
capturas de pantalla;
gráficos con colores planos;
imágenes con transparencia;
elementos cuyos contornos deben permanecer nítidos;
determinados flujos de trabajo que requieren una restitución exacta de los píxeles.
Pero «sin pérdida» no significa «siempre mejor».
Para una fotografía grande, un PNG puede ser mucho más pesado que un JPEG, WebP o AVIF adecuado.
¿PNG es siempre sin pérdida?
En su uso clásico, PNG es un formato de compresión sin pérdida.
Sin embargo, un flujo de trabajo puede modificar la imagen antes de codificarla como PNG.
Por ejemplo, una herramienta puede reducir el número de colores de una imagen y guardar después el resultado en PNG. El archivo PNG comprime entonces sin pérdida esa nueva representación, pero la transformación anterior ya ha eliminado información.
Es un matiz importante al comparar herramientas de optimización.
El formato y el tratamiento aplicado antes de la codificación son dos cosas diferentes.
PNG-8 y PNG-24: ¿qué significan estos términos?
Históricamente, las expresiones PNG-8 y PNG-24 aparecen en herramientas gráficas.
Describen esencialmente distintas formas de utilizar PNG:
paleta limitada en determinados casos;
colores directos más ricos en otros.
Una imagen que utiliza pocos colores puede ser extremadamente eficiente con una paleta.
Una fotografía, en cambio, contiene muchísimas variaciones y rara vez aprovecha de forma óptima un PNG clásico.
Es mejor razonar sobre la naturaleza del contenido y el resultado obtenido que seguir una regla simplificada basada en el nombre mostrado por un programa.
¿Por qué PNG es excelente para las capturas de pantalla?
Una interfaz suele contener grandes zonas uniformes y repeticiones:
fondos;
botones;
líneas;
texto;
superficies de tarjetas.
PNG puede aprovechar eficazmente algunas de estas estructuras sin introducir los artefactos de contorno de JPEG.
El resultado permanece nítido.
Esto no significa que PNG gane siempre: WebP sin pérdida u otras codificaciones pueden producir a veces un archivo más pequeño.
El método correcto consiste en comparar.
PNG y transparencia
PNG ha sido históricamente uno de los formatos más utilizados para la transparencia en la Web.
Puede almacenar un canal alfa que permite niveles intermedios de transparencia.
Actualmente, WebP y AVIF también pueden gestionar la transparencia, lo que elimina el antiguo monopolio práctico de PNG para esta necesidad.
WebP: ¿por qué ha ganado tanto terreno?
WebP fue diseñado para ofrecer varias capacidades útiles para la Web dentro de una misma familia de formatos.
Puede admitir, entre otras cosas:
compresión con pérdida;
compresión sin pérdida;
transparencia;
animación.
Esta versatilidad explica su adopción.
Para muchos sitios, WebP se ha convertido en un excelente formato generalista.
Una fotografía JPEG puede convertirse a menudo a WebP con un peso menor y una calidad visual comparable, mientras que un PNG puede sustituirse en algunos casos por un WebP sin pérdida más compacto.
Pero «WebP es más moderno» no significa «convierte todo automáticamente».
¿WebP con pérdida o sin pérdida?
WebP dispone de varios modos.
WebP con pérdida
Especialmente interesante para fotografías e imágenes complejas cuando el objetivo es reducir el peso.
WebP sin pérdida
Interesante para contenidos que necesitan una restitución exacta de los píxeles codificados, como determinadas capturas o ilustraciones.
WebP con transparencia
La transparencia puede utilizarse en flujos de trabajo con o sin pérdida según las capacidades de la codificación elegida.
Por tanto, hay que evitar comparar «WebP» con «PNG» como si solo existiera un único comportamiento de WebP.
¿WebP es siempre más ligero que JPEG?
No.
A menudo puede ser más eficiente, pero el resultado depende:
de la imagen;
del codificador;
de los ajustes;
de la calidad visual buscada;
de los metadatos;
de las dimensiones.
Un JPEG ya muy optimizado puede ser difícil de mejorar de manera significativa sin introducir una pérdida visual adicional.
Por el contrario, una conversión WebP bien ajustada puede aportar una ganancia importante.
La única respuesta fiable es probar el archivo real.
¿WebP es siempre mejor que PNG?
Tampoco.
Para algunas imágenes muy sencillas, PNG puede ser extremadamente eficiente.
Para otras, WebP sin pérdida será claramente mejor.
Y si el contenido es realmente vectorial —logotipo, pictograma, diagrama geométrico— SVG puede ser más lógico que cualquiera de los dos.
El formato debe seguir la estructura del contenido.
AVIF: ¿por qué despierta tanto interés?
AVIF utiliza tecnologías de imagen derivadas del ecosistema AV1 y puede proporcionar una compresión muy eficiente.
Para determinadas fotografías, puede producir archivos sensiblemente más pequeños que JPEG o WebP con una calidad visual comparable.
También admite funcionalidades modernas como:
transparencia;
alta profundidad de color según los archivos;
HDR en cadenas compatibles;
compresión con o sin pérdida según los modos disponibles.
Es, por tanto, un formato especialmente interesante para distribuir imágenes modernas.
Pero su eficiencia no evita tener que comprobar el coste y el resultado de la codificación.
¿AVIF es siempre el mejor formato?
No.
Probablemente sea el error más importante que hay que evitar.
Un AVIF puede:
ser excelente para una fotografía;
resultar menos interesante para una imagen pequeña;
necesitar más tiempo de codificación;
producir artefactos diferentes;
no aportar una ganancia suficiente para justificar la complejidad del flujo de trabajo.
El mejor formato es el que ofrece el mejor resultado dentro de tu cadena de producción y para tu contenido.
Una estrategia realista puede utilizar perfectamente AVIF para algunas imágenes, WebP para otras y SVG para los gráficos vectoriales.
AVIF y transparencia
AVIF puede admitir transparencia.
Por tanto, se convierte en una posible alternativa a PNG o WebP para determinados recursos recortados.
Pero disponer de un canal alfa no basta para decidir cuál es la mejor opción.
Hay que comparar:
peso;
calidad de los contornos;
tiempo de codificación;
compatibilidad del entorno objetivo;
complejidad de generación.
Para un pequeño icono geométrico, SVG seguirá siendo a menudo más natural.
¿Por qué AVIF puede tardar más en codificarse?
Los códecs modernos pueden utilizar análisis y algoritmos más complejos para conseguir una mejor compresión.
En un build estático, este coste puede ser aceptable porque la imagen se codifica una vez y se sirve muchas veces.
En una aplicación donde las imágenes se generan al vuelo, el coste de CPU puede adquirir mayor importancia.
Por tanto, hay que distinguir:
peso de red;
coste de codificación;
coste de decodificación;
simplicidad operativa.
Una optimización Web nunca se reduce al tamaño final del archivo.
¿Y GIF?
GIF sigue siendo conocido por la animación, pero sus limitaciones de color y su eficiencia suelen ser deficientes para animaciones modernas.
WebP animado, vídeo u otras soluciones pueden ser más apropiadas según el contenido.
Para una animación compleja o larga, un vídeo real suele ser mucho más eficiente que una secuencia de imágenes animadas.
GIF conserva, no obstante, una compatibilidad histórica y una sencillez que explican su presencia.
En el contexto de este artículo, no debe considerarse el formato raster de referencia para fotografías o imágenes estáticas modernas.
¿Y SVG?
SVG es fundamentalmente diferente.
Describe formas, trazados, textos y transformaciones en lugar de una cuadrícula fija de píxeles.
Para:
logotipos;
iconos;
diagramas;
ilustraciones geométricas;
SVG puede permanecer nítido a distintos tamaños con un peso muy reducido.
Y cuando deban coexistir varios tamaños según la pantalla, el futuro artículo Imágenes responsivas: comprender srcset y sizes explicará cómo permitir que el navegador elija entre varios candidatos.
¿Por qué el formato no basta para mejorar el rendimiento?
Imagina dos archivos:
foto-4000px.aviffoto-1200px.webp
El primero utiliza un códec más moderno, pero contiene muchos más píxeles de los necesarios.
El segundo puede cargarse más rápido simplemente porque tiene las dimensiones correctas.
Una arquitectura puede generar varias representaciones de una misma fuente.
Por ejemplo:
hero-1280.avifhero-1280.webphero-1280.jpg
Después, el HTML puede ofrecer varias fuentes.
Históricamente, esta estrategia permitía aprovechar los formatos modernos manteniendo una solución alternativa.
Hoy la compatibilidad de WebP y AVIF es mucho mejor que en sus inicios, pero la estrategia debe adaptarse siempre a los navegadores y entornos realmente objetivo.
No es necesario generar tres formatos en todas partes si eso no aporta ningún beneficio a tu audiencia.
Pero <picture> también sirve para otros escenarios, especialmente la dirección artística (art direction), cuando se desea proporcionar un encuadre diferente según el contexto.
Cambiar JPEG por WebP no hace que una imagen sea accesible.
La accesibilidad depende, entre otras cosas:
del texto alternativo;
del papel de la imagen;
de su contenido;
del contraste si contiene información visual;
del contexto HTML.
Si el texto está integrado directamente en una imagen, la elección del formato puede afectar a su nitidez, pero el problema fundamental sigue siendo utilizar una imagen de texto cuando habría sido más apropiado utilizar texto real.
Una imagen de 1.200 × 800 píxeles sigue siendo un recurso de 1.200 × 800 píxeles tanto si es JPEG como WebP o AVIF, salvo que la conversión incluya también un redimensionamiento.
Después, el navegador puede mostrarla con un tamaño CSS diferente.
No existe un formato universalmente mejor. Para fotografías, WebP y AVIF son excelentes candidatos; JPEG sigue siendo pertinente. Para gráficos sin pérdida o determinadas capturas, PNG y WebP son útiles. Para logotipos e iconos, SVG puede ser preferible.
¿AVIF es mejor que WebP?
Puede comprimir algunas imágenes de manera más eficiente, especialmente fotografías, pero no de forma sistemática. Compara peso, calidad, tiempo de codificación y restricciones de tu proyecto.
¿WebP es mejor que JPEG?
A menudo lo es en relación peso/calidad, pero no siempre. Un JPEG bien optimizado puede seguir siendo perfectamente adecuado.
¿PNG es mejor que JPEG?
No en términos absolutos. PNG es más apropiado para contenidos que requieren compresión sin pérdida, determinadas capturas y transparencia. JPEG suele ser mucho más eficiente para fotografías.
¿Qué formato utilizar para una imagen transparente?
PNG, WebP y AVIF pueden gestionar transparencia. Para un logotipo o icono, SVG puede ser todavía más apropiado.
¿Qué formato utilizar para un logotipo?
SVG cuando existe una versión vectorial adecuada para el uso. En caso contrario, pueden considerarse PNG, WebP o AVIF según las necesidades raster.
¿Qué formato utilizar para una captura de pantalla?
PNG o WebP suelen ser buenos primeros candidatos. Compara el peso y la nitidez del texto y de los contornos.
¿Debo convertir todos mis JPEG a WebP?
No. Mide la ganancia real. Una conversión masiva solo resulta útil si reduce suficientemente el peso sin degradar la calidad ni complicar innecesariamente el proyecto.
¿Debo convertir todas mis imágenes a AVIF?
No. AVIF es una herramienta adicional, no una obligación. Utilízalo cuando su ganancia justifique su coste.
¿Por qué mi AVIF pesa más que mi WebP?
El resultado depende de la imagen y de los ajustes de codificación. Ningún códec gana con todos los contenidos y en todos los niveles de calidad.
¿El formato cambia la resolución?
No necesariamente. Una conversión puede conservar exactamente las mismas dimensiones en píxeles. El redimensionamiento es una operación distinta.
¿Qué herramienta utilizar para cambiar de formato?
¿Por qué utilizar varios tamaños de una misma imagen?
Para evitar que una pantalla pequeña descargue el archivo previsto para una pantalla grande o de alta densidad. La guía Imágenes responsivas: comprender srcset y sizes detallará este mecanismo.
¿Una imagen WebP o AVIF es automáticamente eficiente?
Descubre cómo un archivo SVG describe formas, utiliza viewBox y se integra en una página web, con buenas prácticas de responsive, accesibilidad y seguridad.
Reduce el peso de una imagen eligiendo las dimensiones adecuadas, el formato correcto y un nivel de calidad controlado, sin una degradación visible innecesaria.
