Comment optimiser ses images pour le web (le guide complet) ?
Charlène, Brand & Webdesigner chez It’s Arty Studio
Que ce soit pour les fiches produits de ta boutique en ligne ou un simple site “vitrine”, il est hors de question de télécharger une image “en l’état” sur ton site web 🙅🏻♀️
Ne pas se préoccuper de l’optimisation de ses images pour le web est un vrai red flag car sur le long terme, ton site internet et ton expérience utilisateur se dégraderait : le site internet sera plus long à charger, tes visiteurs et potentiels clients risquent de fuir.
Verdict : un site en mauvaise santé et une potentielle baisse des ventes.
Comme dit l’adage, mieux vaut prévenir que guérir, alors je t’ai soigneusement préparé LE processus étape par étape à suivre (et celui que j’utilise depuis des années pour mes clientes) afin d’optimiser tes images pour le web.
Cet article a été rédigé par Charlène, Brand & webdesigner, fondatrice de Template Market
Hello, moi c’est Charlène 😊 Après plusieurs années en prestation de services sur-mesure, j’ai décidé de mettre mon expertise et mes outils à disposition des entrepreneur.es et freelances qui se lancent au travers de Templatemarket.fr.
Mon ambition ? Te permettre de lancer ton activité sereinement, avec un site internet professionnel et stratégique. Le tout, sans y passer des mois et y laisser tout ton budget ! Je propose des templates de site Showit qui te permettront de créer ton site en quelques clics seulement, sans technique ni tracas.
1) Optimiser ses images pour le web ça commence par utiliser le BON format d’image
En tant que webdesigner, je vois encore bien trop souvent des clientes qui ne connaissent pas les différents formats d’images et qui utilisent du PNG pour tous les types d’images.
Ce que tu dois retenir est simple : chaque format d’image à un but et une utilisation spécifique. Je te dis tout sur les 2 formats les plus importants pour toi !
Le JPEG :
C’est LE format à privilégier pour les photographies sur ton site internet mais également pour les photos produits sur ton eshop. Le format JPEG est plus léger que le PNG, mais par contre tu ne pourras pas l’utiliser si tu as besoin d’un fond transparent (dans ce cas ce sera obligatoirement du PNG).
Le PNG :
C’est un format à utiliser uniquement pour des photos avec des fonds transparents, des logos, des images avec de l’opacité ou des aplats de couleurs. Ce format est à éviter pour de simples photographies étant donné que cela n’apporte rien de plus à l’image et qu’elle sera beaucoup plus lourde qu’en JPEG.
2) Adapter les dimensions à son site web : retailler son image
Si tu prends tes photos toi-même avec un reflex, ou que tu délègues la prise de vue de tes photos produits à un.e photographe professionnelle, il n’est pas rare de se retrouver avec des photos en haute définition c’est-à-dire : de très gros et lourds fichiers ! (optimisés pour l’impression et non pas pour le web.)
Sur ton site internet en revanche, tu n’as pas besoin d’une photo en 4K puisque les tailles d’écrans d’ordinateurs standards ne sont pas aussi grands 🙂
Le but de cette manipulation : réduire la taille de tes photos pour en réduire le poids dans un premier temps.
Pas de panique, nul besoin de faire chaque image une à une, il existe l’outil en ligne et gratuit BulkResize qui te permet de redimensionner plein d’images à la fois. (je t’explique en détail dans la vidéo comment faire).
Mais alors, quelle taille choisir ?
En règle générale, pour une section avec une image qui prend toute la largeur de l’écran je te recommande une image de maximum 1980px de large (c’est largement suffisant).
Pour le reste des images de ton site internet, cela dépend de différents paramètres et notamment de la taille de chaque bloc contenant tes images.
Pour un petit bloc contenant une photographie qui prend la moitié de ton écran en largeur, tu peux redimensionner ton image dans les 800 ou 900px maximum..
3) Optimiser le poids de ses images : la compression
Ça y est tu as choisi le bon format d’image et redimensionner celles-ci ? Ce n’est pas encore fini, en fait nous sommes qu’à la moitié du processus 🙂 Et oui, c’est long, mais c’est une habitude à prendre pour garder un site internet en bonne santé en termes de performances sur le long terme.
Cette étape est assez simple : on va compresser toutes tes images pour optimiser encore plus le poid.
Pour cela, il te suffit simplement d’utiliser Optimizilla, c’est un outil en ligne et gratuit. Tu vas pouvoir y faire glisser toutes tes images en un seul coup également, puis tu n’as plus qu’à attendre qu’il les compresse. Une fois la compression terminée, tu peux re-télécharger tes images.
4) Renommer ses images afin de les optimiser pour le SEO
Maintenant que nous avons bien optimisé nos images pour le web (et surtout leur poids), nous allons les optimiser pour le SEO, c’est -à -dire le référencement naturel. Le SEO c’est un travail stratégique d’optimisation qui te permet de rendre ton site internet plus ou moins visible sur les moteurs de recherche.
L’idée ici, comme tu l’auras compris, est d’optimiser le nom des images pour ne pas rater une éventuelle opportunité (en gros, le fait que l’image en question remonte sur Google image lorsqu’un utilisateur recherche quelque chose).
Le but de cette étape :
Passer de IMAGE001.JPG
à
MOTCLESEOIMAGE.JPG
En plus simple, permettre à Google et à un robot de comprendre ce qui se trouve sur ton image grâce à des mots clés 🙂
5 – Télécharger les images optimisées sur son site
Le plus gros du travail est fait ! Maintenant tu peux télécharger tes images sur ton site internet et les placer aux différents endroits nécessaires. Et pour optimiser encore plus tes images pour le SEO, n’oublie pas la dernière étape 😉
6) Remplir les balises ALT de tes images
C’est une étape “bonus” mais je te conseille vivement de prendre cette habitude. La balise ALT c’est une balise qui permet de décrire ce qui se trouve dans l’image en question. Elle est utile pour Google et ses petits robots, c’est donc une opportunité à prendre !
Si tu es sur WordPress, lorsque tu vas dans la galerie des médias et que tu cliques sur une image, tu auras un champ “texte alternatif” : c’est ici qu’il faut mettre tes mots clés en rapport avec l’image !
7) Le process complet en vidéo
Optimiser tes images pour le web : Conclusion
Optimiser ses images pour le web c’est tout un art ! C’est un processus long et fastidieux mais une bonne habitude à prendre qui te permettra de garder un site performant et rapide sur le long terme.
Si tu as besoin de créer ton premier site internet professionnel ou de lui donner un petit coup de boost, n’hésite pas à découvrir mes templates de site Showit pour créer ton site internet en quelques clics, sans technique ni tracas !
Partage ton avis en commentaire 🙂
Plus de lecture
Apprendre la photographie en tant que créatrice de produits
Emilie, Photographe spécialisée en Image de marqueSi tu crées des produits artisanaux, tu as certainement envie d’apprendre à faire de belles photos pour les mettre en valeur sur tes réseaux sociaux et ta boutique en ligne. Tu as bien raison, car tu peux totalement...
Faire des photos pour vendre des vêtements : le guide
Emilie, Photographe spécialisée en Image de marqueTu crées des habits, et tu te demandes comment mettre en valeur un vêtement en photo pour ta boutique en ligne et tes réseaux sociaux ? Effectivement, tu ne photographies pas un manteau ou une robe comme tu le ferais...
Comment organiser son shooting photo pour Instagram ?
Emilie, Photographe spécialisée en Image de marqueLorsque tu organises un shooting de photos produits, il est important de te demander de quelle façon tu vas utiliser ces images. Elles vont être diffusées certainement à la fois sur ta boutique en ligne et tes réseaux...
Parlons de tes Projets
Ton projet et ton entreprise sont uniques ! Pour pouvoir t'accompagner au mieux et te proposer une solution 100% adaptée à tes besoins et à l’ADN de ton business, j’ai besoin d’apprendre à te connaître !
Détaille moi ton projet pour nous assurer que nous sommes bien sur la même longueur d’ondes ! 🤗
.
