Cómo optimizar las imágenes de tu web

En la mayoría de webs lentas, las imágenes son más del 70 % del peso. Se arregla en una tarde y sin tocar el diseño.

· 6 min de lectura · David Escobar

Antes de contratar nada para acelerar tu web, mira las imágenes. Es lo más pesado, lo más fácil de arreglar y lo que casi nadie ha tocado.

El error de partida: subir la foto tal cual

Una foto de móvil moderno son entre 3 y 8 MB y mide unos 4.000 píxeles de ancho. En la web se ve, como mucho, a 1.600. El navegador se descarga los 8 MB enteros y luego la encoge: el visitante ha pagado por píxeles que no verá nunca.

Los tres pasos, en orden

  1. Redimensiona antes de subir. Cabecera a ancho completo, 1.600 a 2.000 píxeles de ancho. Foto dentro de un texto, 800 a 1.200. Miniatura, 400.
  2. Convierte a WebP o AVIF. Pesan entre un 30 % y un 60 % menos que un JPEG con la misma calidad visible. Squoosh lo hace gratis en el navegador.
  3. Comprime. Al 80 % de calidad casi nadie distingue la diferencia y el peso cae a la mitad.
FormatoPara qué
AVIFLo mejor hoy. Máximo ahorro, soportado por todos los navegadores actuales.
WebPCasi igual de bueno y sin sorpresas. La opción segura.
JPEGSolo como reserva para navegadores viejos.
PNGSolo si hace falta transparencia. Para fotos, nunca.
SVGLogotipos e iconos. Pesa nada y no pierde calidad.

No conviertas un logotipo a WebP. Si es un SVG, déjalo en SVG: pesa una fracción y se ve nítido en cualquier pantalla.

Carga diferida, con una excepción

Las imágenes que están más abajo deben cargarse solo cuando el visitante se acerca a ellas. Pero la de arriba del todo, no: si le pones carga diferida a la imagen de cabecera, empeoras justo la métrica que Google mide. Es un fallo común cuando se activa la optimización automática sin mirar.

El alt no es opcional

El texto alternativo describe la imagen para quien no la ve — lector de pantalla, conexión caída — y es lo único que entiende Google de una foto. Descríbela en una frase natural: «comedor del restaurante con vistas al puerto de Torrevieja», no «restaurante torrevieja comida marisco», que es amontonar palabras y se detecta.

Y aparecer en Google Imágenes

Es una fuente de visitas que casi nadie trabaja. Con nombres de fichero descriptivos — comedor-restaurante-torrevieja.webp en vez de IMG_4821.jpg —, alt bien escritos y las imágenes en el sitemap, un negocio visual como una peluquería, un fotógrafo o una empresa de reformas recibe visitas por ahí sin competir con nadie.

Preguntas frecuentes

¿Pierdo calidad al convertir a WebP?

Técnicamente sí, visualmente no. Al 80 % de calidad hace falta compararlas al 200 % de zoom para notar algo. Lo que sí pierde calidad de verdad es subir una imagen gigante y dejar que el navegador la encoja.

¿Me vale un plugin que lo haga solo?

Ayuda, y es mejor que nada. Pero conviene revisar dos cosas: que no le ponga carga diferida a la imagen de cabecera y que guarde el original, porque algunos comprimen encima y no hay vuelta atrás.

¿Cuánto debería pesar una página entera?

Por debajo de 1 MB va bien, entre 1 y 2 MB es aceptable, y por encima de 3 MB se nota en datos móviles. Casi siempre la diferencia entre una cosa y otra son dos o tres fotos sin tocar.

¿Quieres que miremos tu caso concreto?

Analizamos gratis tu web y tu ficha de Google y te decimos qué falla y qué costaría arreglarlo. Sin compromiso.

Seguir leyendo: Por qué el 100 en PageSpeed no es el objetivo · Qué es un CMS y cuál te conviene

Auditoría gratis