Optimiser les images pour le Web : un guide pratique

Ils disent qu'une image vaut mille mots, ce qui est l'une des raisons pour lesquelles les images sont si importantes dans le commerce électronique. Sans que le client puisse prendre, toucher et inspecter un produit, il s'appuie fortement sur les images pour comprendre la couleur, la qualité et l'histoire du produit.

Il va donc sans dire que vos images doivent être haute résolution et nettes. Mais, cela a un prix. Les grandes images haute définition peuvent avoir des tailles de fichiers énormes. Mettez-en quelques-uns sur votre site et cette expérience rapide de navigation dans votre boutique en ligne peut vous donner l'impression de nager dans de la mélasse. Non seulement cela fera rebondir les visiteurs, mais, avec le temps, Google le remarquera également, ce qui peut affecter votre référencement.

Dans le commerce électronique, il est essentiel de trouver un bon équilibre entre la qualité de l'image et la taille du fichier image lorsque vous enregistrez une image pour votre site. Nous allons vous montrer comment faire exactement cela dans cet article.

Si vous êtes connu pour prendre une photo de produit et la télécharger directement dans votre magasin, ce tutoriel est pour vous. Si vous n'avez aucune connaissance formelle ni aucun processus pour enregistrer des images en tenant compte de la taille du fichier, ce didacticiel est fait pour vous. Si votre site contient des tonnes d'images et que les choses semblent lentes, ce tutoriel est fait pour vous. Si vous n'avez pas encore commencé à créer votre boutique en ligne, ce tutoriel est spécialement pour vous.

Prêt à optimiser vos images ?

Options de type de fichier image

Il existe trois types de fichiers principaux sur lesquels nous souhaitons nous concentrer pour enregistrer des images optimisées pour le Web : GIF, JPG et PNG. Chaque type de fichier a ses propres forces et faiblesses et il est très important de les connaître et de les garder à l'esprit lors de l'enregistrement d'une image.

Travailler avec des JPG

Les JPG (également appelés JPEG) sont le type de fichier le plus populaire pour les images sur le Web. Les JPG sont parfaits pour les photographies ou les images complexes contenant beaucoup de couleurs, d'ombres, de dégradés ou de motifs complexes. Les JPG gèrent bien ce type d'images car les JPG ont une énorme palette de couleurs avec laquelle travailler.

Les JPG peuvent également être enregistrés en haute qualité, en basse qualité ou n'importe où entre les deux. Cela vous permet d'ajuster et d'enregistrer l'image exactement comme vous le souhaitez, en équilibrant la qualité et la taille du fichier.

Travailler avec des PNG

Les PNG sont un autre format de fichier populaire en ligne. Dans Adobe Photoshop, vous aurez la possibilité d'enregistrer les fichiers PNG au format PNG-8 ou PNG-24.

• PNG-8 a une palette de couleurs très limitée de 256 couleurs. Bien que la taille de l'image soit plus petite, ce ne sera pas une bonne option pour les images et les photographies complexes.
• PNG-24 fournit une image de bien meilleure qualité mais se fait au prix d'une taille de fichier plus importante.

Plus important encore, les PNG peuvent gérer la transparence. C'est l'un des points de différenciation les plus importants entre les PNG et les JPEG.

Travailler avec des GIF

Les GIF étaient plus populaires il y a de nombreuses années, mais sont toujours une option pour les petites tailles d'image où seules quelques couleurs sont nécessaires. Tout comme PNG-8, les fichiers GIF sont limités à seulement 256 couleurs. Pour cette raison, les GIF ne doivent jamais être utilisés pour les photos de produits.

Enregistrer correctement les images

Comme on peut s'y attendre, les images volumineuses prennent plus de temps à charger. Lorsque nous disons grand, nous faisons référence à la taille du fichier plutôt qu'aux dimensions d'une image, c'est-à-dire la valeur en Ko, Mo, Go, etc. Étant donné que 47% des utilisateurs s'attendent à ce qu'une page Web se charge en moins de 2 secondes, et 40 % abandonnera une page qui met plus de 3 secondes à se charger, il est important que vos images soient suffisamment petites pour assurer un site rapide.

Il y a trois choses que vous pouvez faire pour optimiser correctement vos images pour votre boutique en ligne :

Conservez les bonnes dimensions

Vous devez ouvrir l'image dans Photoshop et la visualiser à 100%. Cela vous permet de visualiser l'image à la taille exacte qu'elle sera affichée sur un écran d'ordinateur lorsque vous enregistrez l'image pour le Web.

Enregistrer des images pour le Web

Il est possible de réduire la taille du fichier sans réduire considérablement la qualité de vos images. Notre méthode préférée pour réduire la taille du fichier sans réduire considérablement la qualité de l'image consiste à utiliser la fonction « Enregistrer pour le Web » de Photoshop. Ouvrez votre image dans Photoshop et accédez à Fichier > Exporter > Enregistrer pour le Web (Héritage)…. Une fenêtre apparaîtra qui vous permettra de choisir votre qualité d'exportation. Nous constatons qu'une qualité de 60 fonctionne mieux car elle réduit la taille du fichier à moins d'un mégaoctet et il n'y a pas de différence notable de qualité.

Compresser des images pour le Web

Les applications de compression d'images sont le moyen le plus simple de réduire la taille des fichiers d'images. Ces types d'outils suppriment les données cachées dans le fichier image comme les profils de couleurs supplémentaires et les métadonnées (comme la géolocalisation de l'endroit où la photo a été prise) qui ne sont pas nécessaires. Ces outils offrent un moyen rapide et facile de réduire la taille des fichiers sans perdre la qualité de l'image.

Applications et services de compression d'images

• ImageOptim
• Pixel court
• MinusculeJPG
• TinyPNG
• Compressor.io
• Kraken
• Optimiseur d'image
• Crush Photos (Shopify App)
• Minifier (application Shopify)

Enregistrement d'une image pour le Web : exemple de présentation

Pour commencer, supposons que nous sommes Stiff Salt (en fait détenu par un ami et développeur Shopify) et nous voulions changer l'image de la fonctionnalité sur notre boutique en ligne.

Nous mettons en place une scène, rendons notre sel absolument incroyable et nous prenons une photo avec un appareil photo reflex numérique. Super nous avons notre photo. Quelle beauté!

Mais… la taille du fichier est ÉNORME ! 14,6 Mo pour être exact. Et les dimensions de la photo sont de 5184 × 3456 pixels. C'est totalement inutilisable pour le moment. Il est littéralement assez grand pour imprimer une affiche de la taille d'un film. À 14,6 Mo, cette image prendrait un temps considérable à charger sur l'ordinateur d'un visiteur. Ce n'est pas bien.

Il est temps de se mettre au travail et de réduire considérablement la taille de l'image et la taille du fichier.

Rappelez-vous, nous allons faire trois choses à l'image.

• Réduire la taille de l'image : il s'agit des dimensions de la photo
• Enregistrer l'image de manière appropriée pour réduire la taille du fichier : il s'agit de la taille du fichier et de l'espace qu'il prend sur le disque dur de votre ordinateur et/ou sur votre serveur Web.
• Compresser le fichier image : pour se débarrasser de toutes les données cachées supplémentaires occupant de l'espace

Réduire la taille de l'image

Selon le programme que vous décidez d'utiliser et vos préférences personnelles, vous pouvez :

• Réduisez la taille de l'image avant d'enregistrer
• Réduisez la taille de l'image lors de l'enregistrement de l'image
• Enregistrez l'image, puis réduisez la taille de l'image

Pour simplifier les choses, nous allons d'abord réduire la taille de l'image. Pour ce faire, nous allons ouvrir l'image dans Photoshop (vous pouvez utiliser n'importe quel programme d'image avec lequel vous vous sentez le plus à l'aise).

Pour déterminer quelle taille, nous avons examiné la taille suggérée de l'image de la page d'accueil du thème. Il était de 1600 x 800 pixels (rappelez-vous que l'original était de 5184 × 3456 pixels).

Dans Photoshop, nous allons sélectionner Image > Taille de l'image.

D'accord, nous avons réduit la taille (dimensions) de l'image à quelque chose de plus approprié et recommandé par le développeur du thème.

Enregistrer l'image de manière appropriée (enregistrer pour le Web)

Dans Photoshop, il existe une commande spécifique appelée "Enregistrer pour le Web" qui optimise le fichier image pour l'affichage en ligne. Ceci est important car la commande "Enregistrer" normale peut finir par créer des tailles de fichier 2 à 3 fois plus grandes que la commande "Enregistrer pour le Web".

Dans la case « Enregistrer pour le Web », nous devons faire quelques sélections.

• Type d'image : le type de fichier affectera la qualité et la taille du fichier de sortie
• Qualité d'image : Ceci est important et peut fortement affecter la taille du fichier final
• Dimensions : nous l'avons déjà fait lors de la première étape, il n'est donc pas nécessaire de le refaire, mais si nous ne l'avons pas fait lors de la première étape, nous pourrions simplement modifier les dimensions de l'image ici

Sur la base de ce que nous avons appris au début de cet article, nous savons que JPEG est le meilleur type de fichier pour les photographies ou toute image avec beaucoup de couleurs et de complexité. Nous sélectionnerons JPEG.

Pour la qualité d'image, vous disposez d'une échelle que vous pouvez sélectionner avec 5 préréglages allant de Maximum à Bas. Jetons un coup d'œil à la taille finale du fichier de sortie de chacun des niveaux de qualité (cette information est affichée dans le coin inférieur de la fenêtre d'enregistrement d'image) :

• Maximum : 1,38 Mo
• Très élevé : 611 Ko
• Élevé : 339 Ko
• Moyen : 152 Ko
• Faible : 86 k

Vous pouvez voir que pour chaque niveau de qualité que vous baissez, la taille de l'image est réduite de près de moitié. En général, nous avons constaté que High est le meilleur réglage pour la plupart des images. À ce niveau, il est presque impossible pour l'œil humain de voir une dégradation de la qualité de l'image, et la taille du fichier est presque 4 fois plus petite que si nous devions simplement sélectionner le maximum.

Si l'image est une image extrêmement importante avec beaucoup de détails, vous pouvez sélectionner un niveau supérieur et enregistrer à Très élevé.

Essentiellement, économiser pour le Web est un exercice d'équilibre - vous devez équilibrer la qualité des graphiques et la taille du fichier du support en fonction de vos besoins personnels.

Compresser des images pour le Web

Si vous avez utilisé Adobe Photoshop, il aura déjà fait un très bon travail pour réduire la taille de l'image, cependant, vous pouvez probablement encore réduire de 5 à 10 % la taille de l'image en utilisant une application de compression comme ImageOptim et/ou ShortPixel.

ImageOptim est également le moyen le plus simple de réduire rapidement la taille du fichier image si vous avez utilisé un autre programme pour enregistrer vos images qui n'est pas aussi bon que Photoshop.

En déposant chacun des fichiers de l'étape précédente dans ImageOptim, nous avons pu réduire davantage la taille de l'image de 5 % supplémentaires. Pas énorme, mais encore une fois, ceux-ci étaient déjà optimisés avec Photoshop. Quoi qu'il en soit, chaque Ko compte.

Conclusion

Pour récapituler, notre photo était incroyablement énorme lorsque nous avons commencé, cependant, en quelques étapes simples, nous avons réduit la taille de la photo de 5184 × 3456 à 1600 x 800 afin qu'elle s'adapte parfaitement à notre page d'accueil et, en même temps, a pris il passe d'un 14,4 Mo en panne d'ordinateur à un 336 Ko beaucoup plus raisonnable.

Enregistrer des images de manière appropriée pour le Web est une étape importante pour apprendre tôt et mettre en œuvre religieusement. Même si vous n'économisez que 10 à 20% sur chaque image, au fil du temps, à mesure que votre magasin et votre site Web se développent, chaque petit Ko peut représenter des économies importantes qui conduiront à une expérience globale beaucoup plus agréable pour vos visiteurs, clients et Google.

Comment optimiser les images pour le Web : présentation vidéo