+34 638350949info@seoparaweb.es

Optimizar las imágenes de una web en 5 pasos. Mejora el posicionamiento con las fotos

Las fotos de una web también pueden optimizarse para los buscadores. Guía completa

Las fotos son cada vez más un elemento imprescindible para cualquier página web.
Por un lado hacen más dinámicas y amenas las páginas, ayudando la lectura y llamando la atención del público, y por el otro son muy bien vistas por el algoritmo de Google encargado de la calidad del contenido: Google Panda, porque pueden aportar información útil para los rastreadores.

La optimización de fotos de una web tiene por tanto una triple importancia para el posicionamiento:

  1. unas fotos optimizadas se posicionarán mejor en los buscadores de imágenes (Google Images, etc.) (y ya que están enlazadas a la web de pertenencia, constituyen un enganche óptimo para la web misma);
  2. añaden contenido y palabras relevantes para la página web en la que se alojan, aumentando la calidad de la página y ayudando el SEO;
  3. optimizar fotos significa optimizar el rendimiento de la página (la WPO, Web Performance Optimization) sobre todo su velocidad, lo que ayuda el posicionamiento web en los buscadores.

Aquí los pasos fundamentales para optimizar las fotos de tus páginas:

1.  NOMBRE DE LAS FOTOS

¡Evita nombrar las fotos con números o letras!

Por muy cómodo que pueda ser, sobre todo cuando estamos trabajando con un elevado número de imágenes, asignarles nombres tipo foto1.jpg, foto2.jpg, etc. equivaldrá a desperdiciar una oportunidad para el SEO: el nombre.

Hay que nombrar las fotos por lo que son, lo que representan, porque Google lee esos nombres.
Imagínate que eres Google, y encuentras esto:

atardecer-mallorca.jpg

vestido-casual-rojo-mujer.jpg

gafas-rayban-aviator.jpg

No has visto las imágenes, igual que Google no las puede ver.
Pero sabes de que tratan gracias a su nombre, igual que Google.

NORMAS PARA NOMBRE DE ARCHIVOS DE IMÁGENES:

a)     el nombre estará compuesto por palabras separadas por guiones medios (¡¡no bajos!!)

b)    el nombre tiene que identificar el contenido, pero que no sea demasiado largo

c)     si se trata de objetos muy conocidos por su nombre comercial/modelo/versión, ponlo sin miedo, porque es lo que los usuarios buscarán

2.  ATRIBUTOS DE LAS FOTOS

Los atributos HTML permiten entregar más información sobre las imágenes a los buscadores:

alt=””: texto alternativo, en el que explicas en un lenguaje más “humano” el contenido de las fotos. Es obligatorio para respetar los estándares de accesibilidad, ya que es el texto que los navegadores muestran en el caso de que no se pueda cargar una imagen, y que leen las herramientas para invidentes;

title=””: título de la imagen, aporta información descriptiva sobre la imagen y es el encargado de hacer aparecer un tooltip al pasar el ratón sobre la misma (hover);
NOTA: a falta del atributo title=, Internet Explorer utilizará el alt= para mostrar el tooltip.

height=”” y width=””: especifican el alto y ancho de la imagen; no son necesarias si no queremos cambiar el tamaño de la foto original, pero serán útiles para Google para que no tenga que descifrar por su cuenta los dos tamaños.

3.  TAMAÑO DE LAS IMÁGENES

Las imágenes para la web suelen contener mucha información innecesaria para su rendimiento on-line, que aumenta considerablemente su tamaño.

Si se suben al servidor fotos de gran tamaño, éstas ralentizarán bastante la carga de la página y empeorarán la WPO, y por ende el posicionamiento.

Para optimizar este aspecto, basta con seguir estas pautas:

a)     las imágenes para Internet tienen que tener una resolución de 72 ppp (píxeles por pulgada). Sólo las pantallas retina de Apple ahora pueden mostrar imágenes al doble de resolución (a día de hoy representan solo el 5% del mercado). Puedes bajar la resolución hasta 72 ppp fácilmente con Photoshop:

Una vez abierta la imagen en Photoshop clica en Imagen > Tamaño de imagen, y ajusta la resolución a 72.

Cambiar resolución de imagen en Photoshop

Para guardar la imagen clica en Archivo > Guardar para Web, y guardala con una calidad baja (Photoshop te da uan vista previa de la apariencia de la imagen con la calidad que elijas:

b)     sube al servidor las imágenes en el tamaño correcto: si quieres mostrar en tu página una foto a 400×320, pero tu imagen original mide 1200×900, es mejor modificar su tamaño antes de subirla; es inútil decirle al servidor que cargue una imagen grande, para luego mostrarla pequeña.

c)    la calidad de la imagen no tiene que ser óptima si se trata de imágenes para sliders o carruseles: hay que tener en cuenta que la atención que el usuario presta a las imágenes de este tipo es mínima, por lo tanto es inútil gastar tiempo de carga y banda para ellas. La calidad de una imagen obviamente también se puede rebajar en Photoshop:

al guardar la imagen clica en Archivo > Guardar para Web, y guárdala con una calidad baja (Photoshop te dará una vista previa de la apariencia de la imagen con la calidad que elijas:

Guardar una imagen para web en Photoshop

En cualquier caso es mejor mantenerlas siempre por debajo de los 100 Kb de peso.

Si las imágenes constituyen el contenido principal de tu web (fotógrafos, reprografía, productos..), entonces podrás sobrepasar este límite según sea necesario, pero piensa siempre en el tiempo de carga de la página.

Afortunadamenete muchas galerías y lightbox cargan las fotos en el momento en el que se visualizan, haciendo la llamada al servidor. Aún así, si la foto pesa 1 Mb (¡eso debería estar prohibido!), tardará mucho en cargarse. Lo que genera: usuario descontento y SEO malo;

c)     ¿todavía no estás satisfecho? Si quieres reducir aun más el peso de los archivos, aquí tienes la solución: http://www.smushit.com/ysmush.it/, donde es posible subir una imagen y el programa la limpiará de toda la información innecesaria, para devolver un archivo de peso inferior.

4.  EXTENSIÓN DE ARCHIVO

Internet soporta varios tipos de archivo de imágenes, pero los más comunes son tres: jpg, png, gif.

a)     JPG: es el más utilizado, con una compresión óptima de la imagen, alta calidad y peso reducido. Desventaja: no permite transparencias (un logo con fondo trasparente en .jpg saldrá con el fondo blanco);

b)    PNG: el formato más utilizado para logos y letras, en general imágenes que necesitan un fondo transparente. DeSventaja: suelen pesar un poco más que los JPG;

c)     GIF: formato utilizado sobre todo para animaciones básicas o para imágenes de baja calidad, que obviamente tendrán un peso muy reducido. Puede ser una buena solución si no se utilizan degradados o colores especiales, ya que este formato dispone de una paleta de sólo 256 colores.

Bastará con elegir el mejor formato según las necesidades de cada uno, siempre con en mente el mantra: peso reducido.

5.  SITEMAP DE IMÁGENES

También las imágenes pueden tener un sitemap, al igual que la página web, para que los buscadores las indexen mejor.

Crear un sitemap para imágenes es muy sencillo, tal y como enseña la web de soporte de Google https://support.google.com/webmasters/answer/178636?hl=es

Código:

<?xml version=”1.0″ encoding=”UTF-8″?>

<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″

xmlns:image=”http://www.google.com/schemas/sitemap-image/1.1″>

<url>
<loc>http://example.com/muestra.html</loc>

<image:image>
<image:loc>http://example.com/imagen.jpg</image:loc>
</image:image>

<image:image>
<image:loc>http://example.com/foto.jpg</image:loc>
</image:image>

</url>

</urlset>

Lo único que tenemos que hacer es sustituir las partes en negrita por las rutas de nuestras páginas e imágenes.

Trabajo tedioso si tenemos muchas páginas y muchas imágenes, así que te dejo una buena solución para generar automáticamente y gratuitamente un sitemap de imágenes.

http://www.clegent.com/image-sitemap-generator.do

Artículos recomendados

Deja un comentario

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies. Para mayor información consulte nuestros Términos y Condiciones

ACEPTAR