Comment optimiser vos images pour votre site web, nos conseils

Sur le web, optimiser ses images est important : cela vous permet d’être mieux référencé et d’améliorer les performances de votre site. Si vous ne connaissez pas la différence entre un .jpeg et un .png, si vous n’avez jamais entendu parler de DPI, lisez cet article.

Conseils

Que l’on soit un particulier, ou un professionnel et que l’on possède son site internet, il est important de faire attention aux images et photos que l’on utilise, aussi bien sur la forme, que sur le fond, comme pour vos textes ! Malheureusement, nous n’avons pas tous la chance de pouvoir s’offrir la suite Adobe ou de faire appel à un graphiste pour notre site internet. Mais sachez qu’en ce qui concerne les images, il existe tout un tas de petits trucs qu’il est possible de réaliser seul, même quand on n’est pas forcément à l’aise avec les outils numériques. On vous dit pourquoi il est essentiel d’optimiser ses photos sur le web, et on vous explique comment faire très facilement ci-dessous !

Une photo oui, mais une photo optimisée
Une photo oui, mais une photo optimisée

1/ Pourquoi optimiser vos images ?

Pour améliorer la vitesse d’affichage de son site internet

Sur internet, quand on clique sur une page, celle-ci se charge puis s’ouvre dans votre navigateur. Vous l’avez compris, pour qu’une page internet se charge rapidement, il faut qu’elle soit la plus « légère » possible, oui c’est logique. Afin que cette même page se charge rapidement, les photos que vous avez utilisées jouent un rôle essentiel : elles doivent être optimisées pour le web.

Lors de vos pérégrinations sur internet, vous êtes forcément tombé un jour sur un site internet qui a mis un temps infini à s’ouvrir. Avez-vous été patient et avez-vous attendu que la page s’ouvre ? Ou avez-vous dans un geste de rage accompagné d’un cinglant « il marche pas ce site » cliqué sur la croix rouge de votre navigateur pour fermer la page ? Puis avez-vous continué vos recherches sur un site concurrent plus rapide ?

Si vous avez attendu que la page s’ouvre, toutes mes félicitations, vous avez fait preuve d’un rare sang-froid ! Surtout lorsque l’on sait qu’après 3 secondes de chargement dans le vide, la majorité des internautes ferment le site qu’ils tentent de consulter.

Pour optimiser le référencement naturel

Une raison un peu plus technique. Comme nous l’avons dit, plus une page se charge rapidement, plus elle va être considérée comme performante par les petits robots des moteurs de recherche qui scannent chaque jour des millions de sites internet (chiffres non vérifiés par l’auteur de cet article, mais vous voyez l’idée). Les moteurs de recherches ont de nombreux critères pour « noter » votre site, dont sa rapidité de chargement. Plus votre site sera considéré comme performant, plus il apparaîtra en haut des pages de recherche. Vous l’avez compris, vous avez tout intérêt à faire attention au poids de vos images quand vous illustrez votre site. Pas de pression.

Pour son image de marque

Attention cependant, des photos optimisées donc réduites en taille et en poids ne veulent pas dire des photos de mauvaise qualité, surtout pas ! Si vous lisez régulièrement les articles de ce blog, vous savez qu’une photo de qualité est très importante, surtout lorsqu’on est un professionnel (on vous explique pourquoi et comment choisir des images de qualité ici). Une image optimisée c’est aussi une image qui n’est pas floue, ni pixélisée. Il s’agit comme souvent de trouver le bon équilibre et ce n’est vraiment pas difficile, promis. Pour vérifier que votre image n’est pas trop « lourde »

- sur PC, cliquez droit sur l’image puis choisissez « propriété ». Sur un Mac, clic droit puis « Lire les informations ». La photo ne doit pas dépasser 500 Ko.

- Pour vérifier qu’elle est de bonne qualité, regardez et zoomez: si elle est floue ou avec des petits carrés (pixels) très vite, vous pouvez choisir une autre image.

  • Bien optimisée, oui.
    Bien optimisée, oui.
  • Pixélisée non !
    Pixélisée non !

2/ Comment optimiser vos images ?

Choisir le bon format

Une fois que vous avez trouvé votre image sur internet* ou que vous l’avez téléchargée depuis votre appareil photo sur votre ordinateur, vous avez forcément remarqué l’extension juste après le nom de votre image. Généralement en .jpg / .jpeg ou .png.

Pour une image simple : un paysage ou un portrait par exemple, on préférera toujours le .jpeg ou .jpg. C’est un format très léger qui a tendance à vite se dégrader quand on modifie l’image. Mais ce format suffit largement pour illustrer vos articles de blog ou vos fiches produit.

Pour une image sur laquelle on souhaite ajouter du texte, ou pour votre logo, le mieux est le format .png qui est conçu pour cela. C’est un format plus volumineux qu’un format .jpg. Le format .png gère la transparence, sur une photo de produit détourée par exemple, contrairement au format .jpg qui va forcément intégrer un fond blanc.

Faire attention au poids et à la taille des images

Sur internet, il existe des normes en termes de taille et de poids des images. Comme nous le soulignions plus haut, il ne faut pas dépasser les 500 Ko pour une image qui va illustrer votre site internet. Si vous voyez qu’elle est à plus de 1 Mo, il faudra la réduire pour optimiser le chargement de votre site.

En plus du poids, il faut être attentif à la largeur des images qui se mesurent en pixels (vous pouvez également vérifier cela en faisant un clic droit). La largeur idéale se situe entre 1500 et 2500 pixels. Moins de 1500 et l’image sera de mauvaise qualité, plus de 2500 et l’image sera trop lourde pour votre site internet, surtout si vous intégrez plusieurs images sur une seule page.

Enfin, la résolution notée DPI ou PPP (pixels par pouce). La résolution et la taille en pixel sont très liées, plus une image comporte de pixels, plus sa résolution est haute. Une image de très bonne qualité fera 300 DPI, mais inutile d’en arriver là sur le web puisque la plupart des écrans affichent en 72 DPI. La résolution influe beaucoup sur le poids des images, donc lorsque vous optimisez une image pour le web, choisissez toujours 72 DPI. Si vous ne devez retenir qu’une seule chose, ce serait ceci !

Optimiser ses images

La pratique la plus courante pour optimiser ses images est d’utiliser les logiciels de la suite Adobe, mais, tout le monde ne peut pas s’offrir ces logiciels, surtout quand vous devez l’utilisez très occasionnellement. Plusieurs autres solutions existent en ligne :

- Gimp : un logiciel à télécharger qui ressemble à Photoshop mais en version gratuite. Il ne possède pas toutes les fonctionnalités du logiciel Adobe, mais il est suffisant pour optimiser vos images (taille, poids, résolution).

- Paint présent sous Windows ou Paint.net font aussi parfaitement l’affaire.

Gimp est une bonne alternative à photoshop
Gimp est une bonne alternative à photoshop

Accompagner ses images des bons textes

Finalement, images et textes sont souvent indissociables ! Puisqu’optimiser son image c’est aussi optimiser son référencement, pensez à renommer votre image avant de la télécharger sur votre site internet. Nommez-là en fonction de ce qu’elle montre par exemple "fleurs d’hortensia roses", ou "voiture hybride citadine grise" … Et bien sûr, faites-en sorte que l’image corresponde bien au texte qu’elle accompagne sur vos fiches produit par exemple.

*Quand vous utilisez des images prises sur internet, vous devez faire très attention aux droits d’auteur. On ne le rappellera jamais assez : nous vous déconseillons vivement de télécharger des images sur Google Images, en règle générale, ces photos sont privées donc il faut mieux éviter ! Il existe de nombreuses autres solutions pour illustrer votre site internet gratuitement. Et n’oubliez pas, si vous avez souscrit à l’offre pro d’Hubside, vous avez la possibilité de télécharger 100 images haute définition gratuitement sur de Getty images. Pour finir, merci à Julien pour sa patience sur l’optimisation des images de ce blog. Sans toi Julien, rien ne serait possible.

Stories est une publication d'Hubside, outils numériques pour réussir vos projets et partager vos passions.

©2020 Hubside. Tous droits réservés

Mentions légales