Optimizar imágenes para la web: formato, tamaño, carga

El formato adecuado

• JPEG: fotografías, muy extendido.
• WebP y AVIF: formatos modernos con archivos más pequeños a igual calidad.
• PNG: gráficos con transparencia y bordes nítidos.
• SVG: logotipos e iconos, escalables sin límite.

El tamaño adecuado

Una imagen nunca debería ser mayor que la superficie en la que se muestra. Una foto de 4000 píxeles en un espacio de 600 píxeles desperdicia datos. Utilice varios tamaños para distintas pantallas.

Compresión

Una compresión moderada normalmente no se nota, pero ahorra mucho espacio. Compruebe el resultado en pantalla.

Carga diferida

Las imágenes situadas por debajo de la zona visible pueden cargarse después (lazy loading). En cambio, la imagen principal de la parte superior debería cargarse de inmediato.

Además

• Indicar medidas fijas para que el diseño no salte
• Nombres de archivo descriptivos y textos alternativos
• Imágenes reales en lugar de fotos de archivo intercambiables, siempre que sea posible

Ejemplo práctico: adelgazar una imagen de portada

Supongamos que la imagen de portada de una página de inicio es una foto directa de la cámara: 6000 píxeles de ancho y varios megabytes de peso. Se muestra con un ancho máximo de unos 1600 píxeles. Primer paso: reducirla al ancho necesario. Segundo paso: convertirla a un formato moderno como WebP o AVIF. Tercer paso: comprimirla de forma moderada y comparar el resultado en pantalla. Por lo general, el archivo se reduce así a una fracción, sin que se note la diferencia. Para pantallas más pequeñas, ofrezca además una versión más estrecha que el navegador elegirá por sí mismo.

Ayuda para decidir: ¿qué formato y cuándo?

• Foto con degradados: WebP o AVIF, con JPEG como alternativa.
• Logotipo, pictograma, ilustración sencilla: SVG, porque se mantiene nítido y pesa muy poco.
• Captura de pantalla con texto y líneas finas: PNG o WebP sin pérdida, para que nada se vea borroso.
• Foto con transparencia: WebP o PNG, según el tamaño del archivo.

Errores típicos

• Lazy loading para la imagen principal: la imagen grande de la parte superior debería cargarse de inmediato. Si se retrasa, suele empeorar el tiempo de carga percibido, en especial el valor «Largest Contentful Paint».
• Comprimir varias veces: quien vuelve a guardar un JPEG una y otra vez pierde calidad cada vez. Trabaje a partir del original.
• Medidas ausentes: sin ancho y alto en el código, el texto salta en cuanto se carga la imagen.
• Información importante en la imagen: los horarios de apertura o los precios deben figurar como texto en la página, no dentro de una foto.

Mito frente a realidad

Mito: Cuanto mayor es la resolución, mejor se ve. Realidad: Por encima del tamaño de visualización, una resolución adicional no aporta nada, salvo en pantallas de resolución muy alta, para las que puede tener sentido el doble de píxeles. Más allá de eso, solo cuesta tiempo de carga.

Comprobación

En las herramientas para desarrolladores del navegador, abra la pestaña «Red», filtre por imágenes y ordene por tamaño. Abordar primero los archivos más grandes suele ser lo que más rinde. Como complemento sirven las herramientas de medición de Google, descritas en Core Web Vitals.

Un procedimiento para la redacción

Para que la optimización no se reinvente con cada nueva publicación, ayuda un procedimiento fijo. Conservar el original y no sobrescribirlo nunca. Reducir al ancho de visualización máximo necesario. Exportar en WebP o AVIF y, si hace falta, añadir una versión más pequeña para móviles. Elegir nombres de archivo descriptivos, por ejemplo «heizungsbau-stuttgart-team.webp» en lugar de «IMG_4821». Escribir un texto alternativo que describa lo que se ve. Por último, comprobar el tamaño del archivo: para una imagen dentro del contenido, unos pocos cientos de kilobytes suelen ser ya un objetivo razonable; una imagen de portada grande puede tener más. Estas referencias dependen del motivo; lo decisivo es la comparación en pantalla.

Véase también Core Web Vitals.