Mejor formato de imagen para sitios web: ¿JPG, PNG, WebP o AVIF?

JPG, PNG, WebP y AVIF de un vistazo

Consulta la referencia de formatos de MDN para capacidades y compatibilidad. Que un formato tenga soporte no significa que cada editor o servicio de subida lo acepte.

Qué conservan la compresión con pérdida y sin pérdida

La codificación con pérdida modifica parte de la información de los píxeles para reducir el archivo. Una foto puede tolerar un pequeño cambio de textura, mientras que ese mismo cambio alrededor de una letra puede dificultar su lectura. La compresión sin pérdida conserva los datos de píxeles que recibe. Convertir a PNG un JPG ya comprimido no recupera los detalles perdidos en el JPG; puede limitarse a crear un archivo mayor.

WebP admite ambos modos, como explica la documentación de WebP de Google. El nombre del formato no indica por sí solo qué modo utiliza una exportación, y calidad 100 no garantiza un resultado sin pérdida. Conserva tu mejor fuente y crea cada versión de publicación a partir de ella, evitando encadenar conversiones con pérdida. Consulta la guía de compresión con pérdida y sin pérdida para entender la diferencia.

Fotos: compara WebP y AVIF con el JPG actual

La foto de montaña de abajo compara exportaciones reales de Pixilo. El JPG proporcionado ocupa 413,1 kB; Pixilo produjo un WebP de 299,0 kB con calidad 80 y un AVIF de 275,7 kB con su ajuste predefinido de calidad 65. Las tres imágenes tienen 1920 × 1440 píxeles. WebP ahorra aproximadamente un 28 % y AVIF un 33 % respecto a este JPG. En este ejemplo, el AVIF es aproximadamente un 8 % menor que el WebP.

Son mediciones de archivos completos obtenidos de un único JPG ya comprimido. Los ajustes de calidad dependen del formato y estas exportaciones no se calibraron para lograr la misma calidad visual. Úsalas como ejemplos que examinar, no como una clasificación universal. En el comparador, busca texturas de roca suavizadas, halos en el perfil de las montañas y bandas en el cielo uniforme. Evalúa la imagen completa al tamaño previsto y usa después la vista de detalle para revisar las zonas dudosas.

Repite la prueba con una imagen representativa de tu sitio: un tejido para una tienda o un rostro para una página de equipo. Crea ambas versiones desde la misma fuente y con las mismas dimensiones: para un JPG, utiliza JPG a WebP y JPG a AVIF. Para otras fuentes, usa PNG a AVIF o WebP a AVIF. Elige la versión más pequeña cuyo detalle siga siendo aceptable; conservar el original también es válido si ya cumple su función. Para lotes grandes, considera además el tiempo de conversión.

JPG originalWebP de Pixilo

Gráficos: protege bordes, texto y transparencia

El texto y los diagramas revelan pronto los defectos de compresión: un borde de color alrededor de una letra o una línea de un píxel interrumpida pueden importar más que un leve cambio en un paisaje. El gráfico siguiente compara un PNG de 109,2 kB con las exportaciones JPG, WebP y AVIF de Pixilo, todas de 960 × 640 píxeles. El AVIF solo ocupa 6,4 kB, pero ese ahorro sirve únicamente si los textos y trazos más pequeños siguen siendo suficientemente claros.

Cambia de formato e inspecciona las mismas letras y bordes de color en la vista de detalle. Vuelve después a la imagen completa para evaluar el tamaño de lectura normal. Son ejemplos de conversión con pérdida, no pruebas de WebP o AVIF sin pérdida. Si una captura documenta un precio, un mensaje de error o un ajuste de software, prioriza un texto legible y fiel sobre el archivo más pequeño. Conserva el PNG si las alternativas no superan esa prueba.

La transparencia es un requisito independiente de la nitidez: PNG, WebP y AVIF la admiten; JPG no. Para una foto de producto transparente, prueba PNG a WebP e inspecciona el contorno y la sombra sobre fondos claros y oscuros. Antes de exportar a JPG, elige un fondo uniforme de forma deliberada. El gráfico opaco de abajo no prueba los bordes transparentes.

Si el logo ya es SVG, guarda la fuente vectorial. Rasterizarla solo para comprimir puede eliminar la ventaja de escalar con nitidez. Las herramientas de Pixilo para imágenes de píxeles admiten los tipos indicados en cada herramienta. Lee la guía de SVG y PNG para decidir cuándo conservar el formato vectorial y cuándo crear una copia PNG.

PNG originalJPG de Pixilo

Elige las dimensiones antes de buscar el archivo más pequeño

Planifica según el espacio real. Una foto de 600 píxeles CSS de ancho podría tener una versión de 1200 para pantallas con alta densidad de píxeles. Es un ejemplo que probar, no una regla universal. Ampliar un original pequeño no reconstruye detalle ausente.

Duplicar tanto la anchura como la altura cuadruplica el número de píxeles. El archivo no necesariamente cuadruplica su peso, pero el codificador debe representar más datos. Decide primero el recorte y las dimensiones necesarias; compara después los formatos con esas mismas dimensiones para separar el beneficio del redimensionado del cambio de formato.

Un sitio puede servir distintos tamaños según el diseño mediante ajustes de imágenes adaptables como srcset y sizes. Prepara variantes con Cambiar tamaño de imagen y consulta la guía de imágenes adaptables para entender su entrega. Evita un objetivo de peso rígido para todas las imágenes: una tarjeta pequeña y un zoom detallado de producto tienen finalidades diferentes.

Revisa también cómo se carga la imagen

Reserva espacio para evitar saltos al cargar. La carga diferida puede convenir a imágenes inferiores, pero retrasar la imagen principal visible. La guía LCP de Google recomienda facilitar el descubrimiento de la imagen importante y no aplicar carga diferida a la imagen LCP.

Si necesitas un formato de respaldo, configúralo en el código o el CMS. Con un elemento picture, el navegador usa la primera fuente que coincide con los formatos admitidos y las demás condiciones; no compara todos los archivos para escoger el menor. Coloca primero tu formato probado preferido y conserva un JPG o PNG adecuado como respaldo. La guía de picture de web.dev explica la selección.

Comprueba la imagen que realmente entrega la página publicada. Un CMS o CDN de imágenes puede redimensionar o volver a codificar la subida, de modo que los visitantes reciben un archivo distinto del descargado de Pixilo. Pixilo prepara los archivos; tu sitio controla su entrega. Una exportación menor no corrige por sí sola una petición de imagen tardía ni una respuesta lenta del servidor.

Antes de publicar

• El destino acepta el formato y la extensión es correcta.
• Las dimensiones encajan en el diseño.
• Texto, rostros y bordes transparentes mantienen calidad suficiente.
• El archivo es menor o el cambio resuelve una necesidad real de compatibilidad.
• La página funciona en pantallas estrechas y la imagen importante carga pronto.
• Guardaste el original para futuras ediciones.