Optimizar una imagen es dejarla ligera y bien etiquetada. Ligera para que ocupe lo mínimo sin que se note en pantalla, y etiquetada para que se entienda qué hay dentro sin llegar a verla, que es como la leen un buscador o un lector de pantalla.
Las imágenes suelen ser lo que más pesa de una página, así que son las primeras en frenar la carga y en tirarte las Core Web Vitals, y además traen tráfico por su cuenta desde Google Imágenes. Vamos con lo que hay que hacerle a cada imagen antes de subirla, y con los dos ajustes de web que vienen después.
Optimiza cada imagen antes de subirla
Las cinco acciones que vienen van ordenadas de más a menos impacto. La primera, comprimir y pasar a un formato moderno, es la que más cambia el resultado y el resto suma sobre ella. La que más cuidado pide es la imagen que se ve nada más entrar, la que suele marcar el LCP, lo que tarda en pintarse el elemento más grande de la pantalla.
Comprime la imagen y pásala a WebP o AVIF
El formato es lo que más peso quita sin que se note, y ahí WebP es más ligero que los formatos clásicos. Según la documentación de WebP, una imagen en ese formato pesa entre un 25% y un 34% menos que un JPEG equivalente, y un 26% menos que un PNG sin pérdida. AVIF aprieta todavía más.
Pásala por una herramienta como Squoosh antes de subirla, que te enseña el peso final al lado del original, o instala el plugin de optimización de tu CMS, como ShortPixel o Imagify en WordPress, que convierte y sirve WebP automáticamente, también con lo que ya tienes subido.
Como referencia, ninguna foto debería pasar de los 150 KB, aunque sin apretar de más, porque una compresión demasiado agresiva se nota en pantalla. Baja la calidad poco a poco y ve comparando cómo se ve antes de dar la imagen por buena.
Esta tabla resume qué formato usar en cada caso, con el soporte de navegadores según Can I Use.
Formato | Cuándo usarlo | Nivel de compresión | Soporte en navegadores |
|---|---|---|---|
WebP | Opción por defecto para fotos y gráficos del día a día | Alto, entre un 25% y un 34% menos que JPEG | Todos los navegadores actuales |
AVIF | Cabeceras y fotos grandes donde cada KB duele | Muy alto | Amplio, falla en iPhone y iPad antiguos |
JPEG | Fotografía cuando necesitas compatibilidad total | Medio, siempre con pérdida | Universal, incluidos navegadores viejos |
PNG | Capturas de pantalla, gráficos con texto y transparencias | Bajo, sin pérdida de calidad | Universal, incluidos navegadores viejos |
SVG | Logos, iconos y gráficos vectoriales | Mínimo | Universal, incluidos navegadores viejos |
Ajústala al tamaño real en el que se va a ver
Una foto de 4.000 píxeles de ancho en un hueco de 800 obliga al navegador a descargar una imagen cinco veces más ancha de la que va a mostrar. Redimensiona antes de subir, al ancho máximo que esa imagen ocupa en tu plantilla, y multiplica por dos si la quieres nítida en pantallas retina.
Para que cada pantalla reciba la versión que le toca está el atributo srcset, con el que declaras varias medidas de la misma foto y dejas que el navegador elija. En la mayoría de CMS se genera solo al subir la imagen, así que no tienes que tocarlo a mano.
Pon siempre width y height en la etiqueta de imagen, aunque el diseño sea responsive. Con esas dos medidas, el navegador reserva el hueco antes de descargar nada, y la página no da saltos mientras carga. Eso es justo lo que mide el CLS, la métrica de estabilidad visual de las Core Web Vitals.
Ponle un nombre de archivo que diga qué es
Antes de que nadie abra la imagen, su archivo ya puede decir de qué va. IMG_20260814.jpg no da ninguna pista y zapatilla-trail-roja-perfil.jpg se entiende de un vistazo, así que con dos o tres palabras que describan lo que se ve es suficiente.
Escríbelo en minúsculas, sin tildes ni eñes y con guiones medios entre palabras, y aplica lo mismo a la carpeta donde lo guardas. Lo que no hace falta es meter la keyword a presión, porque el nombre del archivo es una señal más, no la que decide si esa foto posiciona.
Escribe un alt que describa la imagen
El alt lo lee quien no puede ver la foto, sea un lector de pantalla o el propio buscador. La guía de Google Imágenes lo trata como el atributo más importante para entender de qué va esa imagen.
Descríbela como se la explicarías a otra persona, en una línea y con palabras normales. Añadir muchas palabras clave no mejora tu posición y te podrían tachar de hacer keyword stuffing.
En una ficha de producto, alt="zapatilla de trail roja vista de perfil" funciona y alt="zapatillas running baratas comprar zapatillas" no. Si la imagen es puramente decorativa, déjale el alt vacío para que los lectores de pantalla la salten.
El alt y el nombre del archivo son lo que te trae visitas desde Google Imágenes, y eso se mide por separado. Filtra el informe de Rendimiento de Search Console por tipo de búsqueda Imagen y verás qué páginas reciben clics desde ahí.
Activa el lazy loading salvo en la imagen del LCP
Las imágenes que quedan más abajo no hace falta cargarlas de golpe, pueden esperar a que el lector llegue hasta ellas. Se activa con loading="lazy" en la etiqueta de imagen, un atributo que entienden ya casi todos los navegadores y que no necesita ningún plugin.
La excepción es la imagen que se ve nada más entrar, que suele ser la que marca el LCP. Con lazy loading tarda más en aparecer y te baja la nota en los tests de velocidad, así que a esa déjala fuera y dale prioridad con fetchpriority="high".
Ajustes a nivel de web que rematan la optimización
Estos dos ajustes ya no van foto a foto, se hacen una vez para toda la web y sirven para que Google encuentre tus imágenes y sepa de quién son. No todo el mundo los necesita, así que mira primero si tu caso encaja.
Crea un sitemap de imágenes
No es un archivo nuevo, es el mismo sitemap XML de tu web con una línea extra por cada foto de esa página. Declaras el namespace image en el <urlset> raíz y dentro de cada URL listas sus imágenes. En el XML queda así.
<url>
<image:image>
<image:loc>https://tuweb.com/imagenes/foto.jpg</image:loc>
</image:image>
</url>Compensa cuando tus imágenes no se descubren solas, por ejemplo si las carga JavaScript, si tienes un catálogo fotográfico o un ecommerce con miles de fichas. En un blog donde cada foto va en su etiqueta de imagen, con el sitemap normal vas sobrado.
Si te toca hacerlo, la documentación de sitemaps de imágenes pone el tope en 1.000 imágenes por URL. Como es el archivo de siempre no hay nada nuevo que enviar a Search Console, solo esperar a que Google lo vuelva a procesar, que en imágenes tarda más que en páginas.
Añade datos estructurados a tus imágenes
Sirven para contarle a Google quién hizo la imagen y con qué licencia se puede usar, dos datos que el archivo no lleva encima. Se los das con un fragmento de código en la página, el tipo ImageObject de Schema.org.
Con license apuntas a la página donde tienes tus condiciones de uso, y es lo que hace que la foto salga marcada como licenciable en Google Imágenes. Si además la vendes, acquireLicensePage lleva hasta la página de compra. Las dos van en el mismo bloque.
{
"@context": "https://schema.org",
"@type": "ImageObject",
"contentUrl": "https://tuweb.com/playa.jpg",
"license": "https://tuweb.com/licencia",
"acquireLicensePage": "https://tuweb.com/comprar"
}Este marcado es para quien vende la foto en sí, un fotógrafo con su portafolio o un banco de imágenes, porque el distintivo de licenciable le lleva compradores desde Google Imágenes hasta su página de compra.
Si lo que vendes es el producto y no la foto, esto no va contigo, porque en un ecommerce la que alimenta las imágenes de tus fichas es la propiedad image del marcado Product, y ahí no pintan nada ni license ni acquireLicensePage.
Comprueba que tus imágenes ya no te frenan
Pega tu URL en PageSpeed Insights, que junta datos de usuarios reales con una prueba de laboratorio de Lighthouse, y quédate en la pestaña de móvil, que es con la que Google posiciona.
Arriba del todo verás si esa página aprueba las Core Web Vitals, y si tienes poco tráfico esa parte saldrá vacía y te vale con la de laboratorio. Baja hasta los diagnósticos y busca el bloque que PageSpeed llama Mejorar la entrega de imágenes, donde te junta los archivos más grandes de lo necesario y los KiB que te ahorrarías en cada uno.
En ese mismo informe, el diagnóstico Elemento LCP más grande te señala qué elemento tarda en pintarse. Si resulta ser una imagen, ya sabes por dónde empezar, quítale el lazy loading, bájale el peso y vuelve a medir hasta entrar en los 2,5 segundos que marca el umbral oficial del LCP.
Una imagen optimizada para SEO pesa poco y se explica sola, y con eso trabaja a la vez para la velocidad y para el buscador. Si de toda la lista solo vas a hacer una cosa, coge la imagen que se ve nada más cargar, comprímela, pásala a WebP y quítale el lazy loading.
Si sospechas que tu web arrastra más lastre del que se ve en pantalla, pídenos un análisis SEO gratuito, le echamos un ojo y te decimos qué frena la carga y por dónde empezar.
