Cómo optimizar sus imágenes para la web móvil

Cuando se trata de elegir tipos de archivo y dimensiones para sus imágenes, tenga en cuenta la calidad, los tiempos de carga de la página, la capacidad de zoom y los requisitos del mercado, especialmente si vende en múltiples plataformas. Echemos un vistazo a la optimización de imágenes para la web y cómo elegir el tipo de archivo teniendo en cuenta los dispositivos móviles para mejorar la experiencia del usuario.

Elegir las dimensiones correctas de la imagen

Es vital lograr un equilibrio entre las imágenes que son lo suficientemente grandes para que los usuarios puedan hacer zoom y aquellas que tienen un tamaño óptimo para que no ocupen demasiado espacio y ralenticen los tiempos de carga de la página. En Shopify, puede cargar imágenes de hasta 4472 x 4472 píxeles con un tamaño de archivo de hasta 20 MB. Pero el creador de sitios web generalmente recomienda usar 2048 x 2048 píxeles para fotos cuadradas de productos. Estas son imágenes de alta resolución que le dan a su tienda un aspecto profesional y completo con excelentes capacidades de zoom. Tenga en cuenta que para que la funcionalidad de zoom funcione, sus imágenes deben tener más de 800 x 800 píxeles.

De manera similar, Amazon y Etsy tienen un requisito de imagen de 1000 x 1000 píxeles para habilitar el zoom.

Para mantener una apariencia uniforme a lo largo de su línea de productos y en las páginas de su colección, debe mantener la misma relación de aspecto de ancho y alto de todas sus imágenes destacadas, por ejemplo, cuadradas. Su imagen destacada es la primera imagen de un producto que aparecerá en su tienda: en su página de inicio, página de carrito, página de pago y una variedad de páginas de colección. Mantenga todas sus miniaturas, también, del mismo tamaño y forma para transmitir una apariencia de tienda refinada. Tenga en cuenta que muchos de sus clientes también navegarán en dispositivos móviles y que las imágenes cuadradas son más fáciles de reposicionar para pantallas más pequeñas.

Elegir el formato de imagen correcto

Echemos un vistazo a los formatos de archivo más utilizados en la fotografía de productos y lo que cada uno aporta. Se enumeran aquí según la frecuencia con la que se utilizan en la fotografía de productos.

JPG

JPG es el formato de archivo de imagen digital más común que existe. Es ampliamente compatible y cuenta con un tamaño de archivo pequeño con una buena gama de colores. Su compresión le permite lograr un equilibrio entre el tamaño del archivo y la calidad de la imagen. Shopify recomienda JPG, en particular, porque puede entregar imágenes con un tamaño relativamente pequeño y de buena calidad, lo que funciona bien para las fotos de productos.

PNG

PNG se creó para mejorar el formato GIF eliminando su limitación de 256 colores. Es ampliamente aceptado, sin pérdidas (reduce el tamaño del archivo sin reducir la calidad) y admite transparencia (por ejemplo, para fondos transparentes). Las desventajas son que los tamaños de archivo PNG pueden ser grandes debido a la compresión sin pérdidas y el formato no es universalmente compatible como JPG.

GIF

GIF ofrece un tamaño de archivo pequeño al comprimir y reducir las imágenes a 256 colores. Aunque ha sido ampliamente reemplazado por PNG, todavía se usa para animación, ya que es el único formato que lo admite y es reconocido universalmente por los navegadores.

PELEA

TIFF es un formato de compresión sin pérdida que es ampliamente compatible con una variedad de aplicaciones web y de edición. Ofrece una resolución de alta calidad y varias imágenes y páginas se pueden guardar convenientemente en un solo archivo. Sin embargo, el tamaño del archivo tiende a ser grande.

BMP

BMP se usa comúnmente en el ecosistema de Windows. Admite compresión de datos, canales alfa (utilizados en Photoshop para almacenar información adicional que puede usar para manipular partes de la imagen, como agregar fondos transparentes) y compatibilidad casi universal. Sin comprimir, ofrece imágenes perfectas, pero el tamaño de los archivos también puede ser muy grande.

En general, JPG es sin duda el más conveniente cuando se trata de combinar un tamaño más pequeño con una calidad decente. Si bien PNG ofrece una compresión sin pérdidas de mayor calidad, lo hace con el alto costo de un tamaño de archivo más grande. GIF es útil si ofrece tomas de 360 ​​grados y desea archivos livianos. BMP y TIFF, en comparación, pueden ofrecer una gran calidad, pero los tamaños reales suelen ser bastante pesados ​​y poco prácticos.

Dimensionamiento de imágenes para dispositivos móviles

Shopify cambia automáticamente el tamaño de sus imágenes para adaptarse a pantallas más pequeñas, pero algunas imágenes a veces pueden requerir una edición manual. Tenga en cuenta que las pantallas de escritorio y móviles no solo tienen diferentes tamaños, sino que también tienen una orientación opuesta. Y aunque Shopify intenta acomodar eso con un recorte suave, será mejor si sus imágenes son cuadradas y su producto está centrado vertical y horizontalmente.

Además, las imágenes con resoluciones demasiado grandes, por ejemplo, el máximo de Shopify de 4000 x 4000 píxeles, pueden verse borrosas cuando se cambia el tamaño para dispositivos móviles. Por lo tanto, reducir su imagen a un tamaño y una forma más manejables que tengan en cuenta los dispositivos móviles puede ayudar a que su tienda se vea mejor en todos los dispositivos. Tenga en cuenta que los archivos grandes también ralentizan el tiempo de carga de su sitio. Y en el comercio electrónico, y especialmente en el móvil, cada segundo importa, por lo que optimizar tus imágenes debe ser una prioridad.

Por lo tanto, si bien la compresión sin pérdidas puede brindarle la imagen de la más alta calidad, a menudo crea archivos grandes que tardan una eternidad en cargarse (especialmente en masa) y puede ralentizar los tiempos de carga de su página, lo que hace que los visitantes abandonen su tienda. Esto es especialmente cierto en los dispositivos móviles, donde las velocidades de Internet pueden ser más lentas y esperar a que finalmente aparezca una imagen frustra a los compradores.

Si bien los diseños y algoritmos receptivos de Shopify son buenos para cambiar el tamaño y mostrar sus imágenes en todos los dispositivos, darles una mano con tamaños de archivo bien pensados ​​puede significar una experiencia de compra aún más fluida.

Sobre el Autor

Holly Cardew es la fundadora de Pixc, una plataforma para ayudar a las tiendas de comercio electrónico a editar y optimizar las fotos de sus productos para que puedan aumentar las ventas. Pixc convierte las imágenes de productos promedio en hermosas mediante la edición y la eliminación del fondo en 24 horas. Comenzando como adolescente, vendiendo en eBay y creando su propio mercado en línea, Holly tiene experiencia en comercio electrónico, marketing en línea, diseño gráfico y creación de equipos distribuidos. También tiene experiencia en la creación y gestión de tiendas Shopify y en el crecimiento de un gran número de seguidores en las redes sociales. En 2016, Holly fue incluida en la lista Forbes 30 under 30 de Retail and eCommerce. Holly divide su tiempo entre San Francisco, Brisbane y Sydney. Cuando Holly no está trabajando, le encanta viajar, explorar nuevos lugares, hermosos diseños, tipografías y nuevas ideas de negocios.