Imagyc›Artículos

Formatos de imagen JPEG, PNG, WebP, AVIF y JXL para sitios web

Publicado el 9 de octubre de 2026 · 10 min de lectura

La foto de un producto debe mostrar detalles y cargar rápido en el móvil. Un logotipo necesita bordes limpios y, a menudo, fondo transparente. Un banner puede ocupar buena parte de la pantalla y retrasar el contenido que el visitante vino a buscar. Cada situación requiere un cuidado distinto con el archivo.

JPEG, JPG, PNG, WebP, AVIF y JXL aparecen en esta elección, pero no son seis tecnologías diferentes: JPEG y JPG son dos extensiones del mismo formato.¹ Para un sitio web, conviene empezar comparando WebP y AVIF, mantener JPEG o PNG como alternativa compatible y evaluar JXL cuando sus características aporten una ventaja concreta.

La decisión debe considerar la imagen, el navegador y el dispositivo del visitante. Cambiar de formato puede reducir bastante el peso, pero un archivo con dimensiones excesivas sigue exigiendo descarga y procesamiento innecesarios.²

Qué cambia entre los formatos de imagen

Todos los formatos de este artículo trabajan con píxeles. Lo que cambia es cómo se almacenan y comprimen esos puntos. La compresión con pérdida descarta información para reducir el archivo. La compresión sin pérdida permite recuperar exactamente los píxeles codificados.³

Esto no significa que toda compresión con pérdida deje una imagen visiblemente mal. Bien ajustada, puede conservar la apariencia necesaria para una foto de producto. El problema surge cuando elimina texturas, crea manchas o perjudica las letras pequeñas.

También conviene separar dimensiones y peso. Una imagen de 2.000 por 2.000 píxeles puede ocupar pocos kilobytes y necesitar más memoria para mostrarse que una versión menor. La transparencia es otro recurso independiente: permite colocar un objeto recortado sobre distintos fondos sin incluir un rectángulo blanco alrededor.

JPEG y JPG para fotografías y compatibilidad

Un archivo terminado en .jpg no tiene más o menos calidad que otro terminado en .jpeg solo por la extensión. Cambiar el nombre de la extensión no comprime ni convierte la imagen.¹

El JPEG tradicional de la web utiliza compresión con pérdida y suele funcionar bien en fotografías con muchos colores y transiciones suaves. Su compatibilidad amplia resulta útil para compartir archivos, integrar sistemas antiguos y ofrecer una alternativa a formatos recientes. No tiene transparencia ni animación nativas en su uso habitual en sitios web.^{1, 4}

Sus limitaciones aparecen en imágenes con letras, líneas finas o grandes zonas de color uniforme. Una compresión intensa puede crear borrones alrededor de esos elementos. En esos casos, compara PNG y WebP sin pérdida.

También existe JPEG progresivo. Puede mostrar una versión inicial y mejorarla a medida que avanza la descarga. Esto ayuda a percibir antes la imagen en ciertas situaciones, pero no elimina la necesidad de reducir dimensiones y peso.¹

PNG para transparencia y detalles precisos

PNG utiliza compresión sin pérdida y admite transparencia con distintos niveles de opacidad. Es una opción para capturas de pantalla, diagramas, ilustraciones con texto y archivos cuyos píxeles deben conservarse con precisión.⁵

En fotografías, sin embargo, puede generar archivos mucho mayores que las alternativas con pérdida. Una galería completa en PNG merece revisión, sobre todo cuando las imágenes no necesitan transparencia.

Hay un detalle en las herramientas de optimización: reducir la paleta de colores antes de guardar un PNG puede alterar la imagen, aunque la compresión del formato sea sin pérdida.⁶ Revisa degradados, sombras y bordes después de exportar.

La animación se ofrece mediante APNG, una extensión del PNG incorporada a la especificación. Un PNG convencional de un solo fotograma sigue siendo estático; el soporte del formato no convierte cualquier archivo en una animación.⁵

WebP como opción práctica para el uso diario

WebP combina compresión con y sin pérdida, transparencia y animación. Puede servir para fotografías, recortes de productos y piezas gráficas.⁷

Su soporte es amplio en los navegadores actuales. Por eso, constituye un buen punto de partida para muchos sitios: genera una versión WebP, compárala con el original y comprueba si la reducción mantiene lo importante.

Google publica pruebas en las que WebP produce archivos menores que JPEG y PNG, pero esos resultados no son una promesa para cualquier imagen.⁷ Un archivo ya muy bien comprimido puede ofrecer poco margen. Adapta el formato al material en lugar de convertir todo sin revisar.

AVIF para buscar archivos más pequeños con buena calidad

AVIF utiliza la tecnología de compresión AV1 y puede reducir considerablemente el peso de las fotografías frente a formatos anteriores. Admite transparencia, animación, compresión sin pérdida y recursos avanzados de color.^{8, 9}

También soporta HDR y profundidades de 8, 10 y 12 bits por componente de color. En términos sencillos, esto permite representar más gradaciones y una mayor amplitud de luminosidad cuando la imagen original y la pantalla ofrecen esos recursos. Convertir una foto convencional a AVIF no crea detalles ni HDR inexistentes.⁹

Es una buena opción para probar en banners y fotografías de catálogo. Revisa texturas de tela, cabello, piel y pequeños detalles: reducir demasiado la calidad puede darles una apariencia excesivamente suavizada.

La exportación puede exigir más procesamiento, según el programa y los ajustes. En una colección grande, evalúa también el tiempo de conversión. En el sitio, ofrece una alternativa compatible para quienes utilicen navegadores antiguos.⁸

JXL para alta fidelidad y carga progresiva

JXL es la extensión de JPEG XL, un formato distinto del JPEG tradicional. Ofrece compresión con y sin pérdida, transparencia, animación, HDR y recursos para visualización progresiva.¹⁰

Una característica interesante es la recompresión reversible de JPEG. En implementaciones que conservan los datos necesarios, se puede almacenar el contenido en JXL y reconstruir exactamente el JPEG original. Esto no recupera información que el JPEG ya había perdido.¹⁰

Conviene evaluar JXL en fotografías de alta calidad y proyectos donde sea importante preservar detalles. Su capacidad para mostrar una vista previa y mejorarla durante la descarga también puede ayudar con imágenes grandes.¹¹

La compatibilidad exige comprobar versiones. El 6 de octubre de 2026, Chrome anunció soporte desde la versión 155. Edge 155 también añadió decodificación, y Firefox 158, todavía en beta en la fecha de esta investigación, incluye el recurso activado por defecto.^{11, 12, 13} La recomendación antigua de que JXL no funciona en Chrome necesita actualizarse.

Comparación de características

La tabla resume las capacidades de los formatos. El soporte de recursos específicos, especialmente animación y HDR, puede variar entre versiones de navegadores.^{1, 5, 7, 9, 10}

Compatibilidad en navegadores de ordenador

JPEG y PNG tienen compatibilidad amplia. WebP y AVIF funcionan en los principales navegadores actuales, mientras que JXL requiere revisar la versión. Este cuadro se refiere a imágenes estáticas y se verificó el 9 de octubre de 2026.^{4, 11, 12, 13, 14}

Safari no muestra JXL de forma progresiva durante la descarga: la imagen aparece cuando llega el archivo completo.⁴ La documentación de implementación de Mozilla también señala que Safari carece de animación JXL. Prueba ese recurso por separado.^{15, 16}

Compatibilidad en móviles y navegadores mobile

En un móvil, el nombre del navegador no basta para resolver la duda. La versión de la aplicación, el sistema operativo y el motor utilizado para mostrar páginas influyen en la compatibilidad.

El siguiente cuadro se concentra en imágenes estáticas. “Actual” significa una versión reciente, no todos los dispositivos antiguos todavía en circulación. Las novedades de JXL se contrastaron con anuncios de los fabricantes, porque una actualización tarda en distribuirse.^{11, 13, 14, 17, 18, 19, 16, 20, 21}

No apliques la versión de Chrome en Android a Chrome en iPhone. Cuando un navegador de iOS utiliza WebKit, los recursos disponibles dependen también del sistema de Apple. WebKit documenta soporte para JXL en componentes de iOS 17 utilizados por aplicaciones.¹⁹ Prueba la aplicación que usa realmente tu público.

Opera Mini merece una consideración propia: los datos consultados indican soporte para WebP, pero no para AVIF ni JXL. El soporte de Opera Mobile no garantiza el mismo comportamiento en Mini.^{14, 17, 20}

Abrir una imagen tampoco significa poder exportarla en ese formato. En la API Canvas, utilizada por muchas herramientas online, PNG es obligatorio; otros formatos dependen de la implementación. Si el tipo solicitado no es compatible, la exportación puede devolver PNG.²² Comprueba el formato real del archivo generado.

Cómo usar los formatos para mejorar el SEO y la velocidad

Google no publica una regla que obligue a todos los sitios a usar un único formato. Su documentación incluye JPEG, PNG, WebP y AVIF entre los admitidos en la Búsqueda; JXL no aparece en esa lista en la consulta realizada para este artículo.²³ Compatibilidad en el navegador y soporte documentado por el buscador son cuestiones distintas.

Una estrategia práctica consiste en ofrecer AVIF o WebP y mantener JPEG o PNG en el elemento img como alternativa. Con el elemento HTML picture, el navegador elige una versión compatible. Para probar JXL, añádelo como otra opción manteniendo una alternativa reconocida.²⁴ Quien configure el sitio debe indicar el tipo correcto de cada archivo.

Antes de convertir, redimensiona. Una fotografía de 4.000 píxeles no tiene que enviarse completa para una tarjeta de producto pequeña. Las pantallas de alta densidad pueden necesitar más píxeles, pero siempre en relación con el tamaño de visualización. Con srcset y sizes, el sitio ofrece opciones y ayuda al navegador a elegir.^{2, 25}

Después, ajusta la calidad mirando la imagen al tamaño en que se utilizará. El valor “80” en dos programas o formatos no representa necesariamente la misma calidad.¹ Compara la apariencia y los bytes transferidos. Conserva un original de buena calidad para generar nuevas versiones y evitar conversiones sucesivas con pérdida.

Da prioridad a la imagen que domina la primera pantalla. Puede ser el elemento medido por Largest Contentful Paint, o LCP. No utilices carga diferida en ella. fetchpriority="high" puede ayudar cuando se aplica a la imagen realmente prioritaria; para las situadas más abajo, evalúa loading="lazy".²⁶

Indica anchura y altura para reservar espacio antes de la descarga y reducir desplazamientos del contenido.²⁷ Usa caché y una CDN cuando tenga sentido: reutilizar archivos y acercar su entrega al visitante puede mejorar la carga.²

Para que Google comprenda la imagen, utiliza nombres descriptivos, texto alternativo adecuado y contenido relevante alrededor. zapatilla-running-azul.webp comunica mejor el tema que IMG_8472.webp. El atributo alt debe describir la función o el contenido de la imagen sin acumular palabras clave.²⁸

Cómo decidir en tu sitio web

En una tienda online, empieza por las imágenes de mayor impacto: banner inicial, foto principal del producto y miniaturas del catálogo. Compara WebP y AVIF con calidad visual semejante. Para un producto recortado, conserva la transparencia con WebP, AVIF o PNG. En capturas de pantalla con texto, compara opciones sin pérdida antes de aceptar una versión borrosa.

JXL puede entrar en las pruebas cuando la fidelidad o la visualización progresiva aporten un beneficio, siempre con alternativa compatible. Para logotipos e iconos que deben crecer sin perder definición, considera también SVG, un formato vectorial fuera de esta comparación de imágenes en píxeles.⁴

Evalúa la página en móviles, con conexiones limitadas y dispositivos similares a los de tus visitantes. Además de descargar el archivo, el dispositivo tiene que decodificarlo. Un menor peso no siempre significa que la imagen termine de mostrarse antes.²

Utiliza PageSpeed Insights para comparar la página antes y después, distinguiendo las pruebas de laboratorio de los datos de usuarios reales.²⁹ Sigue LCP y la estabilidad del diseño. Google utiliza Core Web Vitals en sus sistemas de clasificación, pero obtener buenos valores no garantiza las primeras posiciones.³⁰

Elige el formato que mantiene reconocible el producto, llega rápido y funciona para tu público. Ese resultado, medido en la página, debe orientar la siguiente conversión.