Formatos de imagen explicados: JPEG, PNG, WebP, AVIF y más
Cada imagen en la web usa un formato. JPEG, PNG, WebP, AVIF. Cada uno comprime de forma distinta, soporta funciones diferentes y funciona mejor para ciertos tipos de imágenes.
Elige el formato equivocado y tus imágenes pesan más de lo necesario. Tus páginas cargan más lento. Tus visitantes se van. Elige el correcto y consigues imágenes nítidas con una fracción del tamaño de archivo.
Esta guía desglosa todos los formatos de imagen principales. Vas a aprender qué hace cada uno, dónde destaca y cuál usar para tu proyecto.
¿Qué es un formato de imagen y por qué importa?
Un formato de imagen es la forma en que una foto se almacena como archivo. Controla tres cosas: tamaño del archivo, calidad visual y qué funciones soporta la imagen.
Algunos formatos usan compresión con pérdida (lossy). Descartan datos que tus ojos no notan para reducir el tamaño. JPEG hace esto. También WebP y AVIF.
Otros formatos usan compresión sin pérdida (lossless). Reducen el archivo sin perder un solo píxel de detalle. PNG funciona así. También WebP en modo lossless.
El formato que elijas afecta:
- Tamaño del archivo. Una foto guardada como AVIF puede ser un 50% más pequeña que la misma foto en JPEG.
- Calidad. Algunos formatos manejan mejor los degradados y tonos de piel. Otros conservan mejor el texto nítido y los bordes definidos.
- Funciones. ¿Necesitas transparencia? PNG, WebP y AVIF la soportan. JPEG no. ¿Necesitas animación? GIF, WebP y AVIF pueden hacerlo.
- Velocidad. Los archivos más pequeños cargan más rápido. En sitios web, el formato afecta directamente la velocidad de carga y los Core Web Vitals.
Para una explicación detallada de cómo funciona la compresión, nuestra guía completa de compresión de imágenes cubre los fundamentos.
¿Qué es JPEG y cuándo deberías usarlo?
JPEG es el formato de imagen más usado en el mundo. Creado en 1992, es compatible con todos los dispositivos, navegadores, aplicaciones y sistemas operativos.
JPEG usa compresión con pérdida. Analiza la imagen en pequeños bloques de 8x8 píxeles y elimina detalles difíciles de ver. Con ajustes de alta calidad (80-95%), la pérdida es invisible. Con ajustes más bajos, empiezas a ver artefactos con aspecto de bloques.
JPEG es ideal para:
- Fotos e imágenes con muchos colores
- Compartir imágenes por correo electrónico o mensajería
- Flujos de trabajo de impresión donde la compatibilidad universal importa
- Cualquier situación donde necesitas que "funcione en todas partes"
JPEG se queda corto cuando:
- Necesitas transparencia (JPEG no la soporta)
- Comprimes capturas de pantalla, texto o gráficos con bordes definidos (los artefactos aparecen rápido)
- Quieres el menor tamaño de archivo posible (WebP y AVIF lo superan por un 25-50%)
Los ajustes de calidad de JPEG van de 0 a 100. Para uso web, 75-85 ofrece el mejor equilibrio entre tamaño y calidad. Subir por encima de 90 añade peso al archivo sin mejora visible.
JPEG sigue siendo la opción segura para compartir fotos. Pero para la web, los formatos nuevos comprimen mejor. No hay razón para servir JPEG en tu sitio web en 2026 cuando WebP hace el mismo trabajo con un 30% menos de tamaño.
¿Qué es PNG y en qué se diferencia de JPEG?
PNG usa compresión sin pérdida. Cada píxel queda exactamente como estaba. No se descarta nada.
Eso hace que PNG sea perfecto para imágenes donde la precisión importa. Capturas de pantalla, logos, diagramas, elementos de interfaz y cualquier cosa con texto o líneas definidas. PNG mantiene esos bordes nítidos.
PNG también soporta transparencia. Puedes tener un logo con fondo transparente, o un gráfico que se funde suavemente con cualquier color de página. JPEG no puede hacer esto.
La desventaja es el tamaño del archivo. Una foto guardada como PNG es 3-10 veces más grande que la misma foto en JPEG. Esto se debe a que las fotos tienen millones de valores de color ligeramente diferentes, y la compresión sin pérdida no puede reducirlos tan eficientemente como la compresión con pérdida.
PNG es ideal para:
- Capturas de pantalla y maquetas de interfaz
- Logos e iconos con fondos transparentes
- Gráficos con texto, líneas definidas o colores planos
- Archivos fuente en flujos de edición donde necesitas cero pérdida de calidad
PNG se queda corto cuando:
- Sirves fotos en la web (demasiado pesado)
- El tamaño del archivo importa más que la precisión píxel a píxel
- Necesitas animación (usa GIF, WebP o AVIF en su lugar)
Existen dos variantes de PNG. PNG-8 soporta solo 256 colores (como GIF) y crea archivos diminutos para gráficos simples. PNG-24 soporta millones de colores y transparencia completa. La mayoría de herramientas generan PNG-24 por defecto.
Para gráficos web, PNG está siendo reemplazado por WebP y SVG. WebP lossless es un 25-30% más pequeño que PNG con calidad idéntica. SVG es aún más pequeño para logos e iconos porque usa matemáticas en lugar de píxeles.
¿Qué es WebP y por qué está reemplazando a JPEG?
WebP es un formato moderno creado por Google en 2010. Hace todo lo que JPEG y PNG pueden hacer, pero con archivos más pequeños.
WebP soporta compresión con pérdida y sin pérdida. Maneja transparencia. Soporta animación. Un solo formato cubre todos los casos de uso que antes necesitaban JPEG, PNG y GIF por separado.
Los números hablan por sí solos:
- WebP con pérdida es un 25-35% más pequeño que JPEG a la misma calidad
- WebP sin pérdida es un 25-30% más pequeño que PNG
- WebP animado es un 30-50% más pequeño que GIF
La compatibilidad con navegadores es casi universal. Chrome, Firefox, Safari, Edge y todos los navegadores móviles principales soportan WebP. Más del 97% de los usuarios globales pueden ver imágenes WebP de forma nativa.
WebP es el formato predeterminado práctico para imágenes web en 2026. Te da un ahorro significativo en tamaño de archivo sin ningún problema de compatibilidad.
Cubrimos los detalles técnicos en nuestra guía dedicada: Compresión WebP: por qué es mejor que JPEG.
¿Es AVIF mejor que WebP?
AVIF es el formato de imagen más nuevo del mercado. Está basado en el códec de video AV1, desarrollado por un grupo que incluye a Google, Apple, Mozilla y Netflix.
AVIF comprime todavía mejor que WebP. Los archivos son típicamente un 20-30% más pequeños que WebP a la misma calidad visual. Comparado con JPEG, los archivos AVIF pueden ser un 50% más pequeños.
AVIF destaca en fotos con degradados suaves, tonos de piel y transiciones de color sutiles. Mantiene la calidad mejor que cualquier otro formato con tamaños de archivo muy bajos. Cuando llevas la compresión al límite, AVIF sigue viéndose limpio mientras JPEG y WebP muestran artefactos.
| Formato | Tamaño típico vs JPEG | Transparencia | Animación | Soporte en navegadores |
|---|---|---|---|---|
| JPEG | Referencia | No | No | 100% |
| PNG | 3-10x más grande | Sí | No | 100% |
| WebP | 25-35% más pequeño | Sí | Sí | 97%+ |
| AVIF | 40-50% más pequeño | Sí | Sí | 93%+ |
¿Las desventajas? AVIF codifica 5-20 veces más lento que WebP. Eso importa para compresión en tiempo real y procesamiento de grandes lotes. La compatibilidad con navegadores está en ~93%, excelente pero no totalmente universal.
Para una comparación detallada lado a lado, lee AVIF vs WebP: ¿Cuál comprime mejor?
¿Qué pasa con GIF, SVG y JPEG XL?
Más allá de los cuatro principales, varios otros formatos sirven para propósitos específicos.
GIF
GIF es el formato de imagen animada original. Soporta solo 256 colores, lo que lo hace pésimo para fotos pero suficiente para animaciones simples, memes e imágenes de reacción.
Los archivos GIF son grandes comparados con las alternativas modernas. WebP y AVIF animados producen archivos mucho más pequeños con mejor calidad. Pero GIF funciona en todas partes sin excepción, y el formato está tan integrado en la cultura de mensajería que no va a desaparecer.
Usa GIF para: Animaciones rápidas compartidas en redes sociales y apps de mensajería. Para todo lo demás, prefiere WebP animado.
SVG
SVG es fundamentalmente diferente de todos los demás formatos en esta lista. Es un formato vectorial. En lugar de almacenar colores de píxeles, almacena descripciones matemáticas de formas, líneas y curvas.
Eso significa que las imágenes SVG escalan a cualquier tamaño sin perder calidad. Un logo se ve igual de nítido a 16px y a 1600px. Y los archivos SVG son diminutos para gráficos simples. Un logo que pesa 50 KB como PNG podría pesar 3 KB como SVG.
Usa SVG para: Logos, iconos, ilustraciones, gráficos y cualquier imagen hecha de formas y texto. Nunca uses SVG para fotos.
JPEG XL
JPEG XL fue diseñado como el verdadero sucesor de JPEG. Ofrece mejor compresión que WebP y AVIF, soporta modos con y sin pérdida, maneja HDR y amplia gama de colores, y puede transcodificar archivos JPEG existentes sin pérdida (recomprimiéndolos un 20% más pequeños sin ninguna pérdida de calidad).
Sobre el papel, JPEG XL es el mejor formato de imagen jamás creado. En la práctica, tiene un problema: Chrome eliminó el soporte en 2023, y sin Chrome, el formato no puede ganar tracción en la web. Safari lo soporta. Firefox lo tiene detrás de una bandera experimental.
JPEG XL podría encontrar su lugar en flujos de trabajo de fotografía y uso de archivo. Pero para la web, quédate con WebP y AVIF.
¿Cómo elegir el formato correcto?
Aquí tienes un árbol de decisión simple:
¿Es un logo, icono o gráfico simple? Usa SVG. Si SVG no es una opción, usa PNG o WebP sin pérdida.
¿Es una foto para la web? Usa WebP. Si tu configuración soporta negociación de formato, sirve AVIF con WebP como respaldo.
¿Es una foto para compartir o imprimir? Usa JPEG. Funciona en todas partes.
¿Necesita transparencia? Usa WebP o PNG. Evita AVIF si necesitas máxima compatibilidad.
¿Es una animación? Usa WebP para calidad. Usa GIF para máxima compatibilidad.
¿Es una captura de pantalla o imagen con texto? Usa PNG o WebP sin pérdida. La compresión con pérdida crea artefactos alrededor del texto.
Para la mayoría de sitios web, la estrategia práctica es:
- Usa SVG para logos e iconos
- Usa WebP para todas las fotos e imágenes de contenido
- Mantén JPEG como respaldo para los pocos usuarios en navegadores antiguos
Si manejas un sitio con mucho tráfico y quieres los archivos más pequeños posibles, añade AVIF a la mezcla. Sírvelo a navegadores que lo soporten y usa WebP como respaldo para el resto.
Para ayuda eligiendo los ajustes de compresión correctos, consulta nuestra guía sobre compresión lossy vs lossless.
¿Cómo será el futuro de los formatos de imagen?
La tendencia es clara: los formatos siguen mejorando en compresión mientras mantienen alta calidad.
AVIF sigue ganando adopción. A medida que las velocidades de codificación mejoren y el soporte en navegadores se amplíe, probablemente se convertirá en el nuevo estándar en los próximos años.
JPEG XL podría resurgir si Chrome revierte su decisión o si un caso de uso importante (como el ecosistema de Apple) impulsa la adopción.
La compresión basada en inteligencia artificial también está surgiendo. Los códecs de imagen neuronales pueden comprimir imágenes aún más que AVIF aprendiendo patrones en los datos de imagen. Hoy son experimentales, pero podrían transformar la compresión de imágenes en el futuro.
Por ahora, el consejo práctico es simple. Usa WebP como tu formato web predeterminado. Añade AVIF donde tenga sentido. Mantén JPEG y PNG para casos específicos donde la compatibilidad o la precisión sin pérdida importan.
Tus imágenes representan la mayor parte del peso de tu página. El formato correcto puede reducir ese peso a la mitad. CompressIMG te lo pone fácil. Sube tus imágenes, comprímelas al mejor formato y nota la diferencia al instante. Sin necesidad de registrarte.
CompressIMG
Comprime tus imágenes sin perder calidad. Gratis, rápido y directamente en tu navegador.
Prueba CompressIMG gratisArtículos de esta guía
Compresión WebP: por qué es mejor que JPEG
Los archivos WebP son 25-35% más pequeños que JPEG a la misma calidad. Aprende cómo funciona la compresión WebP, soporte de navegadores y cómo convertir.
AVIF vs WebP: ¿Cuál comprime mejor?
AVIF vs WebP comparados en detalle. Descubre diferencias reales en tamaño de archivo, soporte de navegadores, velocidad y calidad. Elige el formato ideal.
Lossy vs Lossless: ¿Qué tipo de compresión elegir?
Aprende la diferencia entre compresión con pérdida y sin pérdida. Descubre cuál mantiene la calidad de imagen y cuál ahorra más espacio.
TinyPNG vs Squoosh vs CompressIMG: Comparación honesta
Compara TinyPNG, Squoosh y CompressIMG lado a lado. Descubre cuál gana en compresión por lotes, formatos, calidad, precios y API.