En un mundo donde los clientes esperan gratificación instantánea, un sitio web de comercio electrónico que cargue rápidamente es de suma importancia. Las imágenes responsivas pueden ayudar con los tiempos de carga y conversiones.
Mientras que la calidad de las imágenes es importante para garantizar altas tasas de conversión, la optimización de imágenes es clave para la experiencia del usuario y el SEO de tu tienda en línea. Aprender a optimizar imágenes puede generar grandes recompensas, desde mejorar tu marca hasta atraer a compradores que buscan en Google imágenes.
¿Qué es la optimización de imágenes?
La optimización de imágenes significa asegurarse de que tus imágenes se vean impecables en escritorio y móvil y no afecten el rendimiento web. Implica modificar el formato, dimensiones y resolución de la imagen para un dispositivo manteniendo la calidad.
Tres elementos principales juegan un papel aquí:
1. Formato de archivo de imagen
2. Dimensiones de la imagen (altura y anchura)
3. Resolución de pantalla
¿Por qué debes optimizar imágenes?
Las imágenes son importantes para una buena experiencia de compra en línea. Los clientes no comprarán tus productos si no pueden verlos. Datos del HTTP Archive revelan que, en promedio, las imágenes no optimizadas representan un poco menos del 38% del peso total de una página web en móviles.
La optimización de imágenes ayuda a reducir el peso de tu página web y es un principio fundamental del buen diseño web de comercio electrónico, lo que resulta en los siguientes beneficios:
Equilibrio entre velocidad y calidad
La optimización de imágenes para web y móvil existe para equilibrar velocidad y calidad. Es importante no servir imágenes de mala calidad en el comercio electrónico. Crean una mejor experiencia de navegación para los compradores.
Google ha sugerido que la velocidad del sitio es una de las señales utilizadas por su algoritmo para clasificar las páginas. Una página lenta significa que los motores de búsqueda rastrean menos páginas con su presupuesto de rastreo, lo que puede afectar negativamente tu indexación.
Rendimiento de búsqueda mejorado
Las imágenes optimizadas ayudan tanto a los lectores como a los motores de búsqueda a comprender mejor tu sitio web y hacer que tu contenido se vea en línea. Datos recientes muestran que las imágenes se devuelven para el 18% de las consultas de búsqueda en Google.
La optimización de imágenes puede ayudar a clasificar tus imágenes en la búsqueda de imágenes de Google, lo que puede atraer más tráfico a tu sitio web y construir tu marca.
Cómo optimizar imágenes para la web
1. Utiliza nombres de imágenes concisos y directos
Es realmente fácil subir imágenes a tu sitio web y mantener los nombres de archivo predeterminados que asigna tu cámara. Pero cuando se trata de SEO de imágenes, es importante usar palabras clave relevantes para ayudar a que tu página web se clasifique en los motores de búsqueda.
Crear nombres de archivo descriptivos y ricos en palabras clave es crucial para la optimización de imágenes. Los motores de búsqueda rastrean no solo el texto de tu página web, sino también los nombres de archivo de tus imágenes.
Por ejemplo, podrías usar el nombre genérico que tu cámara asignó a la imagen (por ejemplo, DCMIMAGE10.jpg). Sin embargo, sería mucho mejor nombrar el archivo como 2012-Ford-Mustang-LX-Rojo.jpg.
Piensa en cómo tus clientes buscan productos en tu sitio web. ¿Qué patrones de nombres utilizan cuando buscan? En el ejemplo anterior, los compradores de automóviles pueden buscar términos como:
– 2012 Ford Mustang LX Rojo
– Ford Mustang LX Rojo 2012
– Rojo Ford Mustang LX 2012
Observa tus análisis web para ver qué palabras clave utilizan tus clientes para encontrarte. Determina los patrones de nombres más comunes que utilizan y aplica esa fórmula a tu proceso de nombrar archivos de imágenes.
Si no vas a basarte en datos, asegúrate de utilizar palabras clave relevantes y útiles al nombrar tus imágenes (es decir, intenta ser descriptivo).
Revisa esta pregunta y respuesta de Moz para comprender la importancia de nombrar estratégicamente los archivos de imágenes en tu sitio. Definitivamente puede mejorar tu SEO en la página. También puede ayudar a que tus páginas e imágenes se clasifiquen más alto en las páginas de resultados de los motores de búsqueda (SERPs).
2. Optimiza cuidadosamente tus atributos alt
Los atributos alt son la alternativa de texto a las imágenes cuando un navegador no puede renderizarlas correctamente. También se utilizan para la accesibilidad web. Incluso cuando la imagen se representa, si pasas el cursor sobre ella, verás el texto del atributo alt (dependiendo de la configuración de tu navegador).
El atributo alt también agrega valor SEO a tu sitio web. Agregar atributos alt apropiados que incluyan palabras clave relevantes a las imágenes en tu sitio web puede ayudarte a clasificar mejor en los motores de búsqueda. Es posible que los atributos alt sean la mejor manera de que tus productos de comercio electrónico aparezcan en la búsqueda de imágenes y web de Google.
Echemos un vistazo al código fuente de un atributo alt.
El número uno de prioridad cuando se trata de la optimización de imágenes es completar el atributo alt para cada imagen de producto en tu sitio.
Aquí hay algunas reglas simples para los atributos alt:
– Describe tus imágenes en lenguaje sencillo, al igual que lo hiciste con los nombres de archivo de tus imágenes.
– Si vendes productos con números de modelo o números de serie, úsalos en tus atributos alt.
– No llenes tus atributos alt con palabras clave (por ejemplo, alt=»ford mustang muscle car buy now cheap best price on sale»).
– No uses atributos alt para imágenes decorativas. Los motores de búsqueda pueden penalizarte por sobreoptimización.
Finalmente, haz una revisión de vez en cuando. Visualiza el código fuente de tus páginas web y verifica si tus atributos alt están ahí y siguen siendo relevantes. Te sorprenderá lo que te pierdes cuando estás en movimiento como emprendedor.
3. Elige sabiamente las dimensiones de tus imágenes y los ángulos de los productos
Es una práctica común mostrar múltiples ángulos de tu producto. Volviendo al ejemplo del Ford Mustang, no querrías mostrar solo una foto del auto, especialmente si estás tratando de venderlo. Sería de tu mejor interés mostrar fotos de:
– El interior
– La parte trasera (especialmente ese spoiler de aire)
– Las llantas
– El motor (después de todo, es un Mustang)
La mejor manera de aprovechar estas fotos adicionales es completando tus atributos alt. Y la forma en la que harías esto es creando atributos alt únicos para cada toma de producto:
– 2012-Ford-Mustang-LX-Rojo-Interior-de-Cuero.jpg -> usando el atributo alt de: alt=»2012 Ford Mustang LX Rojo Interior de Cuero»
– 2012-Ford-Mustang-LX-Rojo-Vista-Trasera-Spoiler-de-Aire.jpg -> usando el atributo alt de: alt=»2012 Ford Mustang LX Rojo Vista Trasera Spoiler de Aire»
La clave aquí es agregar descripciones a tu atributo alt base para que los buscadores potenciales lleguen a tu sitio web. Si haces el trabajo extra, Google te recompensará con buscadores.
Herramientas de optimización de imágenes
Ahora que conoces algunas de las mejores prácticas de optimización de imágenes, veamos algunas herramientas y complementos de optimización de imágenes que puedes utilizar para tu sitio web. Ten en cuenta que si estás en Shopify o utilizas un CDN de imágenes especializado, no necesitas usar estas herramientas. La única excepción es SVGOMG, ya que la mayoría de los CDNs de imágenes no ofrecen optimizaciones para SVGs.
Squoosh
Squoosh es una aplicación web fácil de usar para la compresión de imágenes. Simplemente arrastra y suelta tu imagen en la herramienta y elige entre formatos de imagen como JPEG XL, WEBP, PNG y más.
TinyPNG
TinyPNG es otra popular herramienta de optimización de imágenes en la web. Utiliza técnicas inteligentes de compresión con pérdida para reducir el tamaño del archivo de imagen para tu página web (WEBP), archivos JPEG y PNG. Puedes reducir el tamaño de las imágenes para tus aplicaciones o tienda, además de reducir imágenes animadas.
La API de TinyPNG redimensiona imágenes para miniaturas automáticamente, eliminando cualquier parte innecesaria y agregando más fondo. Si ejecutas tu sitio web en WordPress, está disponible como un complemento.
SVGOMG
SVGOMG es otra herramienta simple de optimización de imágenes. Ofrece varias opciones para limpiar y minimizar tus archivos SVG. Simplemente carga o copia la fuente de tu SVG para comenzar. Puedes jugar con los diferentes controles y crear una imagen idéntica, pero con menos peso que el original.
¡Mantén las fotos funcionales con la optimización de imágenes!
Optimizar tus imágenes es esencial para dirigir un negocio en línea exitoso. No solo mejora la apariencia de tus productos, sino que también ayuda a crear una experiencia de compra fluida y a que te encuentren en línea.
Una plataforma de comercio electrónico como Shopify entrega automáticamente tus imágenes en el mejor formato posible a los espectadores, para que puedas aumentar las ventas y hacer crecer tu negocio en línea.
Preguntas frecuentes sobre la optimización de imágenes
¿Cómo optimizo una imagen sin perder calidad?
La mejor manera de optimizar una imagen sin perder calidad es servir la imagen del tamaño correcto utilizando el formato de imagen adecuado para una situación determinada. Puedes usar herramientas manuales como las mencionadas en este artículo para generar tus archivos junto con escribir el HTML correcto para que el navegador los sirva. O, utiliza un CDN de imágenes especializado como en Shopify para convertir y entregar automáticamente imágenes de alta calidad en cualquier dispositivo.
¿Cuál es el mejor optimizador de imágenes?
Squoosh y TinyPNG son algunas de las mejores herramientas de optimización de imágenes disponibles. Ambas son herramientas basadas en la web que ofrecen una variedad de opciones de formato y configuraciones de calidad. Si tienes un SVG más complejo, utiliza SVGOMG para reducir su tamaño.
¿Necesito optimizar mis imágenes en Shopify?
No necesitas optimizar imágenes antes de subirlas. Si lo haces, a veces esto puede resultar en una imagen de baja calidad que conduce a menores conversiones y más devoluciones. El CDN de Shopify comprime automáticamente las imágenes en una configuración de calidad que es mejor para el comercio electrónico. Tu código de tema debe estar escrito utilizando image_url y image_tag de Liquid para aprovechar automáticamente muchas funciones de imágenes responsivas.
¡Espero que esta información te haya sido útil! Comparte este contenido con otros propietarios de tiendas en línea para ayudarles a optimizar sus imágenes y mejorar su presencia en línea.
