Muchas veces cuando nos planteamos la optimización de una página web, pensando en la mejora de su posicionamiento en los buscadores, nos centramos únicamente en la parte de contenido que tiene que ver con el texto que se el usuario visualiza. Pero los motores de búsqueda tienen en cuenta otros muchos factores. Uno de ellos, muy importante en las acciones SEO que tenemos que contemplar, es el de las imágenes.

Tenemos que tener en cuenta una serie de características, que determinarán si el contenido visual está preparado para obtener los resultados de posicionamiento que queremos alcanzar.

El peso de las imágenes

Hay que prestar especial atención al peso que tienen las imágenes ya que será determinante a la hora de ralentizar o agilizar la carga de una página. Si añadimos imágenes muy pesadas haremos que la carga sea mucho más lenta.

En primer lugar, esta demora en la carga perjudica al posicionamiento, ya que las páginas más lentas son penalizadas por los buscadores con lo que su posicionamiento cae.

Por otro parte generaremos un problema cuando nuestros usuarios utilizan dispositivos móviles para navegar. No sólo por que la velocidad de la página irá en detrimento de la experiencia del usuario, sino por que estaremos consumiendo innecesariamente megas de transferencia. Es algo que, con una conexión sin red WIFI, es decir, con datos móviles, va a ser sumamente perjudicial. Con lo que es probable que no vuelva a entrar en nuestra web.

Existen tanto plataformas (CDNs que veremos en futuros artículos) como técnicas de programación (por ejemplo, mediante javascript) que permiten detectar el dispositivo del usuario, el tamaño de su pantalla e incluso la velocidad de conexión que tiene. Y con todas estas variables, se transmite una fotografía con un peso y un tamaño optimizado para cada entorno. Esta sería, sin duda, la solución ideal a la hora de publicar imágenes.

El peso de una imagen se puede reducir de dos formas. Si hacemos la imagen más pequeña, tanto su ancho como su alto, ajustándonos a lo que realmente necesitamos, bajaremos su carga.

Otra opción es cuando usamos imágenes con formato JPG. A continuación veremos los diferentes formatos, pero podemos adelantar que los ficheros JPG permiten comprimir las imágenes para reducir su peso. Tenemos que tener presente, como todo en la vida, en que se tiene existir un equilibrio. En esta ocasión es entre la calidad que queremos obtener y el nivel de compresión que queremos aplicar. Si comprimimos en exceso, la imagen verá reducido su peso, pero también se verá pixelada y con una calidad pobre.

Además las imágenes tienen una característica adicional a su tamaño, peso y nivel de compresión que es la resolución. Si tenemos una fotografía que queremos utilizar en una imprenta tendrá que tener una resolución de 300ppp (puntos por pulgada). Mientras que si la queremos usar en una web o una app, es suficiente con 72ppp. Cuanto mayores son los ppp que tiene una imagen, mayor es su peso. No se ve mejor en una web una imagen a 300ppp pero si tarda más en cargar, con lo que lo aconsejable es reducir su tamaño a 72 ppp.

Lo ideal es utilizar un software de edición de imágenes, como Adobe Photoshop. Esta herramienta no sólo permite modificar el tamaño, comprimir las imágenes y modificar su resolución, sino que incluye opciones avanzadas como el la de la eliminación de información innecesaria que todo fichero gráfico incorpora. Esto es lo que se conoce como metadatos. Se trata de contenido de texto que puede dar información como quien es el autor, donde se tomó la fotografía, que programa de edición gráfica lo ha procesado o bajo que derechos de uso se rige. Estos datos se borran para quitar información que no es necesaria compartir de forma pública como para bajar el peso, aunque sea de forma muy poco significativa. Se tiene que valorar si el uso que le vamos a dar a este programa de edición fotográfica justifica su coste.

En ocasiones, de cara a los buscadores, nos interesa mantener algunos metadatos. Como los derechos de uso o la descripción, ya que algunas plataformas son capaces de extraer esta información y de incorporarlas en sus búsquedas.

Existen herramientas online gratuitas que permiten hacer la compresión de imágenes que antes mencionaba, como tinypng.com o compressor.io y que nos pueden sacar de un apuro.

El formato de las imágenes

Cuando guardamos una imagen podemos hacerlo en diferentes formatos según el uso que le queramos dar. Pueden tener un formato RAW usado en fotografía profesional, el formato BMP, desarrollado por Microsoft e IBM y prácticamente en desuso o los formatos más usados en entornos web: el JPG y el PNG.

El formato JPG es el más usado. Permite comprimir la imagen, bajando el peso como comentábamos en la versión anterior. Por el contrario, el formato PNG no permite dicha compresión, con lo que las imágenes son más pesadas, pero tiene la opción de usar fondos transparentes, lo que hace que sean muy prácticas dependiendo del diseño de la web o de la app. Como norma siempre es preferible usar imágenes JPG salvo que necesitemos que tengan el fondo transparente, con lo que nos decantaremos por el PNG.

Existen otros formatos, como el SVG, que es un gráfico vectorial que también se usa en entornos web. Los gráficos vectoriales permiten su escalado sin perder calidad, pero su uso es casi exclusivo para animaciones, logos o iconos.

Los GIFs son otro formato que antaño fue muy popular. Pero hoy en día son pocas las webs que lo usan. Eran una opción para ofrecer animaciones poco pesadas, de tan solo 256 colores, pero que hoy en día, con las novedades del HTML5, han quedado en desuso. Los GIF se han popularizado en plataformas de mensajería, como WhatsApp o Facebook Messenger.

Usar fotografías propias

Sin duda esta es la opción ideal. Poder tomar las fotografías necesarias para nuestro proyecto y que sean inéditas. Igual que ocurre con los textos, cuanto más original sea la fotografía mejor. Los buscadores, como Google, entenderán que es un contenido exclusivo de nuestra web y le dará más relevancia. Esta recomendación está orientada al posicionamiento en buscadores de las imágenes.

Luego está el aspecto legal. Muchas personas dudan en sí es lícito el uso de imágenes descargadas de internet para proyectos propios. La respuesta, en la mayoría de los casos, es que no. Al igual que no podemos copiar un artículo de prensa y usarlo como propio en nuestra web, tampoco podemos hacer lo mismo con las fotografías. Sus autores son los propietarios de los derechos y son los únicos que pueden autorizar a usar dicho material.

El permiso se puede obtener de varias maneras. La primera es adquiriendo el derecho de uso en un banco de imágenes comercial, como Fotolia de Adobe, Shutterstock o Dreamstime, entre otros. Aquí adquirimos una imagen, a un determinado tamaño y con una determinada finalidad (y limitaciones) por una cantidad. A partir de ese momento podemos incorporarla en nuestro proyecto y empezar a usarla.

Existe la alternativa de usar bancos de imágenes gratuitos. En estos casos no tenemos que abonar ninguna cantidad. Tenemos que leer detenidamente las condiciones para saber con que finalidad nos ceden las imágenes, por ejemplo, pueden dar permiso para uso en proyectos personales pero no comerciales. Cada plataforma tiene su propia política de reconocimiento de los autores. En algunas es obligatorio mencionar al fotografo cuando se publica su material, pero en otras esto no es una obligación.

Sea a través de un banco de imágenes gratuito o uno de pago, estaremos publicando imagenes que, tanto para los buscadores como para los usuarios, no son exclusivas, con la parte negativa que esto implica en ambos casos. Se pueden comprar imágenes de forma exclusiva, evitando que sigan a la venta en bancos de imágenes, pero su coste es mucho más elevado.

A veces es más rentabable contratar un fotografo y hacer una sesión de fotos que adquirir material online. Esto nos ofrece un material exclusivo con el que nos pueden idenficar los usuarios, mejorando la percepción que tienen de nuestra marca. Si bien no es raro encontrar empresas que comparten material de su personal o instalaciones también he visto casos de empresas que usan fotografías de bancos de imágenes en LinkedIn, con el fin de dar una imagen ficticia, creando perfiles falsos con estas imágenes. No son dificiles de detectar y suponerun golpe a la credibilidad de la compañía muy serio.

Tenemos que tener especial cuidado si las fotografías incluyen a personas identificables, ya que esto está amparado por la RGPD y si no lo tratamos correctamente puede conllevar una sanción considerable. Este tema se aborda en el capítulo sobre leyes.

Más adelante, en la sección de recursos, incluiré un listado de bancos de imágenes online de la que podemos obtener imágenes gratuitamente.

Atributos HTML en las imágenes

Cuando programamos una página web y añadimos imágenes, tanto para fotografías de productos, fondos o simples iconos, es importante añadir en el código las propiedades Alt text (texto alternativo) y título de la imagen.

Esto en un primer lugar ayuda a que los buscadores agrupen y clasifiquen mejor las imagenes. Por eso es importante que se facilite a los programadores un texto bien pensado y descriptivo. Así será mucho mejor un texto alternativo que diga “Cliente feliz disfrutando de un café en un restaurante” antes que dejarlo vacío o poner “fotografia-1”.

No obstante, hoy en día, y gracias al avance del machine learning, los motores de búsqueda son capaces de “ver” las fotografías y de reconocer el contenido. Un ejemplo es el servicio Vision de Google el cual no es solo capaz de extraer por ejemplo el texto de una imagen, como hacían los OCRs (Optical Character Recognition) o en español Reconocimiento Óptico de Caracteres) de los escaners, sino que son capaces de ir mucho más allá. Pueden identificar los objetos que se ven en la fotografía, por ejemplo si es un barco o una casa. También pueden reconocer si una persona está sonriendo o si está triste. Este análisis se puede como moderador de contenido, así si un usuario sube una imagen no deseada, por ejemplo contenido violento o para adultos, el sistema es capaz de detectarlo de forma automática y de bloquearla. El reconocimiento de imágenes es una tecnología en constante evolución y que abarca diferentes areas de aplicación, no solo tiene su uso en la web. Apple y Google ya incorporan estas herramientas directamente en sus dispositivos móviles, permitiendo que los desarrolladores sacemos un gran partido de la identificación de imágenes directamente con la cámara.

Una función poco conocida de Google es la de realizar búsquedas de imágenes a partir de un fichero o de una URL. Podemos subir una imagen desde nuestro propio equipo o usar una alojada en un servidor y Google será capaz de buscar imágenes similares o idénticas. Esto es muy útil, entre otros casos, para descubrir si alguien usa nuestras fotografías sin permiso.

También permite hacer una búsqueda filtrando por los derechos de uso. Podemos solicitar que nos muestre sólo aquellas fotografías que permiten su reutilización, reutilización con modificaciones, reutilización no comercial con modificaciones o reutilización no comercial. Además se pueden hacer búsqueda por colores predominantes, tamaño o fecha de publicación, entre otros criterios.

El nombre del fichero

Al igual que con las URLs, el nombre del fichero se tendrá en cuenta en los resultados de búsqueda. Todo suma. Así, si tenemos una fotografía llamada “hamburguesa.jpg” será mucho más eficiente que si la llamamos “1234.jpg”. Como con las URLs es aconsejable no usar caracteres espaciales (ñ, espacio, acentos, etc.). Muchas personas usan indistintamente los guiones medio (-) y bajo (_) pero para Google tienen un valor diferente. La expresión “real-madrid” para el buscador son dos palabras, real y madrid. Mientras que “real_madrid” es una única palabra, realmadrid. Con lo que es mucho más aconsejable usar el guión medio en lugar del bajo.

Usar versiones responsive

Existe un atributo, srcset, que permite en el codigo indicar que dependiendo del dispositivo usemos una imagen u otra. Esto es muy usado por ejemplo con los iPhones o los iPads, donde dependiendo de la versión que tengamos podemos utilizar imágenes con mayor resolución (las llamadas retina o super retina) o una versión estandar. Si facilitamos diferentes versiones de las imagenes estaremos proporcionando un resultado optimo para todos los dispositivos.

Etiquetas OpenGraph and Twitter Cards

Si queremos compartir además de nuestra web nuestras imágenes en redes sociales, como Facebook o Twitter, es aconsejable el uso de estas etiquetas, especificando que imagenes queremos mostrar.

Añadir las imágenes en tu fichero Sitemap

El fichero sitemap es el que le indica al buscador el contenido de nuestra web. Muchos programadores sólo incluyen las URLs de las páginas que conforman el proyecto, sin incluir nada más. Google recomienda añadir también las imágenes ya que esto le facilita el trabajo de indexado.

Deja un comentario