¿Cómo optimizo las imágenes de mi web?
El orden correcto: primero el tamaño real, después el formato, después la compresión y la carga diferida. Y el atributo que evita que la página baile al cargar.
El orden que funciona: redimensionar al tamaño real en que se ven, convertir a WebP, comprimir y solo entonces mirar la carga diferida. La mayoría empieza por el último paso y por eso apenas nota diferencia. Y hay un detalle que casi nadie pone: declarar ancho y alto en el HTML, que es lo que evita que la página baile mientras carga.
Casi todo el mundo empieza por el final. Instala un plugin de carga diferida, ve que la página sigue pesando lo mismo y concluye que optimizar imágenes en la web no sirve de mucho.
El orden correcto es este, y cada paso da más que el siguiente.
El tamaño real, que es donde está casi todo
Una foto de 4.000 píxeles de ancho puesta en un hueco de 800 píxeles pesa unas veinticinco veces más de lo necesario. El navegador la descarga entera y luego la encoge para enseñarla.
Esto explica la mayor parte del peso de las webs lentas. Y se arregla midiendo: abre la página, mira cuánto ocupa la imagen en pantalla y guarda la imagen a ese ancho, con un margen para pantallas de mayor densidad.
Regla práctica: el doble del ancho en que se ve, y nunca más de 2.000 píxeles para una imagen de contenido. Una foto de cabecera a todo el ancho puede necesitar más; una foto en una columna de texto, casi nunca pasa de 1.200.
El formato
Con el tamaño arreglado, el formato es lo siguiente, y la elección depende de qué es la imagen.
| Formato | Para qué | Peso | Cuándo no |
|---|---|---|---|
| WebP | Casi todo: fotos, capturas, banners | Un 25-35 % menos que JPG | Nunca: es el valor por defecto |
| AVIF | Fotos si quieres apurar | Aún menos que WebP | Si generar cada imagen tarda demasiado |
| JPG | Fotografía, si no quieres complicarte | Correcto con calidad 75-85 | Gráficos con pocos colores: se emborrona |
| PNG | Transparencia, gráficos de pocos colores | Pesado en fotos | Fotografía: pesa tres veces más |
| SVG | Logotipos, iconos, diagramas | Casi nada | Fotos: no es para eso; y si lo suben usuarios, hay que sanearlo |
La compresión
Al guardar en WebP o JPG, la calidad entre 75 y 85 es indistinguible a ojo y ahorra bastante. Por encima de 90 se paga peso sin ganar nada visible; por debajo de 70 empiezan a verse bloques en los degradados y en los fondos lisos.
Aquí es donde entran los plugins de compresión, y son útiles. Lo que no arreglan es el primer paso: si subiste una imagen de 4.000 píxeles, comprimirla te deja una imagen de 4.000 píxeles algo más ligera.
La carga diferida, y su excepción
Que las imágenes de más abajo no se descarguen hasta que hagan falta. Los navegadores lo hacen de serie con un atributo en la etiqueta de la imagen, sin plugin.
Los cuatro pasos, en orden
Redimensiona al tamaño real
Mide el hueco en pantalla, guarda la imagen al doble de ese ancho como máximo. Es el paso que más ahorra y el que ningún plugin hace por ti si la plantilla pide el tamaño grande.
Convierte a WebP
Fotos y capturas. Los logotipos e iconos, a SVG. Un plugin lo hace en segundo plano para lo que ya está subido.
Comprime entre 75 y 85 de calidad
Indistinguible a ojo, bastante más ligero. Los plugins de compresión hacen esto bien.
Difiere lo que está por debajo del primer pantallazo
Con el atributo nativo del navegador. La imagen principal de arriba, nunca diferida.
El detalle que casi nadie pone
Declara el ancho y el alto en el HTML de cada imagen. No para forzar el tamaño, sino para que el navegador sepa cuánto sitio reservar antes de que la imagen llegue. Es un atributo, cuesta nada y arregla algo que se nota mucho.
Sin eso, la página se recoloca cuando cada imagen carga: el texto que estabas leyendo salta, y a veces pulsas donde no querías. Google mide eso y lo penaliza en su medición de estabilidad visual, y es una de las tres cifras que usa para decir si una página carga bien.
Lo que además ayuda al posicionamiento
Cómo comprobarlo tú mismo
Abre tu web, pulsa con el botón derecho, elige inspeccionar y ve a la pestaña de red. Recarga y ordena por tamaño. En treinta segundos ves cuáles son las tres imágenes que pesan y si el problema es el tamaño, el formato o la compresión.
Si la más pesada tiene más de 300 kilobytes, ahí está tu trabajo de esta tarde. Y si la portada suma más de un megabyte en imágenes, el trabajo es de la semana.
Plugin o a mano
Un caso: la portada de once megas
Y una decisión sobre el origen de las imágenes que conviene tener resuelta antes que la técnica: de dónde salen y con qué permiso. Una foto descargada de internet sin licencia puede acabar en una reclamación con factura, y ocurre más de lo que parece con imágenes que llevan años en una web sin que nadie recuerde de dónde vinieron. Fotos propias siempre que se pueda, banco con licencia cuando no, y un registro de qué se usó y bajo qué condiciones. Es aburrido y cuesta mucho menos que el disgusto.
Preguntas frecuentes
¿Un plugin me lo hace todo?
Los buenos hacen los pasos dos, tres y cuatro: convierten a WebP, comprimen, generan tamaños alternativos y difieren la carga. El paso uno depende de qué subas y de cómo esté construida la plantilla: si el hueco es de 800 píxeles y la plantilla pide la imagen de 2.400, el plugin no lo arregla.
¿Cuánto debería pesar una página?
Menos de un megabyte en total es un objetivo razonable para una web de servicios, y la portada suele ser la que más se pasa. Una tienda con muchas fotos de producto pesará más, y aun así cada imagen individual debería quedarse por debajo de 200 kilobytes, con las de producto en torno a 100.
¿Las imágenes posicionan?
No por sí solas: una imagen bien optimizada no sube una página que no responde a nada. Lo que sí hacen es entrar en la búsqueda de imágenes, que en sectores visuales como reformas o decoración trae visitas, y afectar a la velocidad y a la estabilidad de la página, que sí cuentan para todos.
¿Tengo que volver a subir todas las imágenes antiguas?
No todas: las de las páginas que importan. Empieza por la portada y las páginas de servicio, que son las que más se ven y se rastrean, y sigue por los artículos con más visitas. Un plugin puede convertir el resto en segundo plano; lo que no puede es redimensionar lo que se subió a tamaño de cámara.
¿El texto alternativo tiene que llevar la palabra clave?
Solo si describe la imagen. El alt es lo que se lee en voz alta para quien no ve la foto y lo único que el buscador entiende de ella: si es una cocina reformada, dirá cocina reformada sin forzarlo. Acumular palabras clave en el alt es relleno para el buscador y ruido para el lector de pantalla.
El peso de las imágenes es lo primero que se mide en un trabajo de SEO técnico, y casi siempre aparece entre los errores SEO más caros que veo en webs de empresa. Si tu web tarda y no sabes por qué, las diez señales de que necesita una auditoría; y si te planteas empezar de cero por la velocidad, antes lee rehacer la web o arreglar la que tienes, porque las imágenes se arreglan sin rehacer nada.
La primera llamada no cuesta nada y suele bastar para saber si tiene arreglo. Si tu caso no es para mí, te lo digo.