Comment optimiser vos images pour le Web mobile

Lorsqu'il s'agit de choisir les types de fichiers et les dimensions de vos images, gardez à l'esprit la qualité, les temps de chargement des pages, la capacité de zoom et les exigences du marché, en particulier si vous vendez sur plusieurs plates-formes. Voyons comment optimiser les images pour le Web et comment choisir votre type de fichier tout en gardant à l'esprit le mobile pour une meilleure expérience utilisateur.

Choisir les bonnes dimensions d'image

Il est essentiel de trouver un équilibre entre des images suffisamment grandes pour que les utilisateurs puissent zoomer et celles qui ont une taille optimale afin qu'elles ne prennent pas trop de place et ne ralentissent pas les temps de chargement de votre page. Sur Shopify, vous pouvez télécharger des images jusqu'à 4472 x 4472 pixels avec une taille de fichier allant jusqu'à 20 Mo. Mais le créateur de site Web recommande généralement d'utiliser 2048 x 2048 pixels pour les photos de produits carrées. Ce sont des images haute résolution qui donnent à votre magasin un aspect professionnel et complet avec de grandes capacités de zoom. Gardez à l'esprit que pour que la fonctionnalité de zoom fonctionne, vos images doivent faire plus de 800 x 800 pixels.

De même, Amazon et Etsy ont une exigence d'image de 1000 x 1000 pixels pour activer le zoom.

Pour conserver une apparence uniforme le long de votre gamme de produits et sur vos pages de collection, vous devez conserver le même rapport d'aspect en largeur et en hauteur de toutes vos images de présentation, disons carré. Votre image caractéristique est la première image d'un produit qui apparaîtra dans votre boutique - sur votre page d'accueil, votre page de panier, votre page de paiement et diverses pages de collection. Gardez également toutes vos vignettes de la même taille et de la même forme pour donner un look de magasin raffiné. Gardez à l'esprit que beaucoup de vos clients navigueront également sur mobile et que les images carrées sont plus faciles à repositionner pour les écrans plus petits.

Choisir le bon format d'image

Jetons un coup d'œil aux formats de fichiers les plus largement utilisés dans la photographie de produits et à ce qu'ils apportent chacun à la table. Ils sont répertoriés ici en fonction de leur fréquence d'utilisation dans la photographie de produits.

JPG

JPG est le format de fichier d'image numérique le plus courant. Il est largement pris en charge et offre une petite taille de fichier avec une bonne gamme de couleurs. Sa compression vous permet de trouver un équilibre entre la taille du fichier et la qualité de l'image. Shopify recommande JPG, en particulier, car il peut fournir des images de taille relativement petite et de bonne qualité, ce qui fonctionne bien pour les photos de produits.

PNG

PNG a été créé pour améliorer le format GIF en supprimant sa limitation de 256 couleurs. Il est largement accepté, sans perte (réduit la taille du fichier sans réduire la qualité) et prend en charge la transparence (par exemple pour les arrière-plans transparents). Les inconvénients sont que la taille des fichiers PNG peut être importante en raison de la compression sans perte et que le format n'est pas aussi universellement compatible que JPG.

GIF

GIF offre une petite taille de fichier en compressant et en réduisant les images à 256 couleurs. Bien qu'il ait été largement remplacé par le PNG, il est toujours utilisé pour l'animation car c'est le seul format qui le supporte et qui est universellement reconnu par les navigateurs.

TIFF

TIFF est un format de compression sans perte largement pris en charge par une gamme d'applications Web et d'édition. Il offre une résolution de haute qualité et plusieurs images et pages peuvent être facilement enregistrées dans un seul fichier. Cependant, la taille du fichier a tendance à être importante.

BMP

BMP est couramment utilisé dans l'écosystème Windows. Il prend en charge la compression des données, les canaux alpha (utilisés dans Photoshop pour stocker des informations supplémentaires que vous pouvez utiliser pour manipuler des parties de l'image, comme ajouter des arrière-plans transparents) et une compatibilité presque universelle. Non compressé, il offre des images parfaites mais la taille des fichiers peut également être très importante.

Dans l'ensemble, JPG est certainement le plus pratique lorsqu'il s'agit de combiner une taille plus petite avec une qualité décente. Bien que PNG offre une compression sans perte de meilleure qualité, il le fait au prix fort d'une taille de fichier plus importante. GIF est utile si vous proposez des prises de vue à 360 degrés et souhaitez des fichiers légers. BMP et TIFF, en comparaison, peuvent offrir une grande qualité, mais les tailles réelles sont généralement plutôt lourdes et peu pratiques.

Dimensionnement des images pour mobile

Shopify redimensionne automatiquement vos images pour s'adapter à des écrans plus petits, mais certaines images peuvent parfois nécessiter une modification manuelle. Gardez à l'esprit que les écrans de bureau et mobiles ne sont pas seulement de taille différente, mais ont une orientation opposée. Et tandis que Shopify essaie de s'adapter à cela avec un recadrage doux, il sera préférable que vos images soient carrées et que votre produit soit centré verticalement et horizontalement.

De plus, les images avec des résolutions trop grandes, par exemple le maximum de 4000 x 4000 pixels de Shopify, peuvent être floues lorsqu'elles sont redimensionnées pour le mobile. Ainsi, réduire votre image à une taille et une forme plus gérables qui tiennent compte du mobile peut aider votre magasin à mieux paraître sur tous les appareils. Gardez à l'esprit que les fichiers volumineux ralentissent également le temps de chargement de votre site. Et dans le commerce électronique, et surtout dans le mobile, chaque seconde compte, l'optimisation de vos images doit donc être une priorité.

Ainsi, bien que la compression sans perte puisse vous donner une image de la plus haute qualité, elle crée souvent des fichiers volumineux qui prennent une éternité à télécharger (en particulier en masse) et peuvent ralentir les temps de chargement de votre page, obligeant les visiteurs à abandonner votre boutique. Cela est particulièrement vrai sur mobile où les vitesses Internet peuvent être plus lentes et attendre qu'une image apparaisse enfin frustre les acheteurs.

Bien que les conceptions et les algorithmes réactifs de Shopify permettent de redimensionner et d'afficher vos images sur tous les appareils, leur donner un coup de main avec des tailles de fichiers réfléchies peut signifier une expérience d'achat encore plus fluide.

A propos de l'auteur

Holly Cardew est la fondatrice de Pixc, une plate-forme pour aider les magasins de commerce électronique à éditer et optimiser leurs photos de produits afin qu'ils puissent augmenter leurs ventes. Pixc transforme les images de produits moyennes en belles images en modifiant et en supprimant l'arrière-plan dans les 24 heures. Adolescente, vendant sur eBay et créant sa propre place de marché en ligne, Holly a une formation en commerce électronique, en marketing en ligne, en conception graphique et en création d'équipes distribuées. Elle a également de l'expérience dans la construction et la gestion de magasins Shopify et dans la croissance d'un large public sur les réseaux sociaux. En 2016, Holly a été incluse dans la liste Forbes 30 under 30 Retail and eCommerce. Holly partage son temps entre San Francisco, Brisbane et Sydney. Quand Holly ne travaille pas, elle aime voyager, explorer de nouveaux endroits, un beau design, de la typographie et proposer de nouvelles idées commerciales.