Las imágenes son un componente primordial en todo sitio web. De hecho, imaginen un website de solo texto: no despertaría la atención, el bounce rate sería muy grande y las conversiones casi nulas. Así que dada la importancia su importancia, vamos con algunos tips para usar las imágenes correctamente y ayudarnos de paso con el SEO.
Cuidar el nombre del archivo
Creo que este es el punto más descuidamos. Usamos nombres genéricos (image1.jpg, image2.jpg), o el nombre que devolvió la cámara (IMG0412.jpg). Google recomienda utilizar nombres descriptivos en la que cada palabra se separe con un guion medio (no guion bajo). Por ejemplo, para el archivo plaza-de-armas-de-lima-peru.jpg será interpretado por el motor de búsqueda como “plaza de armas de lima perú” (cosa que no sucedería con guiones bajos).
Texto alternativo (atributo alt)
El atributo alt debe informarle a Google de manera semántica (ojo con esto) de qué se trata la imagen. Piensa en él como la descripción, leyenda o caption de la imagen.
<img src="plaza-de-armas-de-lima-peru.jpg" alt="Plaza de Armas de Lima, Perú">
<img src="mueble-de-sala-dos-cuerpos.jpg" alt="Mueble de sala de dos cuerpos, marca ABC en venta por XYZ">
Se recomienda incluir los keywords necesarios dentro del atributo alt. Sin embargo, tener mucho cuidado de abusar pues Google lo considerará spam. A eso me refería cuando más arriba puse “de manera semántica”, pues si haces algo como:
<img src="mueble-de-sala-dos-cuerpos.jpg" alt="mueble sala oferta cuero elegante marron negro castaño comprar mueble mueble barato">
No es semántico y corres el riesgo de ser penalizado.
Un punto a mencionar es que cuando comenzamos con esto tendemos a equivocar el atributo title y el alt (error común). El atributo title no ayuda en lo absoluto al SEO de la imagen y podríamos bien omitirlo.
No usar imágenes para texto importante
Aunque es un hábito que casi ha caído en desuso hoy en día, todavía hay sitios web que usan imágenes en lugar de texto. Por ejemplo, para un botón, callouts, items de menú u otros.
Peso de la imagen
A más pesada la imagen, más tardará en cargar y por ende peor experiencia de usuario, mayor porcentaje de rebote y peores resultados en el SEO (Google usa la velocidad de carga como un factor). Así que asegurese de optimizar sus imágenes para web (puede usar editores gráficos como Photoshop, compresores en línea como tinypng, modulos de npm como imagemin, etc).
Además recuerde que se recomienda usar webp como formato de imagen para Google Chrome y jpg o png para el resto de navegadores. Para hacerlo use la etiqueta picture
<picture>
<source srcset="cachorro-bulldog.webp" type="image/webp" alt="Lindo cachorro de bulldog">
<img src="cachorro-bulldog.jpg" alt="Lindo cachorro de bulldog">
</picture>
Si quiere saber más del elemento picture vea el siguiente video:
Revisar la licencia de la imagen
Siempre es recomendable usar una imagen propia que una de stock o descargada de internet. Sin embargo, no siempre tenemos el presupuesto para contratar un diseñador o un fotográfo. Así que es recomendable que use fotos libres de derechos de autor y evitar denuncias que puedan perjudicarlo.
Si desea fotos gratuitas libres de derechos puede visitar
http://pexels.comhttp://pixabay.com
Añadir los atributos width y height (discutible)
Google recomienda siempre añadir los atributos width y height a las imágenes pues estas ya tienen intrínsecamente esas dimensiones; además que le ayudan al navegador a reservar ese espacio y no repintar el layout con la carga de las imágenes. Hasta ahí perfecto. Sin embargo, por temas de experiencia de usuario preferimos asignar dimensiones por css, con lo cual este punto queda en debate (al menos para mí, ustedes pueden hacerle caso a Google). Lo que sí puedo decir por experiencia es que si la imagen es muy grande (una hero image p.ej.) si sería bueno reservar el espacio de alguna manera para evitar un cambio brusco en el layout que confunda a los usuarios.
¿Tienes otros tips? ¿Nos hemos olvidado de algunos? Compártelo en los comentarios.
Referencias:https://www.sitepoint.com/your-guide-to-optimizing-images-for-seo/https://support.google.com/webmasters/answer/114016?hl=en