Optimizar imágenes de una web consiste en entregar archivos adecuados para el lugar donde se muestran, con un peso razonable y calidad suficiente. La revisión debe considerar también cuándo se descargan y qué función cumplen en la página.
Empieza por las páginas importantes para el negocio: inicio, servicios, fichas de producto o entradas que reciben visitas. Identifica qué imágenes pesan más y cuáles necesita ver primero el usuario. Ese inventario permite priorizar el trabajo.
Ajusta las dimensiones al uso real
Una imagen pequeña dentro de una tarjeta no necesita siempre el mismo archivo que una cabecera a pantalla completa. Revisa las dimensiones mostradas y las variantes que sirve tu web en distintos tamaños de pantalla.
No decidas únicamente por el ancho del dispositivo. La densidad de la pantalla y el espacio ocupado por la imagen también influyen en la versión adecuada. Comprueba qué archivo descarga realmente el navegador en las páginas representativas.
Ejemplo ficticio: una web muestra retratos pequeños del equipo, pero entrega los originales de varios miles de píxeles. Preparar versiones adaptadas puede reducir transferencia sin cambiar la información que percibe el visitante.
Compara calidad y peso sobre la misma imagen
Prueba la compresión y el formato con archivos representativos: una fotografía, una ilustración y una imagen con detalles finos. Examina el resultado a su tamaño de uso, prestando atención a bordes, texturas y textos.
WebP o AVIF pueden formar parte de la solución cuando la plataforma y su sistema de entrega los admiten. No conviertas todos los archivos de forma indiscriminada sin comprobar cómo se muestran y qué ahorro consigues.
Conserva los originales para futuras versiones. Evita recomprimir sucesivamente una imagen ya degradada: cada modificación debe partir de una fuente de calidad suficiente.
Decide qué imágenes deben cargar primero
La guía de rendimiento de imágenes de web.dev explica que retrasar la carga puede ayudar con imágenes que quedan fuera de la vista inicial, pero perjudicar a las que el visitante necesita ver al entrar. Por eso la imagen principal no debería recibir carga diferida por una regla aplicada sin distinción.
Revisa también si la página reserva el espacio de cada imagen antes de descargarla. Definir sus dimensiones o proporción ayuda a evitar desplazamientos del contenido mientras se carga.
La configuración debe responder al diseño real. Una imagen que aparece más abajo en escritorio puede estar cerca del inicio en móvil, o suceder lo contrario.
Conserva la información que aporta cada recurso
Una fotografía de producto debe permitir valorar los detalles necesarios. Una captura de pantalla tiene que mantener legibles los elementos que explica. La reducción de peso deja de ser útil si impide entender el contenido.
Revisa recortes y versiones móviles: un encuadre automático puede ocultar justo el objeto o detalle importante. Comprueba también que el texto alternativo corresponda a la función de la imagen y no sea una lista de palabras clave.
Si hay información esencial escrita dentro de una imagen, valora presentarla también como texto de la página. Así será más fácil adaptarla y mantenerla.
Comprueba el resultado después de publicar
Compara las mismas páginas antes y después en condiciones similares. Revisa peso transferido, imagen principal, estabilidad visual y nitidez. Comprueba la versión que recibe un visitante sin una caché previa de la web.
No atribuyas toda una mejora o un problema de velocidad a las imágenes si también intervienen scripts, servidor u otros recursos. Utiliza la comparación para localizar qué cambios han funcionado.
En FEBEN incorporamos la optimización de recursos al diseño web y al mantenimiento. El objetivo es que las imágenes expliquen, acompañen y carguen de forma adecuada en los dispositivos de tus visitantes.