La optimización de imágenes para webs es un paso importante que ha de tener en cuenta el diseño de cualquier web que quiera un mínimo de orientación al SEO.
Aunque el mundo de la optimización para motores de búsqueda se basa en gran medida en el texto, lo ideal es acompañar el contenido con imágenes como ilustraciones, descripciones o resúmenes. La mejor recomendación para la optimización de imágenes es utilizar contenido original que sea lo más relevante posible para nuestro propio contenido. En otras palabras, imágenes que nunca se han publicado antes. Esta es una buena razón para que Google dedique recursos a indexar estas páginas.
La búsqueda de imágenes es también una de las consultas más buscadas en los resultados de Google, y los motores de búsqueda acompañan cada vez más a imágenes específicas. Esto convierte la optimización de imágenes en un punto realmente necesario a desarrollar en toda web que pretenda tener un SEO on page medianamente aceptable.
Índice de contenidos
Factores relevantes para la optimización de imágenes
Es altamente aconsejable tener en consideración lo siguiente a la hora de optimizar las imágenes:
Atributo alt
El atributo alt o texto alternativo se trata de un texto que proporciona contenido alternativo cuando la imagen está desactivada o se muestra en un navegador para invidentes; Google utiliza el contenido del atributo alt para clasificar las imágenes. Siempre que sea posible, el texto alternativo debe describir la imagen y contener palabras clave relevantes para nuestra ubicación.
Sin embargo, el uso de palabras clave con demasiada frecuencia puede dar lugar a una advertencia de spam. Las imágenes utilizadas únicamente como fuente para diseño de la propia web (fondos, maquetación, etc) deben incluir un atributo de texto alternativo vacío. La adición de palabras clave con estas imágenes con la esperanza de un mejor posicionamiento debe evitarse bajo cualquier circunstancia.
Comercio electrónico
La optimización de imágenes para e-commerces pasa por tener en cuenta algunos factores específicos. Las tiendas en línea pueden incluir el código de referencia del producto que se muestra (por ejemplo, el código SKU de un producto, el ISBN de un libro, etc.).
Medios online
Incluye información importante, por ejemplo, nombre de la persona, ubicación de la imagen, título del evento u ocasión, autor de la imagen, fechas relevantes, etc.
Artículos y entradas
Al publicar infografías, diagramas ilustrativos, tablas de datos, gráficos de tendencias, etc., debe quedar claro qué representa la imagen. Si los datos están relacionados con un periodo de tiempo o una región específicos, también debe indicarse claramente. Utilizar una buena optimización de imágenes ayudará a los buscadores a entender mejor de qué trata tu post o página estática y para qué keywords debería posicionarlo.
Nombre del archivo
El nombre del archivo de la imagen debe ser descriptivo de su contenido y evitar siempre los nombres demasiado largos. Si deben utilizarse varias palabras, se separan con guiones. Por supuesto, también deben evitarse los caracteres especiales (vocales acentuadas, eñes, etc). Si al nombrar una imagen se estropea el nombre de una imagen o contenido anterior, se puede añadir un número automático al final del nombre del archivo. Ejemplo: zelenski-presidente-ucrania-8583.jpg.
Formato de archivo
Elegir el adecuado es uno de los aspectos más importantes -sino el que más- en la optimización de imágenes. No sólo afecta al peso total de la página y a la velocidad de carga, sino también a la calidad de imagen que percibe el usuario. No es aconsejable que subas al hosting archivos cuyo tamaño supere el espacio disponible en el que se van a mostrar. Es decir, no subas una imagen de resolución 1000×800 píxeles si en la web se va a mostrar a 400×300, puesto que estarías sobrecargando la web tontamente. Dependiendo del tipo de imagen, transparencia y necesidades de animación, elija uno de los siguientes formatos:
JPEG
Los archivos JPEG comprimen la información de la imagen de una foto con distintas relaciones de compresión. Cuanto mayor sea la calidad, menor será la relación de compresión y mayor el peso. Normalmente, conserva el 70% de la información original. Ofrece una de las mejores relaciones entre calidad y peso, siendo de los formatos más convenientes para la optimización de imágenes. Es el formato recomendado para las imágenes fotográficas, pero no se pueden definir las zonas transparentes. Se recomienda guardar en modo progresivo.
PNG
Es un formato de archivo sin pérdidas cuya principal ventaja es la posibilidad de definir áreas transparentes. La desventaja es que es uno de los formatos con menor compresión y, por consiguiente, con un tamaño de archivo mayor. Si desea guardar en modo entrelazado, se recomienda elegir la opción
GIF
Al igual que el formato PNG, permite definir áreas transparentes, pero su mayor característica es la posibilidad de presentar imágenes animadas. La limitación es que la paleta es de sólo 8 bits, por lo que sólo puede utilizarse para imágenes que contengan colores planos, como logotipos animados. Es un formato preliminar porque el contenido que se va a mover es idéntico al del anuncio. Se recomienda guardar las imágenes en modo entrelazado.
WebP
Es un formato creado por Google para la optimización de imágenes, pero aún no soportado por todos los navegadores. Puede utilizarse tanto sin pérdida en la calidad de imagen o con ésta. Si se utiliza, debe considerar incluir un formato alternativo para navegadores incompatibles.
SVG
Un formato a tener en cuenta fundamentalmente para logotipos e iconos que puede manejarse con estilos CSS y Javascript y redimensionarse sin pérdida de calidad.
Pies de foto o leyendas
Son siempre interesantes, tanto desde el punto de vista de la usabilidad como semántico, ya que contextualizan la imagen y forman parte del texto que la rodea. En muchos casos, el pie de foto es lo mismo que el propio texto alternativo, y se aplican las mismas recomendaciones que las ya mencionadas.
Texto circundante
Las imágenes deben insertarse lo más cerca posible del concepto que ilustran. Si se incluyen en un encabezamiento, deben guardar cierta coherencia con el tema desarrollado en ese bloque de contenido.
Imágenes como enlaces
Cuando las imágenes sirven como enlaces, deben tenerse en cuenta tanto las recomendaciones de texto de anclaje como las de atributo alt para armonizar ambos requisitos. Si, por razones de usabilidad o accesibilidad, es necesario dar alguna advertencia al usuario, como que el contenido enlazado se abrirá en una ventana nueva, debe hacerse constar en el atributo title del enlace.
Archivos sitemap de imagen
Google rastrea e indexa la mayoría de las imágenes de las páginas web, pero un archivo de mapa del sitio que contenga imágenes es útil, por ejemplo, para detectar imágenes cargadas mediante JavaScript. Un archivo de mapa del sitio también es recomendable si deseas añadir información como la ubicación geográfica, el nombre y la licencia del sitio.
Sprites, lazy loading y HTTP/2
Durante mucho tiempo, se recomendó el uso de sprites de imágenes (como una colección de imágenes en un archivo, mostradas selectivamente en la página con CSS) y la carga perezosa de imágenes (lazy loading), pero desde que se aprobó el estándar HTTP/2 en 2015, estas recomendaciones no son tan importantes.
En muchos casos, el estándar HTTP/2 permite multiplexar las solicitudes y respuestas entre el servidor y el cliente. Esto significa que los navegadores ya no tienen que esperar a descargas de imágenes pesadas, sino que todo el contenido se descarga en paralelo, por así decirlo, alternando entre las diversas piezas de recursos que requiere la página. Aun así, en el caso de páginas con grandes cantidades de imágenes, como páginas multimedia con largos listados de productos o enormes listas de noticias, las técnicas de carga perezosa pueden suponer una ventaja de rendimiento.
Schema o datos estructurados
Si la imagen representa una receta o un producto, se recomienda añadir datos estructurados para la receta o el producto y añadir una insignia específica a los resultados de Google Imágenes para una mejor identificación.
Procura tener en cuenta siempre las especificaciones de Google para el etiquetado de datos estructurados y las directrices generales de Google sobre datos estructurados para la optimización de imágenes.
Herramientas útiles para la optimización de imágenes online
Kraken.io: Se trata de un compresor de imágenes gratuito que da muy buen resultado.
Redimensionador de Iloveimg: Ideal para cambiar tamaño de imágenes sin tener que recurrir a software de edición de imagen como Photoshop o Gimp.
Convertio: Es un conversor de archivos, ideal para cambiar el formato de una imagen para optimizarla (por ejemplo de PNG a formatos menos pesados como JPG o WebP).
Smush: Es un plugin de WordPress que automatiza el trabajo de la compresión y el redimensionamiento de imágenes. Tiene versión gratuita (suficiente para el 90% de los webmasters) y premium. Incluye otras funciones como lazy load, bulk o conversor a WebP.
Tutorial de cómo optimizar imágenes
Conclusión
La optimización de imágenes es importante para el SEO porque las imágenes pueden mejorar la experiencia del usuario y también pueden ayudar a mejorar el posicionamiento del sitio en los resultados de búsqueda. Como hemos visto, existen multitud de acciones que puedes realizar para optimizar tus imágenes para el SEO.
Quizás, tanta información te haya resultado apabullante. En mi opinión, con hacer estas 4 cosas es más que suficiente:
- Usa un nombre de archivo descriptivo.
- Usa correctamente el texto alternativo o alt text.
- Reduce el tamaño del archivo.
- Usa imágenes relevantes para tu contenido y de alta calidad.
Al hacer esto, puedes mejorar la experiencia del usuario y el posicionamiento de tu sitio en los resultados de búsqueda.
