SEO para imágenes: optimización y mejora de su posicionamiento

El SEO para imágenes comprende una serie de acciones relacionadas con la optimización de cara a su posicionamiento orgánico y al rendimiento web. Así pues, el objetivo es trabajar con images ligeras pero de calidad que se posicionen en Google (bonita quimera esta). Para alcanzar tal hazaña, he escrito esta guía en la que te explico todas las acciones que implemento para trabajar la visibilidad y optimización de las imágenes.

Qué es el SEO para imágenes

Cuando hablamos de SEO (Search Engine Optimization) para imágenes, nos referimos a la optimización de las imágenes en nuestros sitios web para mejorar su visibilidad en los motores de búsqueda. Piensa en cada imagen que subes a tu página como una oportunidad para atraer más tráfico.

Por ejemplo, cada vez que subes una imagen, debes optimizar el nombre del archivo, usar texto alternativo (alt text) descriptivo, y confirmar que el archivo esté comprimido para no ralentizar la carga de la página.

Estos detalles pueden parecer menores, pero en conjunto, pueden hacer una gran diferencia en cómo tu sitio se posiciona en Google.

Así pues, el objetivo es doble: mejorar la experiencia del usuario (ni tu ni yo queremos esperar siglos a que se cargue una página por culpa de imágenes pesadas) y ayudar a los motores de búsqueda a entender y clasificar mejor tu contenido visual.

Por qué optimizar la imágenes de nuestra web

Vamos a entrar un poco más en materia, viendo un par de motivos por los cuales deberías optimizar el SEO para imágenes:

Cómo afectan las imágenes a las Core Web Vitals

Al hablar de optimización de tiempos de carga, a mí se me vienen a la cabeza las famosas Core Web Vitals y el WPO. Por lo tanto, la optimización de las imágenes afectan a estas métricas de la siguiente forma:

Cómo sé cuando debo optimizar las imágenes

Si bien te diría que debes optimizar siempre la imágenes, hay unos casos en los cuales esto es mucho más crítico. Para saber si tu web es uno de esos casos tienes varias opciones.

Por un lado, puedes buscar las keywords (palabras clave) principales directamente en Google (en incógnito) y ver si muestra carruseles de imágenes o similares. Si es así, amigo mío, debes trabajarlas.

Otra opción es ir a tu Google Search Console y acceder al módulo de imágenes, si ves que pillas tráfico por ahí, también debes prestarle especial atención.

¿Y si todavía no tienes la web? Bueno, pues en ese caso no tenemos Search Console obviamente pero podemos pasar a los competidores por Semrush y ver cómo consiguen el tráfico. Esta es una funcionalidad bastante buena que no tiene Ahrefs y que ojala la implementen pronto.

Mejores plugins para imágenes

Ahora que ya estamos mentalizados de la importancia del SEO de imágenes, vamos a ver las herramientas que nos van a permitir alcanzar nuestro objetivo. Lo bueno es que, por suerte, a día de hoy existen varios plugins para imágenes que nos permiten optimizarlas con un par de clics.

Actualmente, yo uso Imagify y Perfmatters, los cuales son de pago, pero también existen otras alternativas gratis que puedes usar.

Aquí te dejo mis plugins de WordPress favoritos que uso para trabajar el SEO en imágenes (o he usado):

Comprimir imágenes

Comprimir las imágenes es el proceso de reducir el tamaño del archivo de dicha imagen pero sin sacrificar demasiado su calidad visual. Existen dos tipos principales de compresión de imágenes:

1. Compresión con pérdida (Lossy Compression): Este método elimina algunos datos de la imagen para reducir su tamaño. Aunque esto puede resultar en una pequeña pérdida de calidad, la reducción en el tamaño del archivo suele ser significativa. Este tipo de compresión es común en formatos como JPEG.
2. Compresión sin pérdida (Lossless Compression): En este caso, el tamaño del archivo se reduce sin perder ningún dato de la imagen. La calidad de la imagen se mantiene intacta, pero la reducción del tamaño del archivo no es tan drástica como en la compresión con pérdida. Este método se usa en formatos como PNG o GIF.

Formato de imágenes de nueva generación y clásicos

A día de hoy existen varios formatos de imágenes ampliamente utilizados, cada uno con características específicas que los hacen adecuados para diferentes usos. Por mi experiencia, donde encuentro los mayores errores es al usar imágenes de tipo JPG como PNG y viceversa. Como una imagen vale más que mil palabras, te dejo abajo el formato adecuado para cada imagen que vayas a trabajar:

No obstante, a continuación te comento las diferencias en mayor detalle y aprovecho para explicarte esos formatos de nueva generación, por los que tanto apuesta Google.

JPEG (Joint Photographic Experts Group)

El JPEG es ideal para fotografías y gráficos con gradientes suaves de color (con sombras y variaciones de una tonalidad). Es uno de los formatos más comunes en la web debido a su capacidad para reducir significativamente el tamaño de los archivos.

Ejemplo de imagen en JPEG

JPEG utiliza compresión con pérdida, lo que significa que parte de la información de la imagen se descarta para reducir el tamaño del archivo. Esto resulta en imágenes más pequeñas, pero con una ligera pérdida de calidad, que a menudo es imperceptible.

PNG (Portable Network Graphics)

El PNG es ideal para gráficos que requieren alta calidad, como logotipos, iconos, y cualquier imagen que necesite mantener su transparencia o donde la claridad es crucial.

Ejemplo de imagen en PNG

El PNG utiliza compresión sin pérdida, lo que significa que no se pierde ninguna calidad de la imagen durante la compresión. Además, soporta transparencia en las imágenes. Por contra, si no los optimizamos bien, pueden ocupar más que un JPG.

GIF (Graphics Interchange Format)

Los GIFs son gráficos animados que aportan dinamismo y facilitan algunas acciones de tipo paso a paso. Deberían ser pequeños y simples (porque son muy pesados), como íconos, botones, o imágenes con áreas grandes de color sólido, aunque lo cierto es que ya se usan de mil formas.

Ejemplo de imagen en GIF

El GIF también utiliza compresión sin pérdida, pero solo puede manejar una paleta de 256 colores, lo que lo hace menos adecuado para fotografías o imágenes con muchos colores.

WebP

Diseñado para la web, WebP ofrece la posibilidad de reducir significativamente el tamaño de las imágenes sin sacrificar calidad, por lo que es ideal para sitios web que buscan mejorar la velocidad de carga.

Ejemplo de imagen en WebP

Si no lo tienes implementando, Page Speed te aconsejará hacerlo (¿será porque lo desarrolló Google?).

WebP es un formato moderno que soporta tanto compresión con pérdida como sin pérdida. Además, también permite transparencias y animaciones. El problema es que no es tan ampliamente soportado por todos los navegadores (lo soportan el 96.86%) y herramientas de edición como los formatos más tradicionales.

SVG (Scalable Vector Graphics)

SVG es un formato de gráficos vectoriales que no utiliza compresión de imágenes como JPEG o PNG, sino que se basa en XML para describir las imágenes en términos de vectores. Es ideal para logotipos, iconos, y gráficos que necesitan ser escalados a diferentes tamaños sin perder calidad.

Ejemplo de imagen en SVG

Su ventaja principal es su escalabilidad infinita sin pérdida de calidad, pudiendo ser editados con CSS y JavaScript. Por contra, no es adecuado para imágenes complejas o fotografías.

AVIF (AV1 Image File Format)

AVIF es un formato más reciente que ofrece compresión con y sin pérdida, y es conocido por su capacidad para mantener alta calidad visual con tamaños de archivo mucho más pequeños en comparación con JPEG y WebP.

Ejemplo de imagen en AVIF

Es ideal para fotografías y gráficos en la web (soporta HDR) donde se necesita la mejor compresión posible sin comprometer la calidad. Por contra, es menos compatible que WebP en lo que a navegadores se refiere, con un porcentaje del 93.16%.

Etiqueta <picture>

Dados los problemas de compatibilidades que existen con WebP y AVIF, te aconsejo muy mucho implementar las imágenes con la etiqueta <picture>. Este tag nos permite especificar diferentes versiones de una misma imagen para diferentes situaciones, como diferentes tipos de dispositivos o navegadores.

<picture>
    <source srcset="imagen.webp" type="image/webp">
    <source srcset="imagen.jpg" type="image/jpeg">
    <img src="imagen.jpg" alt="Descripción de la imagen">
</picture>

Como ves en el código arriba indicado, vemos que para la imagen imagen.jpg indicamos que muestre la versión WebP si es compatible y, si no es compatible, que muestre la versión jpg.

Obviamente no te vas a poner a picar código para implementar esto sino que al usar plugins como Imagify ya te lo configura automáticamente al generar la versión WebP.

¿Qué formato usar?

Aunque arriba ya te he dicho qué formato usar en cada momento, puede que te asalten dudas en lo que al WebP y AVIF se refiere. Yo lo que suelo hacer es subir la imagen en formato PNG o JPG cuando aplique y después convertirlas a WebP con Imagify.

De esta forma, en aquellos nagevadores en los que reconozca este formato de nueva generación, mostrará el WebP y en caso contrario mostrará el nativo.

Convertidores online de Webp

Ya sea por el punto anterior que te he comentado o porque simplemente prefieras subir la imagen en formato webp, te comento que existen varias herramientas de edición visual online que puedes usar. De todas, mi favorita es convertio.co ya que permite transformar desde varias extensiones y también permite convertirlas a AVIF.

Aprovecho y te comento que para hacer menos pesados los Gifs, una opción es usar cloudconvert.com para convertirlos a mp4, que ya pasa a ser un video, pero consume bastante menos.

Lazyload de imágenes web

Lazy load es una técnica de optimización que no carga las imágenes hasta que no estén a punto de ser visibles por el usuario, en lugar de cargarlas todas al mismo tiempo. Esto significa que si un visitante no se desplaza lo suficiente como para ver ciertas imágenes, esas imágenes no se cargan, ahorrando recursos y acelerando la experiencia de navegación.

A nivel de HTML el código de una imagen retrasada con lazy load quedaría de la siguiente forma:

<img src="imagen.jpg" alt="Descripción de la imagen" loading="lazy">

Esto en su momento fue toda una revolución y lo cierto es que es tan util que los propios navegadores, como Chrome o Firefox, ya usan nativamente este sistema.

Para su implementación puedes usar plugins como Perfmatters, Smush o WpRocket. No obstante, como son de pago, también puedes usar algún plugin específico que implemente esta función, que hay varios. De hecho WpRocket tiene uno que hace esta acción en concreto de manera gratuita.

Punto importante aquí es que en las imágenes del above the fold (es decir la parte visible de la web nada mas cargarla) no debe haber carga diferida, ya que afectan al LCP. Piensa que el LCP mide el tiempo que tarda en cargarse el elemento más grande visible en la pantalla y si, justo, estamos posponiendo durante un breve tiempo la ejecución de una imagen, estamos provocando un retraso innecesario.

Para evitar que esto ocurra, podemos especificar en Permatters el numero de imágenes a las cuales no queremos que aplique esta funcionalidad, indicando alguna clase a la que pertenezcan (lo cual es muy util) o directamente especificar la ruta o URL del archivo.

Estas mismas posibildiades de configuración las podemos implementar también con WpRocket:

Precargar las imágenes en WordPress

La precarga de imágenes (o image preloading) es una técnica con la que indicamos al navegador que cargue ciertas imágenes antes de que realmente sean necesarias para mostrarse en la pantalla. Esto es particularmente útil para mejorar el Largest Contentful Paint (LCP), ya que mide el tiempo que tarda en cargar y mostrarse el contenido visual más grande en la ventana del navegador (disculpa que insista tanto en ello).

Básicamente, le estamos diciendo al navegador que priorice la carga de una imagen específica que es crucial para la experiencia del usuario. Por lo general, se utiliza para imágenes que aparecen en el above the fold, es decir, en la parte de la página visible sin necesidad de desplazarse.

Esto se hace añadiendo un enlace en el <head> del documento HTML como este:

<link rel="preload" as="image" href="ruta-de-la-imagen.jpg">

Pero, de nuevo, no hace falta que lo configures manualmente ya que plugins como Perfmatters te permiten precargar las imágenes que le indiques.

Tamaños adecuados para el SEO en imágenes

Salvo que tus imágenes se vayan a proyectar en los principales cines de todo el mundo, por favor, generalas con unas dimensiones adecuadas.

¿Cual es ese tamaño adecuado? Pues por norma general es el ancho del contenedor de tu web, el cual habrás definido previamente en el módulo de apariencia de WordPress.

En caso de que no lo recuerdes, te comento un truco.

Inspeccionas con el botón derecho la imagen a optimizar y encontrarás la imagen con su tamaño:

Arriba puedes ver que la imagen ocupa un tamaño de 500 px de ancho por 350 px de alto. No obstante, esas son las dimensiones de la imagen no las dimensiones del espacio reservado, es decir, el hueco que hay en la pantalla para dicha imagen.

Dicha métrica la podemos sacar si nos posicionamos sobre la URL que aparece en el campo SRC o si vamos directamente en la sección derecha del inspeccionador, justo en la parte inferior. En ambos casos veremos en nuestro ejemplo que este espacio es de 305 x 214 px, es decir, estamos cargando una imagen más grande que la del espacio reservado, lo cual no es óptimo.

Si no respetamos las dimensiones del contenedor podemos provocar un proceso de redimensionado, el cual consume recursos adicionales, lo que puede afectar la fluidez de la página, especialmente en dispositivos con menor potencia.

Por otro lado, si dejamos que WordPress, el tema o algún plugin reescale una imagen podemos provocar en ocasiones una perdida de la calidad y una peor nitidez. Además, escalar una imagen no suele ser una buena practica ya que nos cambia la URL de la imagen y no suele quedar optimizada (ocupando más espacio que la original).

Ajustes de medios

En los ajustes de medio de WordPress podemos configurar las dimensiones predeterminadas para las imágenes que se suben a tu sitio web. Estas configuraciones determinan los tamaños que WordPress generará automáticamente para las imágenes cuando las subamos a la biblioteca de medios.

Para editarlas, debes ir a tu panel de administración de WordPress > Ajustes > Medios:

Por cierto, estas son los formatos que eliges después al usar cada imagen en los artículo o entradas.

Como ves en la imagen de mi web, en algunos casos tengo un 0 puesto. Esto es para evitar redimensionamientos automáticos en ciertos casos:

Eliminar imágenes generadas automáticamente por código

Además de lo explicado anteriormente, también se pueden deshabilitar la generación de miniaturas por código, desde el functions.php:

// Evitar la generación de imágenes de tamaño medio, grande y miniatura
function desactivar_tamanos_de_imagenes() {
    // Desactiva el tamaño de la miniatura
    update_option('thumbnail_size_w', 0);
    update_option('thumbnail_size_h', 0);
    // Desactiva el tamaño medio
    update_option('medium_size_w', 0);
    update_option('medium_size_h', 0);
    // Desactiva el tamaño grande
    update_option('large_size_w', 0);
    update_option('large_size_h', 0);
}
add_action('init', 'desactivar_tamanos_de_imagenes');

// Eliminar imágenes de tamaño intermedio, grande y miniatura de la carga
function eliminar_imagenes_tamanos_innecesarios($sizes) {
    unset($sizes['thumbnail']); // Elimina miniatura
    unset($sizes['medium']);    // Elimina tamaño medio
    unset($sizes['large']);     // Elimina tamaño grande
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'eliminar_imagenes_tamanos_innecesarios');

Si te fijas, lo que estamos haciendo es justamente lo que te indicaba anteriormente, es decir, poner las dimensiones a 0 para que no se generen.

Así mismo, te comento que también podemos crear tamaños específicos para que se generen automáticamente al subir las imágenes. Por ejemplo, si queremos generar una imagen de 900 x 600 px podemos usar el código siguiente:

// Añadir un tamaño de imagen personalizado de 900x600 píxeles
function agregar_tamano_imagen_personalizado() {
    add_image_size('image_96', 900, 600, true); // El tercer parámetro 'true' recorta la imagen a exactamente 900x600 píxeles
}
add_action('after_setup_theme', 'agregar_tamano_imagen_personalizado');

// Hacer que el tamaño de imagen personalizado esté disponible en el selector de tamaño de imagen en el editor
function mostrar_tamano_imagen_personalizado($sizes) {
    return array_merge($sizes, array(
        'image_96' => __('image_96'),
    ));
}
add_filter('image_size_names_choose', 'mostrar_tamano_imagen_personalizado');

Donde se almacenan las imágenes

De cara a la optimización de las imágenes para web, es importante saber donde se encuentran a nivel de servidor. Por lo que te comento que puedes encontrarlas dentro de tu administrador de archivos, en Public_html > Wp-content > Uploads:

Aquí encontrarás los diferentes formatos generados automáticamente al subir una imagen a WordPress, ordenados en carpetas por año y fecha, salvo que lo hayas desmarcado desde Ajustes de medios en "Organizar mis archivos subidos en carpetas basadas en mes y año".

Buenas prácticas para subir imágenes a WordPress

Llámalo SEO con imágenes o llámalo buenas prácticas, pero por favor, ten en cuenta una serie de puntos que considero bastante importantes cuando subimos imágenes a nuestra web.

De entrada, uno de los más críticos para mi es la nomenclatura de las imágenes. Si bien el nombre de las mismas no afecta directamente al posicionamiento en buscadores, cuidadito con escribir caracteres fuera de la codificación ASCII, como una simple Ñ, una tilde, mayúsculas o espacios.

Sí, sé que WordPress te convierte las mayúsculas a minúsculas y los espacios a guiones medios pero aun así yo ya las subo de esta manera. De hecho, sé de algún problema en alguna migración por usar cárteres que no se debían usar.

Lo cual me llega al siguiente punto, no subas las imágenes directamente al servidor a través de un FTP o a través del administrador de archivos salvo que estés muy seguro de lo que haces. Piensa que las versiones en otros tamaños solo se generarán si las subes a través de WordPress y no existirá esa conversión de espacios y caracteres.

De igual forma, no borres imágenes directamente del servidor, salvo que sepas lo que estás haciendo. Y aun así, te aconsejo pasar un crawler para ver que no hay problemas. En este sentido, puedes echarle un ojo a este artículo en el que explico que como encontrar enlaces rotos con Screaming Frog.

Atributos ALT en imágenes WordPress

Mención especial merece el tag ALT. Y es que, la etiqueta ALT html sirve de descripción de la imagen al ser usada por los invidentes, lo cual mejorar la accesibilidad y el SEO de la misma.

Al incluir un ALT descriptivo y relevante, le estamos dando a las personas que usan lectores de pantalla y Google más contexto sobre el contenido de tu página, lo que mejora tu posicionamiento en las búsquedas.

Esta etiqueta no es visible dentro del contenido, por lo que puedes aprovecharla para meter palabras clave por las que te quieras posicionar dentro de un sentido lógico. Por contra, Fernando Macía en su libro de SEO Avanzado no recomienda incluir dichas keywords en imágenes que no sean descriptivas, como iconos, por ejemplo.

Así pues, no abuses de ello.

Sitemap de imágenes

Crear un sitemap de imágenes no es algo que todos los sitios web necesiten, pero en ciertos casos estrictos, puede marcar una gran diferencia, consiguiendo que Google indexe mejor y presente tus imágenes en los resultados de búsqueda.

Si tienes un sitio web con un gran volumen de imágenes, como un portafolio de fotografía o una tienda en línea con muchos productos, crear un sitemap de imágenes te puede ser de gran utilidad. Este tipo de sitemap ayuda a Google a descubrir todas las imágenes de tu sitio, incluso aquellas que no están directamente enlazadas o que se cargan a través de scripts dinámicos, asegurando que ninguna se quede fuera de los resultados de búsqueda.

Para ello, podemos usar herramientas Yoast, Rankmath o directamente Screaming Frog, que nos permiten crear manualmente un sitemap de nuestro sitio.

Herramientas de WP para imágenes

Estupendo, llegados a este punto ya hemos puesto todo de nuestra parte para que las imágenes estén bien optimizadas. Ahora queda medir el resultado para confirmar que así es y no tenemos ninguna ilustración pesada que ralentice los tiempos de carga de nuestra web.

En este sentido, existen varias herramientas online para detectar imágenes problemáticas que penalizan los tiempos de carga. Yo suelo usar GT Metrix, WebPageTest y, por supuesto, PageSpeed para ver que me dice el propio Google sobre mi rendimiento web.

Vamos a ver cada una de ellas y sus puntos fuertes.

GTMetrix

GT Metrix la suelo usar para medir el peso total de las imágenes de una URL en WordPress (debes registrarte para poder acceder a toda la información). Como ves abajo, en la sección inferior te indica el peso total de los recursos de tu web, incluyendo unos porcentajes bastante útiles.

Así mismo, podemos ver en la sección de Top Issues una serie de notificaciones que afecta directamente a las Core Web Vitals, con su correspondiente corrección.

Por último, otra característica importante de esta herramienta online es la cascada de recursos en la sección superior que nos muestra los pesos y tiempo de descarga, lo cual es bastante práctico porque podemos analizar en mayor detalle cada recurso web (ya no solo imágenes sino css, fuentes, JavaScripts, etc).

Webpagetest

Webpagetest es una herramienta que descubrí en el libro de SEO Avanzado y que encuentro super util. Esta herramienta gratuita nos permite medir la velocidad online proporcionando datos detallados sobre cómo se carga tu sitio en diferentes navegadores y ubicaciones globales.

Tiene cierto parecido con GTMetrix ya que nos ofrece el mismo Waterfall de recursos y bastante información sobre puntos a corregir que afectan a métricas como el First Contentful Paint (FCP), el Largest Contentful Paint (LCP).

Como punto positivo, te comento que no realiza un único test sino varios para evitar medidas disparadas. Por contra, si la herramienta está saturada de peticiones te pondrá en una cola y te tocará esperar bastante.

PageSpeed

Aunque la he dejado para el final, Page Speed es una herramienta vital para medir los tiempos de carga de tus imágenes. Está desarrollada por Google y te da información directa sobre la velocidad de carga de tu web, tanto en móvil como en ordenador.

Mi consejo aquí es que veas en Search Console o Google Analytics por donde pillas el tráfico y analices el resultado en base a ello. En lo que a imágenes se refiere, encontrarás varios mensajes como los de abajo relativos a imágenes no optimizadas, que están provocando un retraso en la velocidad de carga bastante grave.

Vamos a ver los principales en mayor detalle.

Publica imágenes con formatos de próxima generación

Mensaje que te anima a usar los formatos como WebP o AVIF. Como he comentado anteriormente, estos formatos son más eficientes en compresión que JPEG o PNG, lo que significa que tus imágenes ocuparán menos espacio sin perder calidad.

Esto no solo reduce el tiempo de carga, sino que también mejora el Largest Contentful Paint (LCP), una de las Core Web Vitals que mide la rapidez con la que se carga el elemento más grande visible en pantalla.

También afecta al First Contentful Paint (FCP que mide el tiempo que tarda en aparecer el primer elemento visual de la página), porque estos formatos permiten que las imágenes se carguen más rápido gracias a su mayor eficiencia en la compresión.

Recuerda que para ello puedes usar plugins como Imagify, WP Rocket o ShortPixel.

Renderizado del mayor elemento con contenido

El Largest Contentful Paint (LCP) mide cuánto tiempo tarda en aparecer el elemento principal de tu página, como una imagen o un bloque de texto, y si este elemento tarda mucho en cargarse, tu LCP se verá afectado negativamente.

Por mi experiencia, una de las causas más comunes son imágenes grandes o sin optimizar (además de algún script que bloquea la carga). Para solucionarlo, asegúrate de que tus imágenes estén optimizadas y que el código de tu página no tenga bloqueos innecesarios.

Codifica las imágenes de forma eficaz

Codificar las imágenes eficazmente significa básicamente comprimirlas para que sean lo más ligeras posible sin perder calidad. Imágenes pesadas ralentizan la carga de la página, afectando tanto al First Contentful Paint (FCP) como al LCP.

Para ello, puedes usar herramientas de compresión como compressor.io o los plugins mencionados antes para reducir el tamaño de tus imágenes antes de subirlas.

Usa un tamaño adecuado para las imágenes

Cargar una imagen más grande de lo necesario es como llevar una maleta gigante para un viaje de un día: desperdicio total. Si subes imágenes de 2000x2000 píxeles para mostrarlas en un espacio de 300x300, estás ralentizando tu sitio innecesariamente.

Esto afecta directamente al LCP y FCP, ya que el navegador tarda más en renderizar estas imágenes. Aquí la solución es redimensionar tus imágenes al tamaño justo que necesitas antes de subirlas, lo cual no solo mejora la velocidad de carga, sino también la eficiencia en el uso de recursos.

Los elementos de imagen no tienen width y height explícitos

Especificar el ancho y alto de tus imágenes en el HTML ayuda al navegador a reservar el espacio necesario antes de cargar la imagen, lo que evita cambios bruscos en el diseño mientras la página se carga, un problema conocido como Cumulative Layout Shift (CLS).

Si no lo haces, podrías terminar con saltos inesperados en el contenido, lo que perjudica la experiencia del usuario y afecta negativamente las Core Web Vitals. Para asegurarte de que todas tus imágenes tengan estos atributos definidos puedes usar plugins como Permatters o WP Rocket.

Detectar imágenes problemáticas en bulk

Detectar imágenes problemáticas de una URL está bien, pero ¿que pasa si lo queremos hacer para todo el dominio?

En este caso te aconsejo hacer una auditoría con Screaming Frog ya que ahí encontrarás todas tus recursos visuales, pudiendo ver las imágenes pesadas (de más de 100 KB), aquellas que no tengan el campo ALT o que directamente estén rotas.

Procedimiento para optimizar las imágenes

Si has llegado a este punto de una sola lectura, puede que tengas la cabeza como un bombo y no sepas que orden seguir para optimizar las imágenes de tu web. Para ello, aquí te dejo una flujograma con el orden que yo sigo para asegurarme de que las imágenes están bien trabajasdas.

1. Creo la imagen con su nomenclatura dentro de la codificación ASCII y sin mayúsculas ni tildes ni espacios (en su lugar, escribo guiones).
2. Adapto el tamaño de la imagen al espacio reservado con Photoshop, aunque también puedes usar Photopea o la funcionalidad de iloveimg.com.
3. Comprimo la imagen con compressor.io.
4. La subo a WordPress desde la biblioteca de medios.
5. Escribo el texto alternativo o ALT.
6. En el momento de subida, la imagen se convierte a WebP gracias a Imagify.
7. Se aplica el lazy load gracias a la configuración de Perfmatters.
8. Mido con PageSpeed en incognito el resultado de la URL para asegurarme que no penaliza los tiempos de carga.

Consejos finales para trabajar el SEO de imágenes

Y, ya para terminar, te dejo como recompensa un par de consejos para trabajar el SEO de imágenes, que considero bastante importantes y que resumen, en cierto modo, algunos puntos críticos de este artículo.

• Usa el texto alternativo (texto ALT) pero no solo para meter palabras clave robóticas.
• Localiza las imágenes si haces SEO local o Rank & Rent.
• No sobrepases con las imágenes el ancho completo del contenedor.
• Te aconsejo mejorar las imágenes (comprimir y reescalar) antes de subirlas a WordPress.
• Al editar imágenes muchos plugins te ofrecen mantener las originales, te aconsejo mantenerlas.
• Si usas algunos sliders (carruseles de imágenes) o galerías, ten presente que algunos maquetadores crean dimensiones nuevas que puede que no estén optimizadas.
• Imágenes implementadas con CSS o Javascript no suelen ofrecen la versión WebP o AVIF.
• Ciertas webs, como estudios fotográficos o E-Commerce, necesitan que sus imágenes sean de calidad por lo que no te obsesiones en reducir su calidad porque empeora la experiencia de usuario (UX).
• Crea una backup de la web antes de meterle mano a las imágenes.
• No uses imágenes generadas al tun tun con la IA ya que dan sensación de web cutre y/o nicho rápido.
• A Google le gusta el contenido original, por lo que es mil veces mejor si tu imagen es original y no tomada de una banco de imágenes. Y si la vas a tomar de un banco de imágenes, edítala para cambiar el contraste, por ejemplo, o el tamaño, de manera que sea más original.

Y con esto, ya sí que sí, hemos terminado esta guía de seo con imágenes, espero que te haya sido de gran utilidad.