Preguntas
¿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.
- Lectura 10 min
- Publicado
- Jesús Iturbide consultor SEO
- Cómo reviso estos artículos
En corto
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.
Un estudio de arquitectura es el caso extremo: enseñar obra sin que la web pese diez megas empieza justo por aquí, por servir cada foto a su tamaño.
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 |
Cuánto se gana de verdad al cambiar de formato, medido y no prometido, está en imágenes en WebP y AVIF.
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. Y un solo plugin de compresión basta: cuando dos plugins de WordPress se pisan, la misma imagen se comprime dos veces y pierde calidad en cada una.
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. Las otras causas de ese baile están en por qué la página baila al cargar.
Lo que además ayuda al posicionamiento
Qué fotos trabajan de verdad en un negocio de aquí
Todo lo anterior va de que las fotos no estorben. Esta sección va de lo contrario. Si tu trabajo se ve —reformas, carpintería, estética, hostelería, jardinería—, la imagen no es adorno, es la prueba, y hay una diferencia grande entre tener fotos y tener las que trabajan.
Y una distinción que ahorra disgustos: las fotos de la web y las de la ficha de Google no son el mismo trabajo. En la ficha pesan otras cosas y se miden de otra manera, y eso está en qué fotos de tu negocio en Google suben las llamadas.
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
Lo que se rompe al optimizar, y cómo no romperlo
Optimizar imágenes parece inofensivo y es de las pocas tareas de mantenimiento que pueden dejar una web peor de lo que estaba.
Y después, dos minutos: abre tres o cuatro páginas importantes y mira que no haya huecos rotos. El fallo típico no es masivo —una foto de una página que casi nadie visita—, y por eso se descubre seis meses tarde.
El paso cero: que no vuelvan a subirse a tamaño de cámara
Optimizar lo que ya hay es el trabajo de una tarde. Que no vuelva a pasar es el de cinco minutos, casi nadie lo hace, y por eso la web se llena sola otra vez en un año.
El problema no es técnico: quien saca las fotos está en la obra, las sube desde el móvil el mismo día y no tiene por qué saber nada de esto. Lo que funciona no es explicárselo, es quitarle la decisión.
Tres reglas que caben en un mensaje:
- El móvil, en resolución media. Se cambia una vez en los ajustes de la cámara. Para la web sobra, y de paso ocupa menos en el propio teléfono.
- Nada se sube directo del carrete. Las fotos pasan por una carpeta, aunque sea de un servicio en la nube, y desde ahí se suben ya redimensionadas.
- Si el fichero pasa de un mega, no entra. Es el único criterio que no hay que explicar, porque el peso se ve sin abrir nada.
Y a quien mantenga la web, dos cosas por escrito, que son las que hacen innecesarias las tres reglas de arriba: que la biblioteca genere los tamaños que la plantilla usa de verdad, y que ningún hueco pida una imagen más grande de la que va a mostrar. Con eso montado se puede subir una foto enorme sin que pase nada: nadie la va a servir entera.
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 se mide pronto en cualquier 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.
Si te está pasando
La primera llamada no cuesta nada y suele bastar para saber si tiene arreglo. Si tu caso no es para mí, te lo digo.
