Indice del artículo
POR QUÉ OPTIMIZAR IMÁGENES EN TU TIENDA ONLINE
Ya hemos hablado en otras ocasiones de la importancia de optimizar las imágenes de tu tienda online. De hecho, en el artículo sobre aplicaciones gratuitas para crear banners de publicidad para tu tienda online ya adelantábamos unos cuantos argumentos de por qué es importante optimizar imágenes.
En el caso de ese artículo, nos centrábamos en los banners (que es de lo que iba el post), pero como sabemos que esa información no es solo importante, si no crucial, queremos expandirnos en el tema y ampliarlo todo lo que podamos. Ya que las imágenes son una parte crucial de cualquier estrategia digital (ya sea una tienda online o no, pero siendo algo que tiene catálogo, es aún más importante), es imprescindible tenerlas convenientemente preparadas, ya que de eso va a depender en gran medida el “peso” y el tiempo de carga de nuestra tienda online.
Ten en cuenta que esto, junto con una mala elección de hosting, suelen ser los motivos más comunes por los que un gran número de tiendas online tienen muchos problemas para cargar con normalidad.
PARTE 1: EL PESO DE LAS IMÁGENES
No descubrimos América si decimos que las imágenes consumen la mayor parte del ancho de banda necesario para que una página logre visualizarse rápida y correctamente en un ordenador o en cualquier dispositivo móvil. Es lo que “engorda” a tu página web. El inconveniente suele ser que la mayoría de las tiendas online desconocen cuál es realmente el “peso” de sus webs, y por tanto, no conocen con exactitud el tiempo que tardan en cargar sus webs. El tema es que igual es tu propia conexión la que va lenta, o que no estás seguro del tiempo de carga “real” que tu ecommerce tiene, por lo que lo mejor que puedes hacer es meterte en internet y realizar un test básico de control, utilizando alguna de estas herramientas gratuitas destinadas para ello:
Herramientas para testear tu tienda
Una vez nos hayamos hechos una idea más o menos aproximada de la velocidad de carga de nuestra web (y de su peso a fin de cuentas), ya podremos ponernos manos a la obra. Recuerda que tendrás que volver a utilizar estas herramientas una vez hayas optimizado las imágenes, para poder comprobar cuánto ha mejorado el tiempo de carga, pudiendo así corregir o mejorar ciertos aspectos antes de dar por finiquitado el trabajo.
Independientemente del estado de la velocidad de carga de tu tienda online, lo mejor en esto es no esperar al diagnóstico y curarte en salud, haciéndolo bien desde el principio. Optimizar tus imágenes antes de subirlas a tu tienda online ahorra tener que preocuparse de este tipo de problemas en el futuro.
Además, el ser previsores nos facilita mucho las cosas, ya que hacerlo una vez que las fotografías están colocadas en la página es mucho más complicado (sobre todo si no cuentas con los conocimientos técnicos adecuados), ya que tendrás que ir una a una modificándolas, y si encima no dominas mucho el tema, es probable que tengas que hacerlo varias veces en varias fotos. Para esto casi mejor cuenta con profesionales que te automaticen la optimización de las imágenes de tu tienda para que no pierdas horas y horas de trabajo.
Tenemos que darle a esto la importancia que tiene. Una mala optimización de tus imágenes influye directa o indirectamente en el éxito o no de todas tus estrategias en Internet (SEO, marketing, ventas, reservas, branding, atención al cliente…). Esa “obesidad digital” nos perjudicará en absolutamente todos los aspectos relacionados con nuestro negocio. Como decimos siempre, esa web es tu local comercial, y si lo tienes hecho un asco, repercute directamente en tus beneficios.
HERRAMIENTAS PARA OPTIMIZAR IMÁGENES
Por suerte, estás de enhorabuena. Como dijimos más arriba, vivimos en la era de internet, donde hay solución para prácticamente cualquier cosa, porque a alguien ya le ha pasado antes que a ti y se ha molestado en preguntar o en solicitar ayuda. De hecho, pronto te irás dando cuenta de que prácticamente cualquier problema/situación/inconveniente que tengas con tu ecommerce, se le ha presentado a miles de personas antes que a ti. Por tanto, aquí te presentamos un pequeño listado de herramientas o aplicaciones online que puedes emplear para optimizar las imágenes de tu tienda online.
Compressor.io
La ponemos la primera porque, la verdad, es una de nuestras favoritas y de las que mejor funcionan (al menos desde nuestro punto de vista, en el que buscamos la velocidad y que apenas se note en la calidad). Es una poderosa herramienta online para reduce drásticamente el tamaño de tus imágenes y fotografías, porque no solo baja considerablemente su tamaño (a veces un 80% o un 90%), lo verdaderamente increíble de esta herramienta es que mantiene una muy alta calidad de las mismas, con casi ninguna diferencia en el antes o después de la compresión. EL único “inconveniente”, es que solo soporta archivos de hasta 10 MB, por lo que tendrás que trabajar primero las imágenes de más peso para poder subirlas aquí.
Compressjpeg.com y compresspng.com
Esta también es uno de nuestros favoritos, y lo es porque, al igual que el anterior, nos comprime la imagen una barbaridad sin que apenas sea perceptible en la calidad final del mismo, pero es que además, también funciona como convertidor, pudiendo pasar de un jpg a un png, viceversa, o convertir un png en un svg. Las diferentes direcciones son para los tipos de imágenes, ya tengan formato JPEG o PNG.
JPEGmini
Es una aplicación para comprimir fotografías, que las reduce significativamente de tamaño (hasta un 80%), conservando su plena resolución y calidad. Si lo que quieres es un programa en tu escritorio windows, para no andar teniendo que subir y descargar las imágenes todo el rato, JPEGmini dispone de una versión online gratuita que solo permite subir hasta 20 imágenes al día y de otras tres opciones Premium o Pro sin restricciones. Dependiendo de tus necesidades podrás reducir su uso a la versión gratuita y emplear otras herramientas para compensar, o puedes, simplemente pagar las cuotas de las licencias de pago y emplearlo para todo.
Compressnow
Está disponible de forma online y soporta archivos en formato GIF, JPG, JPEG y PNG. Permite subir múltiples archivos de imágenes (de hasta 9 MB) y seleccionar diferentes niveles de compresión, conservando el ancho y alto de la imagen original. Es similar a otros de su categoría, pero es bastante rápido y muy sencillo de utilizar, y sobre todo, tiene la opción de comprimir GIFs, que no es algo tan común, pudiendo “jugar” con las opciones de frames por segundo, o incluso la velocidad del mismo.
PngOptimizer
Es un sencillo programa para Windows que para comprimir las imágenes, en vez de simplemente comprimir todo, lo que hace es limpiar los bytes innecesarios, reduciendo así los archivos PNG. Es una opción muy recomendable para imágenes que no sean JPEG, centrándose en las PNG (que son las que más calidad tienen). También convierte otros formatos de imágenes (BMP, GIF, TGA) a PNG sin pérdida de calidad. Este programa posee una interfaz de arrastrar y soltar muy fácil de utilizar, y es muy recomendable para optimizar fotografías (más que ilustraciones en vector).
FILEminimizer Pictures
Es un software de descarga gratuita, que permite reducir el peso (en megas) de una imagen hasta en un 98%. Este programa también permite elegir entre cuatro niveles diferentes de compresión, para archivos JPG, BMP, GIF, TIFF, PNG y EMF de hasta 5 MB. Como novedad con respecto al resto, es que tiene una integración con Facebook, lo que nos permite optimizar las fotos imágenes y subirlas directamente a dicha red social.
FILEminimizer también tiene una versión suite Premium, que admite la compresión de otra gran cantidad de formatos (PDF, PowerPoint, Office, etc.) y que se integra con Microsoft Office y Microsoft Outlook. Es una opción muy recomendable si tenemos la necesidad de subir diferentes tipos de archivo a nuestra tienda online (por ejemplo, el tema de los PDF para manuales de productos o similares, es muy recomendable).
Image Optimizer
Es una herramienta gratuita que está disponible de manera online o en formato aplicación, para descargar e instalar en tu ordenador. Es parecida al resto, y funciona de manera similar, la diferencia es su interfaz tan sencillo. Con esta herramienta puedes comprimir todos tus archivos de imágenes o cambiar la calidad y el tamaño de los mismos, con tan solo un clic, y si descargas la aplicación tampoco necesitarás estar subiendo y descargando las imágenes.
Seguiremos ampliando esta lista en el futuro.
PARTE 2: EL SEO
Ahora que ya tenemos todas las imágenes comprimidas y optimizadas en cuanto a peso y tamaño se refiere, podemos dar paso a la siguiente parte de la optimización de imágenes: El SEO.
En varios post hemos hablado de que Google posiciona páginas y texto, pero que las imágenes van por otra parte, así pues, también tienen su propio posicionamiento dentro de las respectivas secciones de los buscadores (por ejemplo, en Google sería el Google Imágenes), por lo que tenemos que trabajárnoslas un poco antes de subirlas a nuestro ecommerce. Son aspectos que se pueden editar en el propio gestor de imágenes (ya sea en PrestaShop u otras plataformas), y que incluyen una serie de parámetros a completar.
No es que el posicionar las imágenes te vaya a traer demasiadas visitas, pero es posible que si algunas que siempre vienen bien. Pero es que además, algunos de los siguientes factores que te vamos a explicar a continuación, influyen directamente el posicionamiento en los buscadores de tu tienda online. Como es por ejemplo que todas las imágenes tengan que tener obligatoriamente el atributo ALT con su correspondiente texto descriptivo.
Ahora nos vamos a centrar en posicionar imágenes en la pestaña de búsqueda de imágenes del buscador.
El atributo Alt
El primero de ellos y el más importante para el buscador es el atributo alt. Pese a que la tecnología para el reconocimiento de imágenes ha avanzado mucho, los buscadores siguen necesitando el texto para posicionar las imágenes que se va encontrando. A día de hoy pueden reconocer letras, colores, e incluso caras, pero poco más, y al final eso solo les sirve como “complemento” a su principal baza a la hora de posicionar, que es el texto que rodea a la imagen.
El nombre de ALT viene de alternate text o texto alternativo, y es lo que utilizan los buscadores para saber qué es lo que muestra una imagen.
Básicamente es su “hoja de ruta” ya que sin eso, simplemente interpretaría que es una imagen, en cierto formato y con ciertas dimensiones y colores, pero no sabría donde ubicarla. Además, también es el texto que utiliza el navegador cuando la imagen no se puede cargar junto con el resto del contenido de la página, lo que sirve además como indicativo al usuario.
Supongamos que tienes una tienda online de productos alimenticios ecológicos, y acabas de hacer una ficha de producto nueva, de un tipo de tomate frito, en la que has subido una imagen (ya optimizada) como muestra del producto. El código HTML de la etiqueta Alt de este producto sería:
Antes de que te preocupes por todo esto del código, y pienses que tú no sabes o lo que sea, te diré que, normalmente, no tendrás que preocuparte por el código, ya que la mayoría de los gestores de contenido dejan añadir la etiqueta fácilmente en un simple cuadro de texto, pero nosotros, como buenos expertos en el tema, te lo ponemos todo para que veas de donde viene el asunto.
Un aspecto muy importante en este tema es que tienes un limitado número de caracteres para introducir (entre 50 y 65), por lo que tienes que ir al grano y ser conciso, sin resultar un robot. Para asegurarte una buena etiqueta Alt te damos este listado de aspectos a cumplir:
- Que describa fielmente el contenido de la imagen (en el tomate sería que es un bote de 1 litro de tomate frito)
- Que Incluya la palabra clave principal (en el caso de nuestro ejemplo, el tomate frito ecológico)
- Se conciso. No te líes con cosas que no vienen a cuento aquí. Deja eso para la descripción de la imagen o, incluso, para la propia ficha del producto. Céntrate en lo esencial
El nombre del archivo
El nombre de la imagen, del propio archivo de la misma, también influye a la hora de subir la imagen, ya que es un indicador del contenido de la imagen. Piensa que una imagen llamada “tarta-de-chocolate.jpg” probablemente mostrará una tarta de chocolate. Si dejas nombres tipo a “banner01” o “foto00193” estás limitando, de nuevo, el posicionamiento de la misma.
Para optimizar el nombre debes intentar ser corto y descriptivo, y no es necesario que incluyas tanta información como en la etiqueta Alt, simplemente titula la imagen.
Ya hemos dicho que nombres como “foto.jpg” tienes que evitarlos, porque son nominaciones genéricas que no traen ningún beneficio en la búsqueda. Así que para hacerlo más descriptivo, lo llamaremos “bote-litro-tomate-frito-ecologico.jpg”, separad por guiones medios (esto es importante, porque los espacios no se interpretan bien en nombres de archivos, y otro tipo de puntuaciones, como el punto o la coma, se interpretan de otra forma dentro del código).
Con un nombre más específico es más fácil que el buscador entienda el contenido, y, por tanto, tendrás más posibilidades de aparecer en una posición más prominente.
Para un buen nombre de archivo:
- Describe el contenido de la imagen
- Incluye la palabra clave principal
- Se muy conciso
- Utiliza guiones para separar palabras
- Evita la letra Ñ, Ç, los acentos y otros caracteres raros o inusuales. Céntrate en letras del alfabeto inglés y los guiones medios.
El contexto
Además de todo lo que hemos citado anteriormente, es muy importante que tus imágenes estén rodeadas de texto, y en especial, que ese texto esté relacionado con el contenido de la imagen. Cuanto más estrecha sea la relación existente entre la imagen y el contexto que le rodea, mejor, ya que, como te dijimos anteriormente, los buscadores aún son un poco cuadriculados a la hora de indexar las imágenes, por lo que cuanto más fácil se lo pongamos, mejor.
El buscador no solamente va a indexar la información que encuentre sobre la imagen, sino que, además, la va a comparar con la que le rodea.
Para poner a tus imágenes en el contexto apropiado, sírvete del pie de foto o leyenda, así como del texto que hay encima de la imagen y bajo la misma. Usa incluso los encabezados y el título si es preciso. Ten en cuenta que el buscador va a relacionar todos estos aspectos con el propio contenido que indexa de la imagen. Si el texto que envuelve la imagen guarda poca relación con esta, la pertinencia para el buscador será baja y lo posesionará peor que si todo está relacionado.
_________________
Con esto terminamos esta entrada, al menos por el momento (es un tema del que se podrían escribir tres enciclopedias enteras), pero que bastante extenso ha sido ya como para lanzártelo todo de golpe. La clave de todo el proceso es, como te hemos dicho, intentar hacerlo todo bien antes de subir las imágenes, ya que tener que editarlo a posteriori es una tarea ardua y, hablando en plata, una turra mortal. La segunda clave es el control constante y periódico de todo el proceso, es decir, que te tomes la molestia, frecuentemente, de comprobar tanto el peso como la velocidad de carga de toda tu web, en busca de optimizaciones que realizar. Recuerda que si no tienes tiempo o ganas de hacerlo tu mismo, puedes contratar con nosotros nuestro servicio de optimización mensual de imágenes.
Recuerda que solemos actualizar nuestras entradas de forma regular, por lo que ahondaremos en este tema más adelante completando este post. Mientras tanto, no te pierdas el resto de nuestras entradas con un sinfín de temáticas relacionadas directamente con el ecommerce y las tiendas online.
¡Salud y buen ecommerce!
Creo que la información que habéis plasmado es muy interesante y concisa. Voy a revisar el peso de mis imágenes de li tienda.
Hola Angel, Me alegro que te haya sido de utilidad. si necesitas darle un empujón a tu tienda con nuestros servicios de SEO puedes ponerte en contacto.