¿Cómo optimizar las imágenes en mi e-commerce?
¿Cómo optimizar las imágenes en mi e-commerce? Así de sencillo. En este artículo de blog podrás enriquecerte de los mejores consejos para realizar esa optimización en cada una de tus fotografías en línea.
Te contamos todas las claves y técnicas para optimizar las imágenes en tu e-commerce y ofrecer una experiencia mejorada a tus usuarios.
FORMATOS DE ARCHIVO
Los formatos más empleados para subir tus imágenes en un e-commerce son:
- Formato de imagen JPEG: Para mostrar productos de gran compresión y con un amplio rango de colores. Este formato comprimido te permite reducir el tamaño del archivo a la vez que mantener la calidad de imagen.
- Formato de imagen PNG: Comúnmente utilizado en e-commerce, ya que soporta transparencia, lo que permite superponer imágenes en diferentes fondos. Tampoco pierde calidad tras su comprensión y admite variedad de gamas.
- GIF: Para animaciones o vídeos cortos. La reducción de color que aplica hace que sea menos recomendable para imágenes.
- Archivos en SVG: Para animaciones y gráficos con mayor rango de color, especialmente pensado para HTML5, ya que no se producen pérdidas de calidad con la alteración de tamaño y se adaptan a diferentes tamaños de pantallas o monitores.
Al utilizar estos formatos, se puede mejorar la experiencia del usuario y facilitar la visualización y descarga de productos.
Aun así, te recodamos que su elección dependerá del tipo de contenido que deseas mostrar y de tus necesidades.
EXPORTACIÓN
Tras conocer cuáles son los formatos de archivo en los que deberás descargar tus imágenes, es hora de exportarlas.
En el comercio electrónico, la exportación de imágenes se refiere a la acción de transferir imágenes digitales de un lugar a otro, en nuestro caso con el propósito de utilizarlas en una plataforma de comercio electrónico.
Supongamos que has seleccionado el formato JPEG, para exportar la imagen deberás seguir estos pasos:
- Dirígete a la barra superior y selecciona «Archivo».
- Luego, elige «Exportar» y selecciona «Guardar para web».
- Se abrirá una nueva pestaña con opciones. En el segundo desplegable de la columna derecha, selecciona JPEG.
¡RECUERDA! Asegúrate de que la calidad de la imagen esté configurada en relación con el tamaño que exija la plataforma de venta. Si prefieres utilizar el formato PNG, puedes seguir pasos similares y seleccionar PNG en el desplegable de formatos.
REQUISITOS DE TAMAÑO Y RESOLUCIÓN
En 2023, casi el 60 % del tráfico web mundial procedió de dispositivos móviles.
Esto significa que las imágenes deben optimizarse adecuadamente.
Si no se hace, es probable que las imágenes parezcan más pequeñas de lo que deberían y los usuarios tendrán que ampliar la fotografía para ver el producto. O peor aún, que no puedan ver las imágenes con claridad.
Características ideales de las fotos en una página web:
- Anchura de píxeles: En la mayoría de casos, una anchura de 2500 píxeles es la mejor opción tanto para ver la imagen en un dispositivo móvil como en ordenador.
- Tamaño de la imagen: El tamaño siempre va a depender del uso que hagamos de ellas. Por ejemplo, una imagen que vaya a ser usada como fondo deberá tener un tamaño mucho mayor que una imagen de producto.
- Peso del archivo: Se recomienda no subir imágenes de más de 3 MB de peso, ya que podrían desacelerar el tiempo de carga de la web. Para ello existen numerosas herramientas online de uso gratuito que comprimen el peso de las imágenes.
Tamaños recomendados en función de su uso
| Tipo de imagen web | Dimensiones de imagen en ordenador (W x H) | Dimensiones de imagen en móvil (W x H) | Ratio recomendado |
| Background | 2560 x 1400 px | 360 x 640 px | 16:9 |
| Principal | 1280 x 720 px | 360 x 200 px | 16:9 |
| Banner | 1200 x 400 px | 360 x 120 px | 3:1 |
| Blog | 1200 x 800 px | 360 x 240 px | 3:2 |
| Logo rectangular | 400 x 100 px | 160 x 40 px | 4:1 |
| Logo cuadrangular | 100 x 100 px | 60 x 60 px | 1:1 |
| Favicon | 16 x 16 px | 16 x 16 px | 1:1 |
| íconos de redes | 32 x 32 px | 48 x 48 px | 1:1 |
| Lightbox | 1920 x 1080 px | 360 x 640 px | 16:9 |
| Thumbnail | 300 x 300 px | 90 x 90 px | 1:1 |
ESTRATEGIAS PARA ACELERAR LA CARGA DE PÁGINAS
¿Sabías que hasta el 40% de los usuarios abandonan una web que tarda más de 3 segundos en cargar? Te contamos cuáles son los consejos más efectivos para acelerar la carga de las páginas e imágenes de nuestro e-commerce.
- Utiliza un tamaño correcto de imágenes
Si bien es cierto que el tamaño de las imágenes puede ser fundamental en cuanto al impacto del producto en el consumidor; debemos encontrar el equilibrio perfecto entre el tamaño de la imagen y su correspondiente carga. Cuanto más grande sea nuestra imagen, más tiempo tardará en cargar.
- Implementa la carga diferida (“Lazy Loading”)
La carga diferida o lazy loading consiste en que nuestro e-commerce solo cargue el contenido que está visitando en ese momento el usuario. Esto nos permite no ralentizar la carga de la página completa, ya que solo se carga la parte que está visitando el usuario.
- Evalúa y analiza la carga rápida de la plataforma
Como última acción, se recomienda hacer una medición de todo esto y ver si realmente lo que estamos haciendo tiene un efecto positivo.
Las dos aplicaciones principales son PageSpeed Insights y GTmetrix.
| Desde ProRetoque.Photo te traemos la mejor guía para que tu e-commerce sea todo un éxito ¡Si quieres aprender más consejos sobre como optimizar tus imágenes e-commerce y que sean todo un éxito, no dudes en descargarte nuestra guía! QUIERO LEER MÁS |
