Advertisement
  1. Web Design
  2. SEO
Webdesign

Optimizar Imágenes para SEO

by
Length:ShortLanguages:
This post is part of a series called SEO Fundamentals for Web Designers.
Essential Tools for SEO
Helping Search Engines Handle Pagination

Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)

Una de las formas más fáciles de optimizar el contenido de una página es prestando atención a las imágenes. Casi todas las páginas contienen imágenes, ya sea en forma de fotografías, ilustraciones o iconos. Estas pueden ayudar a posicionar mejor tu página en los resultados de búsqueda con unos simples cambios y conseguir así algunos visitantes extra.


¿Optimizar las Imágenes? ¿Pero Por Qué?

El gran problema aquí es que los motores de búsqueda no pueden ver las imágenes. Espera, déjame reformular la frase; pueden ver que hay una imagen, pueden incluso reconocer los píxeles de las imágenes, pero no pueden acceder al contenido que representa la imagen en sí.


Google hace todo lo posible para entender las imágenes que encuentra en la web, pero estas necesitan tu ayuda…

Imaginemos que Google encuentra esta imagen (soy un fan de los coches, así que he usado esta imagen de un Ford GT40 de Sumlin como ejemplo):

Ford GT40 in Gulf colors

Los motores de búsqueda saben que es una imagen porque hemos usado la etiqueta HTML <img>, pero la única información que tienen de ella es la URL. Los humanos podemos ver con facilidad que se trata de la imagen de un coche, pero los motores de búsqueda no tienen esta capacidad. No obstante, podemos ayudar a los motores de búsqueda a entender mejor las imágenes a través del atributo alt y un adecuado nombre de archivo


Atributo Alt

El atributo alt especifica un texto alternativo para los casos en los que la imagen no pueda ser mostrada (puede ser por un error, una conexión lenta, un lector de pantalla, etc.)

Este atributo no es solo útil para los visitantes, también lo es para los motores de búsqueda. Les proporciona una clave sobre la temática representada por imagen. Por este motivo es una buena idea usar palabras clave en el la descripción alt (y repetimos, no abuses de las palabras clave).

Si inspeccionas el código de tus imágenes previas, comprobarás si ya disponen de una descripción alt:

A través de este atributo alt, proporcionamos a los motores de búsqueda dos piezas importantes de información.

  • Es la foto de un Ford GT40.
  • Tiene los colores de Gulf.

Ahora, si alguien usa 'GT40 con los Colores de Gulf' o una cadena de búsqueda  parecida en el Buscador de Imágenes de Google, existen muchas posibilidades de que aparezca nuestra imagen.

Como puedes ver; agregar una descripción alt es muy sencillo, solo necesitas acceder al código HTML de la imagen.

wordpress upload dialog
El Gestor de Medios en WordPress

Algunos sistemas de gestión de contenido como WordPress te permiten especificar una descripción alt en el momento mismo de cargarla.


Nombre de Archivo

Si quieres optimizar tus imágenes más aun, podrías cambiar sus nombres de archivo. Empleando un nombre de archivo descriptivo podemos ayudar a los motores de búsqueda.

Una foto típica de una cámara digital tendrá un nombre de archivo parecido a 'DSCO123.jpg'. Si cargamos esta foto y la usamos en nuestra página, ese nombre dice muy poco a los motores de búsqueda ya que es muy poco informativo. Sí, podríamos usar un atributo alt, pero podemos hacer mucho más si cambiamos el nombre de archivo.

Así que, en lugar de llamar a nuestra foto 'DSC0123.jpg', podríamos llamarla por ejemplo 'canasta-de-manzanas-rojas.jpg'. Si has leído nuestro artículo cómo crear una estructura de URLs amigables para el SEO, ya sabrás que es mejor usar guiones para separar las palabras. El uso de otro tipo de separadores como guiones bajos (_) signos de + (+) o ningún separador, debería evitarse. Usando guiones, los motores de búsqueda son capaces de reconocer las partes que componen el nombre como palabras individuales.


¡No Olvides el Tamaño de los Archivos!

Como ya habrás oído; Google a incorporado la velocidad de página como factor determinante para el posicionamiento en los resultados de búsqueda. Esto significa que el tiempo de carga de una página es uno de los factores de posicionamiento; el incremento del uso de teléfonos inteligentes y el internet móvil han jugado un papel importante en esta decisión. No es nada sorprendente, puesto que una web lenta no es cómoda para los usuarios.

El peso de una imagen es uno de los elementos determinantes para el tiempo de carga final de una página concreta. La optimización de las imágenes puede por tanto mejorar el rendimiento notablemente. Quizá no lo notes mucho en una página con solo una o dos imágenes, pero si esta tuviese que cargar docenas de imágenes la diferencia sería increíble.

El peso del archivo depende en gran medida de la resolución de la imagen. Cuanto más alta es la resolución de los archivos, más pesan, lo que significa que debemos buscar un equilibrio entre la calidad y el peso del archivo.

Para tomar una decisión acertada, necesitamos considerar los distintos tipos de formato de archivo y sus ventajas.

Los tres más tres tipos de formato más comúnmente usados son JPG, PNG y GIF:

  • JPG es un formato de archivo con un nivel de compresión ajustable. Al comprimir una imagen, se descartan ciertas piezas de información que la vista prácticamente no percibe. Por esto, las imágenes JPG se usan muy habitualmente en sitios web.
  • PNG es un formato habitualmente empleado porque admite transparencia (a diferencia de los archivos JPG). El PNG es una alternativa sin pérdida al formato GIF.
  • Las imágenes en formato GIF no tienen pérdidas si tienen 256 colores o menos. Este formato también admite animaciones, por eso todavía se usa en algunos sitios web. 

Es imposible decir que tipo de archivo de imagen es el mejor. Los archivos JPG, PNG y GIF son todos útiles bajo condiciones específicas. Si quieres optimizar tus imágenes, te sugiero que escojas un tipo de archivo con una calidad aceptable y el tamaño de archivo más pequeño. En caso de duda, simplemente prueba varios tipos y comparalos.

Una cosa que nunca debes olvidar, es que es mejor no redimensionar las imágenes mediante HTML. Subir una imagen grande (p. ej.800px x 600px) y mostrarla a una resolución menor (p. ej. 400 x 300px) a través de los atributos width y height de HTML es un gasto innecesario de ancho de banda. Con la llegada del Diseño Web Responsivo, las imágenes normalmente se cargan en una página web, después se muestran según el tamaño del elemento que las contiene, pero este es otro tema aparte por sí mismo y la optimización de imágenes en dichas circunstancias está todavía en sus inicios.

Si quieres analizar el rendimiento de tus imágenes, puedes usar YSlow o Google Page Speed Insights. Las siguientes técnicas de optimización también te podrías ser útiles:


Puntos Finales a Destacar

Uno de los beneficios de optimizar tus imágenes para el SEO es que podrán aparecer en la Búsqueda por Imagen de Google, atrayendo potencialmente algunas visitas extra a tu web. 

La Búsqueda por Imagen no ayuda a cualquier negocio, pero en algunas ocasiones te puede proporcionar algo de tráfico muy cualificado. Especialmente para recetas, productos y material digital (iconos, fotografía de stock…) puede ser muy útil. En cualquier caso: ¡la optimización no produce daños!

Si ya has concluido la optimización de tus imágenes, no te olvides de enviar un Sitemap para las Imágenes. Esto ayudará a los motores de búsqueda a encontrar e indexar tus imágenes.


Conclusión

Optimizar las imágenes para SEO implica tres factores: el nombre del archivo, el tamaño del archivo y lo más importante, el atributo alt. El nombre de archivo no debería ser una cadena aleatoria de letras y números, sino un nombre descriptivo con la palabra o palabras clave. El tamaño del archivo debería mantenerse lo más bajo posible para mejorar la velocidad de tu sitio (uno de los factores del posicionamiento para Google). Y por último pero no menos importante: no te olvides de añadir una descripción alt a tus imágenes. Es una de las formas más sencillas de optimizar tus imágenes para el SEO. 

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.