Guía práctica de tamaños y formatos de archivos de imagen para la web

Cada imagen compite por recursos de red, decodificación, memoria y renderizado. Un presupuesto útil es específico de la página: considera la función de la imagen, el público, la caché, el viewport y la calidad necesaria. Los rangos siguientes son puntos de partida para probar, no límites universales de aprobado o suspenso.

Presupuestos iniciales por caso de uso

Estos rangos ilustran un presupuesto moderado de entrega web. Tus resultados en JPEG, WebP o AVIF pueden quedar por encima o por debajo; ajústalos según el original, el codificador, el tamaño renderizado, el rendimiento de campo y la revisión visual.

Cómo convertir rangos iniciales en tu presupuesto

El informe de peso de páginas de HTTP Archive ofrece datos actuales de distribución, pero una mediana mundial no es tu público. El umbral “bueno” de LCP publicado por Google es de 2,5 segundos en el percentil 75 de las visitas. Usa tus datos de campo y una cascada para repartir el tiempo disponible entre respuesta del servidor, descubrimiento del recurso, transferencia, decodificación y demora de renderizado.

Parte de un presupuesto de transferencia para la página y asigna más a las imágenes que aportan mayor valor al usuario. Revisa los rangos de la tabla cuando cambien el diseño, la cantidad de imágenes, el público o la calidad necesaria.

El formato es una variable importante

El mismo original puede producir tamaños muy distintos según el codificador y el objetivo de calidad. Esta tabla muestra comportamientos que comparar, no resultados de referencia universales para una foto de 1200 píxeles:

WebP o AVIF pueden superar una salida JPEG en algunas comparaciones, pero no existe un porcentaje fijo válido para todos los originales y codificadores. Ambos formatos modernos admiten transparencia. Consulta las diferencias en nuestra guía de WebP y AVIF.

Puedes crear candidatos con JPG a WebP, con Convertir a AVIF para sus formatos de entrada indicados, o con la Conversión por lotes para los formatos mostrados por esa herramienta.

Dimensiones en píxeles: el multiplicador oculto

La cantidad de píxeles, el contenido, la profundidad de bits, los metadatos, el formato, el codificador y sus ajustes afectan al tamaño. Reducir dimensiones innecesarias suele dejar muchos menos datos que representar al codificador.

Una imagen de 4000 × 3000 tiene 12 millones de píxeles; una de 1200 × 900 tiene 1,08 millones, un 91% menos. Con igual cantidad de canales y precisión, eso reduce mucho los datos ráster sin comprimir que recibe el codificador, aunque el ahorro final en bytes aún depende del contenido y los ajustes.

Regla orientativa para imágenes responsivas: ofrece candidatos cercanos a las posibles anchuras y densidades renderizadas. Si un espacio de contenido mide 720 píxeles CSS, un candidato de 1440px puede servir para una pantalla 2×, pero el zoom, el recorte, los cambios de diseño y densidades mayores pueden cambiar la elección. Deja que srcset y sizes describan las opciones.

Usa la herramienta de redimensionado de Vizua para crear un candidato con las dimensiones que necesita tu diseño. Después prueba el compresor de JPEG o PNG según corresponda; un original ya optimizado quizá no se reduzca.

Calidad de compresión: encontrar el punto óptimo

Una vez que la imagen tiene el tamaño y el formato correctos, la calidad de compresión es el último ajuste. Este ejemplo práctico muestra cómo funcionan juntas las tres palancas:

Flujo ilustrativo: empieza con un archivo maestro de 4000 × 3000 y mantenlo fuera del conjunto de entrega.

1. Redimensiona a un candidato como 1200 × 900 cuando coincida con el espacio y la densidad de destino
2. Exporta un candidato WebP con una calidad inicial elegida e inspecciona el archivo real
3. Exporta un candidato AVIF cuando tu stack lo admita y compara tamaño, aspecto y coste de codificación

Elige el candidato más pequeño que cumpla el caso de uso. El ahorro final y la diferencia visible proceden de tus archivos de origen y salida reales, no solo de las dimensiones del ejemplo.

Para recomendaciones detalladas de calidad por formato, consulta nuestra guía: cómo comprimir imágenes sin perder calidad.

Casos especiales

Páginas de producto en e-commerce

Las fotos de producto deben seguir siendo útiles con el zoom admitido por la tienda. Genera candidatos responsivos desde un maestro protegido, prueba los detalles finos y fija presupuestos separados para la cuadrícula, la vista principal y el zoom. Los requisitos de subida de marketplaces pueden diferir de lo que debe entregar la tienda.

Portfolios de fotografía

Los portafolios pueden servir vistas previas responsivas y ofrecer una vista intencionada en alta resolución cuando corresponda. Define dimensiones y presupuestos de bytes según el diseño y las pantallas previstas, y revisa textura, degradados y perfiles de color.

Imágenes para redes sociales (Open Graph)

Las recomendaciones y los formatos aceptados para imágenes Open Graph varían según la plataforma y pueden cambiar. Un JPEG o PNG de 1200 × 630 es un punto de partida habitual entre plataformas, pero verifica las indicaciones actuales del destino y la vista previa. Los rastreadores descargan estos archivos con independencia de la carga diferida de la página.

Presupuesto total de imágenes por página

Crea un presupuesto de página a partir de tu objetivo de rendimiento. Una posible asignación inicial para probar es:

• 1 imagen hero: ~150 KB
• 3-4 imágenes de contenido: ~100 KB cada una, unos 300-400 KB en total
• Miniaturas, avatares e iconos: ~50 KB en conjunto

Este ejemplo no garantiza velocidad. Las galerías y cuadrículas pueden aplazar imágenes adecuadas fuera de pantalla, pero los recursos con carga diferida siguen consumiendo datos al solicitarse y pueden afectar al desplazamiento. Mide el rendimiento inicial y de interacción en dispositivos y redes representativos.

Preguntas frecuentes