Uno de los errores más comunes de los desarrolladores y diseñadores de sitios de Internet de cualquier tipo, es la optimización de las imágenes, tanto desde el punto de vista del posicionamiento SEO como en lo que se refiere a su tamaño.
Ambos tipos de optimización ayudan al posicionamiento de tu sitio de formas distintas pero cada una cumple una función. La primera ayuda a los buscadores a encontrar tus imágenes e incluso lograr posicionarlas para que por sí solas lleven tráfico a tu sitio; genial ¿no? La segunda porque afecta directamente a la velocidad de carga de tu página (Google Page Speed), uno de los factores que Google utiliza para determinar la posición de un sitio en sus resultados (SERP).
Si tu sitio es de comercio electrónico, la optimización tiene una especial importancia si manejas una cantidad importante de productos, ya que cada uno de ellos tiene una o varias imágenes y el problema podría potencializarse rápidamente.
¿Qué es la optimización de imágenes?
La optimización de imágenes tiene dos partes que deben quedar claras. La primera está directamente relacionada con el Posicionamiento SEO, ya que la optimización de los metadatos de las imágenes ayudan a los buscadores a encontrarlas y en consecuencia a los artículos que las contienen ayudando al posicionamiento de su sitio en general. La segunda consiste en reducir el tamaño del archivo de cada imagen tanto como sea posible sin sacrificar la calidad para que los tiempos de carga de la página sean los más cortos posibles.
A continuación se incluyen los detalles de ambas partes para lograr los beneficios en ambos rubros.
I. Consejos para Optimización de Metadatos.
1. Nombra el archivo de las Imágenes con sus Palabras Clave.
Es muy cómodo dejar el nombre del archivo original de la imagen que incluso muchas veces está en inglés, pero es una oportunidad perdida.
Utilizar palabras clave relevantes en el nombre de los archivos es una ayuda increíble para el SEO ya que cumple tres funciones. Ayuda a posicionar la imagen, que muchas veces por sí sola lleva mucho tráfico a los sitios. Coadyuva en el posicionamiento de la página que la contiene y finalmente colabora en el posicionamiento del sitio en general.
Los motores de búsqueda son capaces de rastrear los nombres de los archivos de las imágenes, ya que estos aparecen en el código de las páginas, que aunque no lo podemos ver porque ese código es interpretado por el navegador, los robots indexadores de Google, Bing o cualquier buscador, sí.
Ejemplo.
Toma esta imagen, por ejemplo.
Puede usar el nombre que asignó una cámara a la imagen (por ejemplo, IMG_3002.jpg) o el nombre del archivo original si lo bajó de Internet. Sin embargo, es mucho mejor cambiar el nombre del archivo a Flores-rojas.jpg.
Si se trata de productos, investigue cómo sus clientes buscan esos productos en su sitio web. ¿Qué patrones de nomenclatura usan cuando buscan? En el ejemplo anterior, los compradores de flores pueden buscar términos como:
Arreglo-flores.jpg
Arreglo-flores-rojas.jpg
Etc.
Puede verificar el comportamiento previo de sus clientes y que palabras clave llevan tráfico a su sitio para nombrar apropiadamente sus imágenes. Si su sitio es nuevo y aún no cuenta con suficiente información de uso, trate con las palabras clave base sobre las que construyó su sitio o alternativas de ellas que haya obtenido durante su investigación inicial y desde luego palabras semánticamente relacionadas con las anteriores.
2. Use la etiqueta ALT de las imágenes.
La etiqueta ALT se usa para definir el texto alternativo de una imagen que presenta un navegador cuando este no puede mostrar la imagen por algún motivo. Esta etiqueta es el texto que se ve cuando pasa el cursor sobre la imagen y aparece un pequeño texto encima (dependiendo de la configuración de su navegador).
La etiqueta ALT es un conocido y viejo factor de posicionamiento SEO, por lo que se debe agregar incluyendo palabras clave relevantes a las imágenes en su sitio web.
Adicionalmente, esta etiqueta tiene otros usos de accesibilidad de su sitio. Considere que si alguien con vista deficiente usa un programa lector del sitio a través de audio, la etiqueta ALT le indicará que imagen está ahí presente y piense en eso al usar esta etiqueta y al momento de definirla.
El uso de la etiqueta ALT es probablemente la mejor manera para que sus productos de comercio electrónico aparezcan en las imágenes de Google y en la búsqueda web.
Ejemplo de uso de la etiqueta ALT.
<img src="/wp-content/uploads/rosas-rojas.jpg" alt="Ramo de Rosas">Dicho lo anterior, la prioridad número uno cuando se trata de optimización de imágenes es llenar cada etiqueta ALT para cada imagen de su sitio. No hacerlo es una oportunidad desperdiciada de tráfico y posicionamiento.
Reglas para definir la etiqueta ALT.
- Describa la imagen de forma sencilla usando palabras clave o semánticamente relacionadas.
- De preferencia, no use exactamente el mismo nombre del archivo.
- Si vende productos que tienen números de modelo o alguna característica distintiva, usalos en la etiquet ALT.
- No use la etiqueta ALT para llenarla de palabras clave (por ejemplo NO, alt = “comprar ahora ramos de flores rojas al mejor precio”).
- No sobre-optimice la etiqueta ALT en su sitio, poniendo la misma palabra clave en todas las etiquetas, parecerá SPAM.
II. Consejos para Optimización del Tamaño de las Imágenes.
Los siguientes 8 consejos están dedicados a optimizar el tamaño de los archivos de tus imágenes. Esto es muy importante ya que reduce el tiempo de carga de la página y en consecuencia disminuye el porcentaje de rebote de los visitantes, parámetro muy importante para el posicionamiento.
Para sitios con mucho tráfico que usan una CDN, la optimización del tamaño de las imágenes reduce el uso de ancho de banda, bajando los costos de este servicio.
3. Elija las dimensiones de su imagen.
La mayoría de las veces no se tiene prudencia con la dimensión de la imagen usada e indiscriminadamente se usan 2 mil o 3 mil pixeles de ancho. U otras medidas injustificadamente. La verdad es que la mayoría de los monitores usan muchos menos pixeles. Por ejemplo un montior de 17” tiene una resolución de 1280 x 768 pixeles para la ¡pantalla completa! Y por más pixeles que se agreguen, la imagen no se va a ver mejor.
Los sitios de comercio electrónico, muchas veces incluyen diferentes ángulos de su producto. Volviendo al ejemplo de las flores, no querrá mostrar solo una toma del ramo, especialmente si está tratando de venderlo. Le conviene mostrar fotos de:
Foto desde arriba.
De lado.
Cercana
Por lo que usar fotos demasiado grandes termina siendo una enorme cantidad de pixeles desperdiciados.
Por lo tanto, escoge las dimensiones adecuadas para tu sitio y corta o reduce todas las imágenes a los tamaños seleccionados para optimizar. Muchas veces, si usa soluciones para crear su sitio como WordPress u otras semejantes, algunos temas forzarán las imágenes a cierta proporción causando deformidades si no están debidamente dimensionadas.
Si tienes varias imágenes usa diferentes etiquetas ALT para sacarles más provecho. No repitas la misma etiqueta en todas las fotos. Usa alternativas semánticas.
Cuando necesite incluir una imagen realmente grande, use una versión pequeña en su página importante y use un enlace sobre la misma para llevarlo a otra página donde se encuentre la imagen grande. Pero NO use una imagen de grandes dimensiones en una página que desee posicionar.
4. Reduzca el tamaño del archivo de sus imágenes.
El tiempo promedio de espera de una persona al cargar una página, no llega a los 3 segundos, pero al agregar más y más imágenes, el tiempo de carga de las páginas va aumentando.
Un estudio sugirió que si las páginas de Amazon tardaran 1 segundo más en cargarse, la empresa perdería $1.6 mil millones de dólares al año.
Google usa el tiempo de carga de las páginas como un factor de posicionamiento, lo que significa que tener imágenes que tarden en cargarse, tiene muchas consecuencias malas para un sitio.
¿Cómo optimizar el tamaño de las imágenes?
Es evidente que mientras más grandes sean las imágenes de un sitio, más tardará en cargarse. Si tenemos
HTML (texto) 100k + CSS (diseño) 100K + 3 Imágenes 100K = 500K
Pero si optimizamos las imágenes.
HTML (texto) 100k + CSS (diseño) 100K + 3 Imágenes 40K = 320K
El tiempo de carga se reduce a un poco más de la mitad y desde luego eso es más dramático mientras más imágenes incluya en su sitio. Por eso, si puede disminuir el tamaño de los archivos de las imágenes y disminuir el tiempo de carga de la página, reducirá el número de personas que abandonan su sitio (porcentaje de rebote).
Optimización de Imágenes con Photoshop.
Una forma de reducir el tamaño de los archivos de las imágenes es usar el comando “Guardar para Web” en Adobe Photoshop. Al usar este comando, puede ajustar la imagen al tamaño de archivo más bajo posible manteniendo aceptable la calidad de la imagen.
Guardar para web
Calidad: encuentre esto en la esquina superior derecha. (Escoja Alta – 60).
Formato de archivo: encuentra esto en la esquina superior derecha (JPEG).
Optimización: encuentre esta casilla de verificación en la esquina superior derecha (seleccione, optimizada).
Color: encuentre esta casilla de verificación en la esquina superior derecha (es decir, conviértalo en sRBG).
Reducir al tamaño requerido: Encuentre esto en la esquina inferior derecha (es decir, An: y Al:)
Tamaño de archivo esperado: encuentre esto en la esquina inferior izquierda (es decir, 296.1K).
Cómo optimizar imágenes sin Photoshop
Si no tiene Adobe Photoshop, existen numerosas herramientas en línea que puede usar para editar imágenes. Adobe incluso tiene una aplicación gratuita de edición de imágenes para teléfonos inteligentes y tabletas, Photoshop Express. Esta herramienta no tiene todas las capacidades de la versión de escritorio de Adobe Photoshop, pero cubre todos los aspectos básicos de la edición de imágenes y no cuesta nada.
Otras impresionantes herramientas de edición de imágenes en línea son: PicMonkey, PIXLR y Canva, entre muchas otras.
¿Qué tamaño deben tener los archivos de imagen?
Para las imágenes de un sitio tipo blog o informativo normal, una buena regla general es tratar de mantener el tamaño de su archivo de imagen por debajo de 100 kB. Eso puede ser difícil a veces, especialmente para imágenes de grandes dimensiones como el archivo mostrado.
Para imágenes de productos de sitios de comercio electrónico, 70 kB sería recomendable ya que por lo regular son varias imágenes juntas.
5. Elija el tipo de archivo correcto.
Hay tres tipos de archivos comunes que se utilizan para publicar imágenes en la web: JPEG, GIF y PNG.
Veamos los tres tipos de archivos y cómo afectan a la misma imagen. En este caso la imagen JPG con calidad “Alta” (60) nos da alrededor de 65K de tamaño. Se reduce la calidad de los otros dos formatos hasta igualar el tamaño de archivo (65K).
Tipo de archivo JPEG
JPEG se ha convertido en el estándar de facto de Internet. Las imágenes JPEG se pueden comprimir considerablemente, lo que da como resultado imágenes de calidad con tamaños de archivo pequeños. En la imagen de arriba, el formato JPEG permite una calidad buena con un tamaño de archivo bajo.
Tipo de archivo GIF
Las imágenes GIF (.gif) son de calidad inferior a las imágenes JPEG y se utilizan para obtener imágenes más simplistas, como iconos e imágenes decorativas. Los GIF también admiten animación.
Con respecto a la optimización de la imagen, los GIF son excelentes para aquellas imágenes sencillas y simples en una página web (que incluyen solo pocos colores). Pero para imágenes y fotos complejas, los GIF no siempre son tan eficientes. Esto es especialmente cierto para imágenes grandes.
Tipo de archivo PNG-8 / PNG-24
Las imágenes PNG son cada vez más populares como alternativa a los GIF. Los archivos PNG son compatibles con muchos más colores que los GIF y no se degradan al volver a optimizarlos, como hacen los archivos JPEG. Aunque los archivos tipo PNG comienzan a usarse con más frecuencia, los tamaños de archivo pueden ser mucho más grandes que las imágenes JPEG.
Observe cómo la imagen PNG-24 es más de tres veces mayor en tamaño de archivo que el PNG-8. Es por eso que debes tener mucho cuidado con los PNG.
Este fue un ejemplo, donde el tamaño del archivo de imagen se ha mantenido constante a 65 kB para los tres tipos de archivos.
Comparación de tipo de archivo
Como puede ver, JPEG es el claro ganador aquí. Los archivos GIF y PNG deben degradarse en calidad para permanecer en el mismo tamaño de archivo.
Sin embargo, los archivos PNG tienen una característica muy usada en el diseño moderno que es la transparencia. O sea, las partes sin imagen pueden ser transparentes lo que produce un interesante efecto y adaptarse a cualquier fondo. Esto no puede lograrse con los archivos JPG que en la parte sin imagen siempre tienen fondo blanco.
6. Optimiza tus Íconos e imágenes miniatura (thumbnails).
Muchos sitios usan imágenes en miniatura, especialmente en páginas de categorías.
Estas imágenes pueden ser más grandes que las de mayor tamaño si no están optimizadas y al usar varias en la misma página pueden ser altamente perjudiciales.
¿Qué se puede hacer?
Haga que los archivos de miniaturas sean lo más pequeños posible. Puede usar una calidad inferior para ellas ya que no se notará. Recuerde que el impacto acumulativo de sus miniaturas tendrá un gran impacto en el tiempo de carga de su página si no están optimizadas, ya que son muchas por lo general.
Varíe la etiqueta ALT para no duplicar el texto que usaría para las versiones más grandes de la misma imagen. De hecho, haga su texto alternativo muy diferente. Lo último que desea es que Google indexe una miniatura en lugar de la imagen más grande y sea esa la que presente en los buscadores. Incluso si lo considera pertinente, no incluya la etiqueta ALT en las miniaturas para evitar esta posibilidad.
7. Crea un Sitemap de las Imágenes.
Los mapas de sitio de sus imágenes ayudarán a que Google descubra sus imágenes.
Aunque eso está cambiando con las últimas aplicaciones de inteligencia artificial que reconocerán imágenes (Google Vision), actualmente en la práctica los buscadores web no pueden encontrar imágenes que no se mencionan específicamente en el código fuente de la página web (esto se hace con los nombres de archivo y las etiquetas ALT mencionados anteriormente). Por lo tanto, para que los buscadores encuentren más fácilmente sus imágenes, un mapa del sitio de imágenes es una gran ayuda.
Puede insertar la siguiente línea de código en su archivo robots.txt, que muestra la ruta a su mapa del sitio de imágenes:
Sitemap: http://misitio.com/mapasitio_imagenes.xml
Además, es recomendable enviar este mapa del sitio a Google usando Search Console.
8. Cuidado con las Imágenes Ornamentales.
Aparte de las imágenes de apoyo al artículo, normalmente los sitios usan imágenes de diseño que sirven para darle una apariencia sorprendente a su sitio. Estas imágenes ornamentales pueden descuidarse y también aportar mucho tiempo de carga a la página. Fondos, botones, marcos, etc. Son algunos ejemplos de este tipo de ilustraciones.
Normalmente si utiliza un tema de WordPress, Joomla u otros, estas imágenes ornamentales están previamente optimizadas, pero en algunos casos no.
Las imágenes que sean íconos, rayas, o tengan pocos colores pueden convertirse en PNG-8. En algunos casos, este tipo de ilustraciones pueden modificar su color mediante código CSS lo cual debe hacer en caso de ser posible.
Para los fondos, NUNCA vaya a usar una imagen grande del tamaño de su página. Debe usar una imagen tipo mosaico y mediante código hacer que se repita, logrando el efecto buscado sin problema.
9. Use con cuidado las redes de entrega de contenido (CDN).
Las redes de entrega de contenido (CDN) son un lugar para alojar imágenes y otros archivos multimedia de su sitio y con esto reducir la carga del mismo. Cuando alguien accede a una página de su sitio, su servidor muestra el texto y la red CDN muestra la imagen, todo esto sucede en segundo y no es perceptible para el usuario. Estas redes pueden disminuir la velocidad de carga de su página y ayudar a resolver problemas de ancho de banda.
El único inconveniente son los enlaces entrantes. Como sabe, estos enlaces son muy importantes para SEO y cuantos más tenga, mejor se posicionará su sitio en los motores de búsqueda. Sin embargo, al colocar sus imágenes en un CDN, lo más probable es que elimine la imagen de su dominio y la coloque en el dominio de CDN perdiendo todos los enlaces hacia su sitio a través de las imágenes.
Hay soluciones técnicas más allá del alcance de este artículo para evitar eso, por lo que es importante verificarlo en caso de usar CDNs.
10. Pruebe su optimización de Imágenes.
Optimizar sus imágenes tiene múltiples beneficios como hemos podido ver, ayuda al posicionamiento SEO tanto por los metadatos agregados como por la disminución de la velocidad de carga lo que reduce el abandono de los visitantes.
Adicionalmente, al indexar las imágenes, los buscadores muchas veces llevan tráfico a través de ellas.
Finalmente, archivos más pequeños generan menos carga a los servidores y por consiguiente se reducen los problemas de caídas de sitio.
El objetivo de optimizar sus imágenes es ayudar a mejorar sus resultados. Hemos hablado de reducir el tamaño de los archivos y conseguir que los motores de búsqueda indexen sus imágenes.
Pruebe la cantidad de imágenes por página: dado que los tiempos de carga son un problema para algunos sitios, es posible que al reducir el número de imágenes en una página se incrementen las tasas de clics y ventas. También es posible que proporcionar muchas imágenes por página mejore la experiencia del usuario y genere más ventas. La única forma de descubrir esto es probarlo.
Conclusión
La Optimización de imágenes trae grandes beneficios, por lo que no debe dejar de optimizar todas las imágenes de su sitio a la brevedad y asegurarse, si tiene colaboradores, que cumplan con las políticas de optimización definidas para el sitio.