Get Social With Us
10 consejos para el posicionamiento de imágenes en Google | Fiebre Creativa
21434
post-template-default,single,single-post,postid-21434,single-format-standard,ajax_fade,page_not_loaded,,select-theme-ver-2.2.1,wpb-js-composer js-comp-ver-5.6,vc_responsive
Optimización de imágenes para web

10 consejos para el posicionamiento de imágenes en Google

¿Para qué fijarse en el posicionamiento de imágenes cara a los spiders de Google?

  • Conseguir mejor ranking en Google y mejorar la velocidad de navegación por la página web.
  • A Google le encanta rastrear imágenes para el buscador de imágenes.
  • Los buscadores no pueden leer nada de lo que hay contenido en una imagen.
  • Las imágenes tardan en cargar, lo que puede hacer que se incremente el tiempo de carga y aumentar el número de abandonos. Intentar usar las menos posibles u optimizarlas al máximo.

Técnicas de optimización

1.- Tamaño de la imagen

El tamaño debe ser lo menor posible que nos deje el diseño de nuestra web, para acelerar la velocidad de carga y evitar el consumo de datos excesivo para los usuarios de dispositivos móviles (sobre todo los que tienen consumo de datos limitados)

2.- Resolución de imágenes

Al igual que la anterior, cuanta más resolución tenga nuestra imagen, más pesará y más costará la descarga. Debe ser lo menor posible, Es conveniente utilizar herramientas de optimización. Esto ayuda a reducir el tiempo de carga la página.

3.- Nombre de la imagen

Nombra a la imagen con un texto descriptivo, a poder ser, sin caracteres que puedan estropear la navegación (tildes, eñes, etc)

Ej: Diferencia entre. Si fueras Google, y sin saber nada de HTML ¿entenderías que contiene cada una de estas dos imágenes?

  • <img src=”DCM_38274.JPG” />
  • <img src=”catedral_de_leon_iluminada_de_noche.jpg” />

4.- Atributo ALT

Describir la imagen en el atributo ALT de la imagen de manera lo más concisa y descriptiva posible.

Ej: Otro caso igual al anterior. Si no sabemos nada de HTML ¿Qué entenderíamos en el siguiente código?

  • <img src=”DCM_38274.JPG” alt=”” />
  • <img src=”catedral_de_leon_iluminada_de_noche.jpg” alt=”Foto ganadora del II festival Focus de fotografía nocturna de León” />

5.- Dimensión de la imagen

Ajustar las dimensiones a las necesarias, sin perder de vista los puntos 1 y 2 (Peso y resolución). Adaptar la resolución real, a la indicada en el código.

Ajustar dimensiones de imagen a dimensiones de HTML para optimización web

Las imágenes alojadas, no tienen porque ser del mismo tamaño que en su visutalización

6.- Formato de archivo de imagen

Utilizar lo más posible los formatos JPEG, PNG y GIF. También buenas por su buena adaptación a web y por el buen tamaño para imágenes.

  • GIF Format – Para animaciones.
  • PNG Format – Para iconos e imágenes con transparencia.
  • JPEG Format – Para fotografías e imágenes con alta resolución.

7.- Sitemap de imágenes

Si utilizamos JavaScript, CSS, pop-ups u otras formas de mostrar imágenes en la página web de Google los sitemaps de imágenes ayudan a mejorar el rastreo de todas las imágenes.

8.- Imágenes decorativas o auxiliares

Es preferible no usar la etiqueta ALT para imágenes decorativas ya que no son relevantes. Sería recomendable ponerlas todas a través de las hojas de estilo CSS.

9.- Adaptación a dispositivos móviles

Adaptar nuestra web a móviles y tablets aumenta el ranking, así que es bueno intentar adaptar en la medida de lo posible dichas imágenes para que no pierdan su legibilidad en estos dispositivos y reducir

Consejo: Es bueno, si en el CSS en la versión escritorio tiene una serie de imágenes decorativas, estas sean omitibles en la versión móvil.

10. Imágenes Base64

Es bueno también el uso en base64 para codificar la imagen de logotipos o primeras imágenes para obtener mejor velocidad de Web. Sólo convierte la imagen en un binario.