Dicen que una imagen vale más que mil palabras, y este viejo dicho es especialmente cierto cuando se trata de comercio electrónico.
Después de todo, estás pidiendo a los clientes que hagan un pedido de tus productos sin tener la oportunidad de evaluarlos en persona. Ofrecer imágenes de alta calidad en tu... Tienda Shopify Permite a los clientes tener una buena visión de lo que estás vendiendo, lo que te ayudará a realizar más ventas.
Pero, en comparación con otros elementos web, las imágenes tienden a tener tamaños de archivo particularmente grandes: pueden hacer que su sitio sea mucho más lento si no tiene cuidado.
En esta guía, repasaremos todo lo que necesita saber sobre Shopify Optimización de imágenes. Las prácticas recomendadas que se describen a continuación le ayudarán a proporcionar todas las imágenes que sus clientes esperan y minimizar el impacto.
Por qué es importante optimizar las imágenes
Como se mencionó anteriormente, la razón principal para optimizar sus imágenes es hacer que su sitio web sea más rápido.
Según Segun una investigacion Según un estudio de Google, la probabilidad de que alguien abandone su sitio en lugar de hacer clic en otra página es un 32 % mayor para las páginas que tardan tres segundos en cargar que para las que solo tardan un segundo. En otras palabras, si su... Tienda Shopify Si es lento, perderá muchas ventas potenciales.
En los Estados Unidos, 24 millones de personas Aproximadamente el 7% de la población carece de acceso a internet de alta velocidad. Y si vende a países menos desarrollados, es probable que una proporción aún mayor de sus clientes no tenga buena conexión. La optimización de imágenes le ayudará a ofrecer una mejor experiencia a estos visitantes.
La optimización de imágenes también es una técnica eficaz para la optimización de motores de búsqueda (SEO).
Los motores de búsqueda utilizan bots llamados rastreadores para encontrar más páginas y añadirlas a su índice. Hay demasiado contenido en internet como para que estos rastreadores puedan analizarlo todo, por lo que solo se dedicará una cierta cantidad de tiempo y recursos a cada sitio web (esto se conoce como "presupuesto de rastreo"). Cuanto más lento sea tu sitio, menos páginas tardarán en alcanzar tu presupuesto de rastreo. Esto significa que algunas páginas podrían no indexarse, lo que provocará que menos personas descubran tu tienda.
Cabe destacar que, además de las páginas que contienen tus imágenes, los clientes potenciales podrían descubrir tu tienda a través de las propias imágenes. La optimización de imágenes te ayudará a posicionarte mejor en servicios como Google y Búsqueda de imágenes de Yahoo.
La optimización de imágenes también es importante para la accesibilidad. Al asegurarte de que todas tus imágenes tengan una descripción alternativa, ayudarás a los visitantes con discapacidad visual que usan lectores de pantalla a comprender completamente el contenido de tus páginas.
Cómo optimizar tus imágenes
Ahora que explicamos por qué deberías optimizar tus imágenes, expliquemos exactamente cómo puedes hacerlo:
Reducir el tamaño del archivo de imagen
Hay dos tipos de archivos de imagen:
- Imágenes vectoriales: Utilice fórmulas matemáticas para organizar líneas, puntos y polígonos para representar una imagen.
- Imágenes rasterizadas: Codifique los valores de cada píxel individual para representar una imagen.
La compresión es el proceso de reducir el tamaño de archivo de una imagen. Existen dos tipos de compresión de imágenes:
- Compresión sin pérdida: Reduce el tamaño del archivo al eliminar metadatos innecesarios, pero no reduce la calidad de la imagen.
- Compresión con pérdida: Reduce el tamaño del archivo eliminando algunos datos de píxeles, lo que reduce la calidad de la imagen pero ahorra más espacio que la compresión sin pérdida.
Además, existen varios formatos diferentes que puedes usar para las imágenes de tu tienda Shopify. La siguiente tabla detalla los detalles clave de los formatos de imagen más populares:
| Tipo de imagen | ¿Ráster o Vector? | ¿Con pérdida o sin pérdida? | Tamaño relativo del archivo |
| SVG | vector | Lossless | Pequeña |
| PNG | Raster | Lossless | Ancha |
| GIF | Raster | Lossless | Mediana |
| JPG | Raster | Con pérdida | Mediana |
| WebP | Raster | Ambos | Pequeña |
El formato ideal para una imagen depende de su propósito.
Por ejemplo, el formato SVG es ideal para logotipos. Probablemente necesites añadir tu logotipo a tus páginas web y materiales de marketing externos en varios tamaños, y una imagen vectorial te facilitará hacerlo con un alto nivel de calidad. Sin embargo, aunque los archivos SVG suelen ser pequeños, pueden llegar a ser bastante grandes al usarlos para imágenes complejas como fotografías, y los resultados en este caso no suelen ser muy buenos.
En general, recomendamos usar el formato WebP para la mayoría de las imágenes de su tienda. Publicado por Google en 2010Este formato de archivo relativamente nuevo utiliza procesos de compresión más eficientes que PNG o JPG, lo que reduce el tamaño de los archivos sin una pérdida significativa de calidad. Además, ofrece modos de compresión con y sin pérdida, lo que proporciona mayor flexibilidad.
Convertir archivos de imagen al formato WebP es fácil. Existen muchas herramientas en línea gratuitas para ello: solo tienes que arrastrar, soltar y descargar el archivo convertido.
Para darle una idea de los ahorros potenciales, la captura de pantalla a continuación Squoosh, una popular aplicación de optimización de imágenes, se guardaba originalmente como un archivo PNG de 100 kilobytes. Con solo convertirlo al formato WebP, pudimos reducir su tamaño a la mitad.
Herramientas como Squoosh suelen ofrecer un control deslizante de calidad de imagen que permite aumentar o disminuir el nivel de compresión según se necesite. Puede que sea necesario experimentar un poco para conseguir el equilibrio perfecto. Conviene reducir el tamaño del archivo al máximo sin que se produzcan signos evidentes de compresión, como borrosidad o distorsión.
Además, ten en cuenta las dimensiones de tus imágenes. La altura y el ancho que sueles usar podrían ser demasiado grandes para el espacio que ocupan en tu sitio web. En ese caso, asegúrate de reducir las dimensiones de tus imágenes (y, por lo tanto, el tamaño del archivo) antes de subirlas.
Para determinar qué dimensiones son las más adecuadas, revise las estadísticas de su sitio web para ver qué tamaños de pantalla usan con más frecuencia sus visitantes. Subir imágenes con dimensiones mayores a las que se mostrarían en el tamaño de pantalla más común es innecesario.
Convertir GIF animados en vídeos
Las imágenes GIF se pueden animar, pero estas animaciones exigirán mucho menos ancho de banda del visitante si se cargan como un archivo de video MPG o WebM.
Esto se debe a que los archivos GIF no tienen pérdida de calidad, por lo que contienen una copia de cada fotograma de la animación. Los formatos de vídeo MPG y WebM sí la tienen, lo que permite ahorrar espacio eliminando información visual. La compresión de vídeo también es más eficiente para imágenes en movimiento que la compresión de imágenes.
Al igual que con la conversión de archivos de imagen a WebP, hay muchas herramientas en línea disponibles para convertir GIF en videos. Ezgif, CloudConvert y AGUAS Hay algunas opciones gratuitas.
Imágenes de lazy loading
Algunas páginas de tu tienda Shopify, como la página de colecciones, pueden contener docenas o incluso cientos de imágenes.
Estas páginas también suelen ser bastante largas, y el usuario tendría que desplazarse hasta el final para ver todas las imágenes. La mayoría de los visitantes no llegarán tan lejos antes de encontrar lo que buscan. De hecho, muchos ni siquiera necesitarán desplazarse hacia abajo.
¿Por qué cargar imágenes que ni siquiera se verán? En lugar de cargarlas todas a la vez, deberías configurar tu sitio para que las imágenes solo se carguen cuando el visitante las vea. Esta práctica se conoce como "carga diferida" y es una de las maneras más efectivas de mejorar el rendimiento de tu tienda.
Nombrar tus imágenes
De forma predeterminada, es posible que sus imágenes reciban nombres genéricos como “IMG0001.JPG” cuando las cree.
Esfuérzate al máximo y añade un nombre de archivo personalizado para cada imagen que describa su contenido (por ejemplo, para la imagen de un par de zapatillas, cambia el nombre de "IMG0001.JPG" a "Nike-Air-Jordan-rojo-blanco.JPG"). Los rastreadores de los motores de búsqueda usan los nombres de archivo para comprender el contenido de una página, por lo que asignar nombres descriptivos a tus imágenes puede ayudarte a mejorar tu posicionamiento.
Sin embargo, no te excedas. Si intentas incluir demasiadas palabras clave en el nombre de un archivo (por ejemplo, "air-jordans-rojo-blanco-negro-blanco-mejor-oferta-más-asequible.JPG"), podrías infringir las políticas de spam de un motor de búsqueda, lo que puede resultar en una clasificación inferior o incluso en la eliminación total de los resultados.
Cómo Shogun ayuda a los comerciantes con la optimización de imágenes
Shogun ofrece una variedad de funciones útiles para la optimización de imágenes de Shopify.
En primer lugar, el Shogun editor visual Te ofrece acceso a una amplia biblioteca de elementos para crear páginas de comercio electrónico personalizadas. Esto incluye el elemento de imagen, que te permite añadir, recortar, rotar y redimensionar imágenes rápidamente en tus páginas según sea necesario. También incluye un práctico espacio para añadir una descripción alternativa a cada imagen.
La calidad de una imagen se puede ajustar directamente desde el editor visual de Shogun. También puedes configurar ciertas imágenes para que sean adaptables (esta opción está disponible para imágenes que no sean SVG con un ancho superior a 720 píxeles), lo que significa que se ajustarán automáticamente al tamaño de la pantalla del visitante. Esto mejora el rendimiento en dispositivos móviles, ya que solo se descargará en el navegador del usuario una imagen con la resolución adecuada.
La carga diferida está habilitada en Shogun por defecto. Las imágenes dentro de los primeros 700 píxeles de la página se cargarán inicialmente, mientras que las imágenes por debajo de este límite solo se cargarán si el visitante se desplaza hacia abajo para verlas.
Para mejorar aún más el rendimiento, Shogun sirve imágenes a través de una red de entrega de contenido (CDN). La ubicación física tiene un impacto significativo.
Proveedor de CDN de Shogun, Subir cuidadoUtiliza una red de 325,000 nodos ubicados en más de 100 países. Uploadcare también aumenta la velocidad de carga de la página ajustando automáticamente la calidad de cada imagen para lograr la máxima compresión sin distorsión.
Finalmente, el Shogun Información Esta función puede guiarlo paso a paso a través del proceso de mejora de cualquier página de su sitio.
En una escala del 0 al 100, tu página se calificará en cuatro áreas diferentes: Accesibilidad, Mejores prácticas, Rendimiento y SEO. Una puntuación de 100 significa que no se requieren cambios. Si la puntuación es inferior a 100, Shogun te indicará exactamente qué tipo de cambios son necesarios.
Algunas de las posibles recomendaciones que podría ver incluyen:
- Reemplazar imágenes animadas con vídeos
- Utilice resoluciones adecuadas para las imágenes
- Agregar texto alternativo a las imágenes
- Utilice imágenes con la relación de aspecto correcta para que no se vean estiradas
De hecho, Shogun le proporcionará el conocimiento y las herramientas que necesita para acelerar su sitio y brindar una experiencia de usuario excepcional.
