Comment optimiser ses images pour le web (le guide complet) ?

emilie photographe instagram branding

Charlène, Brand & Webdesigner chez It’s Arty Studio

3 Nov, 2022

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.

o

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 🙂

"
Photographe entreprise bordeaux branding instagram
Partager sur Pinterest
emiliephotographie le monde - photographe bordeaux et coach instagram

Plus de lecture

 

5 règles d’or pour mettre en scène ses photos produits

5 règles d’or pour mettre en scène ses photos produits

Emilie, Photographe spécialisée en Image de marqueC’est un vrai défi de photographier ses produits pour sa boutique en ligne, ses réseaux sociaux ou encore ses catalogues. Pourquoi ? Tout simplement parce qu’il faut réussir à susciter l’intérêt d’un consommateur qui...

lire plus
Faire appel à un photographe pour ses photos produits

Faire appel à un photographe pour ses photos produits

Emilie, Photographe spécialisée en Image de marqueTu sais que pour vendre tes créations sur le web, la qualité de tes photos produits est essentielle. Ce sont tes images qui vont susciter l’intérêt chez le consommateur d’en apprendre plus sur ton produit … ou non !...

lire plus
Photo produits : en studio ou en situation ?

Photo produits : en studio ou en situation ?

Emilie, Photographe spécialisée en Image de marqueTu envisages de réaliser un shooting photo pour mettre en valeur tes créations, et tu hésites peut-être sur le lieu le plus propice pour cette session ? Tu as raison de te questionner, car l’environnement, l’approche...

lire plus

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 (et puis c'est toujours plus sympa d'échanger en vrai pour s'assurer que nos personalités matchent 😉) !

Je t'offre un appel découverte de 30 minutes pour que tu puisses me détailler ton projet, qu'on fasse connaissance et nous assurer que nous sommes sur la même longueur d’ondes !

.

Loading...

Télécharge ton guide gratuit

16 idées pour trouver des accessoires pas chers ou gratuits pour tes photos produits !

Merci ! Tu vas recevoir ton guide d'ici quelques minutes. N'oublie pas de checker tes spams et l'onglet promotion. En cas de problème, tu peux me contacter par mail contact@emiliephotographielemonde.com