Optimizar imágenes para la Web sin perder calidad

Una imagen de varios megabytes puede ser perfecta para impresión y desproporcionada para una página Web. Optimizar no significa degradarla hasta que pese poco: significa eliminar lo que la visualización final no necesita.

El orden práctico suele ser: redimensionar, elegir formato, comprimir, comprobar visualmente y servir la variante adecuada.

Dimensiones primero

Una fotografía de 6000 × 4000 contiene 24 millones de píxeles. Si nunca se muestra a más de 1200 px de ancho, descargar la versión completa desperdicia transferencia y decodificación.

Pregúntese cuál es el ancho máximo real, si existe versión móvil y si hace falta una versión de alta densidad.

Dimensiones y peso no son lo mismo

Dos imágenes de 1600 × 900 pueden pesar cantidades muy distintas. El formato, el contenido y la compresión también influyen.

Una fotografía detallada no se comprime como un logotipo con cuatro colores.

Elegir formato según el contenido

Contenido	Formato habitual
Fotografía	WebP, AVIF, JPEG
Captura de interfaz	WebP o PNG
Logo vectorial	SVG
Transparencia	WebP, AVIF, PNG
Compatibilidad máxima	JPEG / PNG

WebP es muy compatible y admite pérdida, sin pérdida, transparencia y animación. AVIF ofrece compresión moderna y funciones avanzadas. JPEG y PNG siguen siendo importantes como formatos de referencia y fallback.

Con pérdida o sin pérdida

La compresión sin pérdida conserva los datos de píxel. La compresión con pérdida elimina información menos importante visualmente.

Para fotografía Web, una compresión con pérdida razonable puede reducir mucho el peso sin una diferencia visible al tamaño real de uso.

Comprobar al tamaño real

No evalúe una imagen Web solo con zoom al 400%. Revísela al tamaño de visualización y observe texto, gradientes, cabello, vegetación y detalles finos.

Redimensionar antes de comprimir

Pasar de 4000 × 3000 a 800 × 600 reduce el número de píxeles de 12 millones a 480.000. La reducción de datos potencial es enorme.

Variantes responsive

srcset, sizes y <picture> permiten ofrecer variantes adaptadas y formatos alternativos.

<picture>
  <source srcset="/imagen.avif" type="image/avif">
  <source srcset="/imagen.webp" type="image/webp">
  <img src="/imagen.jpg" alt="Descripción">
</picture>

Capturas y texto

Las capturas de pantalla y esquemas toleran peor una compresión fotográfica agresiva. Los bordes de letras y líneas hacen visibles los artefactos. Pruebe modos sin pérdida o más calidad.

Metadatos

Los EXIF pueden incluir cámara, fecha y, en algunos casos, localización. Conserve solo los datos realmente útiles y tenga cuidado con perfiles de color cuando su eliminación cambie el aspecto.

Impacto global

Diez imágenes de 900 kB suman unos 9 MB. A 180 kB de media pasan a 1,8 MB: un ahorro de 7,2 MB.

Flujo repetible

Para tareas recurrentes:

importar → redimensionar → convertir → comprimir → exportar

El orden importa: comprimir antes de redimensionar puede provocar una recompresión innecesaria.

La mejor imagen Web no es siempre el archivo más pequeño posible, sino el archivo más pequeño que cumple correctamente su función visual.