Tout savoir sur l’image pour votre site web

Les images jouent un rôle essentiel à plusieurs niveaux pour votre site internet. Qu’il s’agisse d’un E-commerce, d’un blog, d’un site vitrine, d’une application… Les images, photos et icônes sont indispensables pour communiquer avec vos visiteurs. Découvrons comment les choisir et les optimiser pour une utilisation web.

Pour présenter vos produits ou réalisations. Mettre en place votre direction artistique ou votre marque de fabrique. Égayer vos contenus. Les images et photos sont un sacré atout dans la manche des professionnels du web et des propriétaires de site internet. D’ailleurs ce n’est pas pour rien qu’on appelle parfois « assets » (Anglais pour atouts) le dossier qui contient les images d’un site.

Vous souhaitez savoir tout ce qu’il y a à savoir sur les images pour votre site internet ou pour le web en général ? Commençons !

Introduction aux formats d’image pour site web

Il existe plusieurs formats d’image compatibles avec une utilisation web. Que vous souhaitiez les utiliser sur les réseaux sociaux ou pour votre site. Voyons ensemble rapidement les formats les plus courants, en guise d’introduction à ce thème.

• JPG ou JPEG
• PNG
• SVG
• WEBP
• GIF

Le format JPEG ou JPG : star de la photographie sur internet

Chacun de ces formats sert un rôle bien précis. Pour balayer rapidement le sujet, retenons que le format JPG ou JPEG permet une compression avec perte des images. C’est à dire de réduire le poids de l’image en réduisant sa qualité. C’est le format le plus répandu pour une utilisation web.

Le format PNG : poids lourd ami du designer

Le format PNG, lui, n’est pas vraiment conçu pour être léger. Il est conçu pour la qualité et permet un affichage plus détaillé des couleurs. Il est très utile pour certaines applications car il permet de conserver la transparence. Vous pourrez donc utiliser un PNG avec fond transparent pour fondre une image sur un arrière-plan, par exemple. Il est recommandé de les utiliser avec parcimonie à cause des temps de chargement plus longs qu’ils occasionnent.

Le format SVG : champion poids plume pour votre site web

Le format SVG pour Scalable Vector Graphics est en fait plus proche du dessin que de la photographie dans sa conception. Les logos, icônes, fonds et « formes » d’une page web sont souvent dans ce format. Les SVG présentent un atout de taille… leur taille ! Comme il s’agit d’une suite d’instructions pour que le navigateur puisse refaire le dessin. La taille dans laquelle le SVG est affiché ne change pas son poids. Contrairement à une image JPG ou PNG. Peu importe la taille à rendre, le navigateur qui suit les instructions n’en a ni plus ni moins à réaliser. D’ailleurs un SVG peut être lu directement depuis un fichier HTML et modifié avec du CSS. Il n’est pas nécessairement un fichier à part entière.

Le format WEBP : le nouveau de chez Google

WEBP est un format récent proposé par Google en 2010. Comme JPEG c’est un format qui permet la compression des images avec perte. Il se veut plus performant et permet d’obtenir une même qualité avec un poids plus léger. En ce sens il est plébiscité pour des raisons de performances des pages web. Son invention est motivée par des temps de chargement des pages plus rapides surtout sur mobile. Toutefois, il n’est à ce jour pas supporté par tous les navigateurs et reste un format de l’écosystème Google.

Le GIF : incontournable de l’engagement

Le célèbre GIF, pour Graphics Interchange Format. Comme le GIF permet de stocker plusieurs images dans un même fichier et de donner à chacune d’entre elle un temps. Il permet de faire des diaporamas. Et des animations de chat qui font le tour de la toile. Les animations GIF présentent un grand intérêt d’un point de vue communication pour les réseaux sociaux et pour vos articles de blog. Car elles attirent l’œil et restent en mémoire !

Les emojis : ça marche aussi sur les sites web 🙂

Les emojis sont très efficaces dans un projet de site web. Car ils sont interprétés comme du texte (et donc très léger) et illustrent vos contenus à merveille. En plus, ils sont très en vogue. Ils s’utilisent déjà largement dans les posts sur les réseaux sociaux ou dans vos communications de tous les jours. N’hésitez pas à toucher vos visiteurs avec. Vous trouverez tous les emojis utilisables pour votre site web sur Emojipedia.

Comment trouver des images et photos pour son site internet ?

Maintenant que vous avez les bases sur les formats les plus répandus du web. Vous vous demandez peut-être où en trouver. Rien ne sera plus efficace que vos propres photos pour illustrer vos propos. Car elles seront uniques et forcément très liées à vos contenus. Vos produits, vos réalisations, vos locaux…

Mais nous n’avons pas tous un appareil photo et les compétences nécessaires. Ou bien tout simplement, pas grand chose à montrer, selon le secteur d’activité. C’est pour ça que les banques d’images sont là.

Attention à bien utiliser des images libres de droit si vous souhaitez une solution gratuite pour vos images de site web. Vous ne pouvez pas prendre n’importe quelle photo trouvée sur Google image et vous en servir par exemple.

Voici d’excellentes banques d’images libres de droits :

• https://unsplash.com/ (Banque de photographies professionnelles libres de droit pour votre site web)
• https://pixabay.com/ (Banque d’images et photos pour site web)
• https://www.pexels.com/fr-fr/ (Images et photos pour site internet)
• https://www.freepik.com/ (Photographies, PSD, PNG, icônes, illustrations gratuites et payantes)
• https://undraw.co/ (Illustrations gratuites)

Pour choisir les meilleures images, bien souvent, votre intuition sera bonne. Pensez à l’impression que vous souhaitez donner à votre visiteur. D’ailleurs, si vous n’avez pas fait ce travail de préparation, je vous invite à apprendre comment réussir un site vitrine.

Exporter ses images et photos pour le web

Quand vous téléchargez une photo libre de droit sur une banque d’image. Ou quand vous en prenez une avec votre appareil photo. Le fichier est beaucoup trop lourd pour une utilisation sur votre site web. Il doit être traité et exporté pour le web.

Il existe 3 propriétés sur lesquelles jouer avec une image ou une photo pour le web.

La taille de l’image

La taille d’une image sur le web, c’est ses dimensions absolues. Exprimées en pixels. A vous de définir les tailles dont vous avez besoin. Il est inutile de prendre une image de 3000 pixels de large qui ne sera affichée qu’en 500 pixels sur votre site internet. Cela cause des problèmes de performances et allonge le temps de chargement des pages. Pour ne rien gagner en qualité.

La format de l’image

Le format de l’image, ce sont en fait les proportions relatives de l’image. Portrait, paysage, et toutes les nuances entre les deux. Il n’existe aucune obligation pour votre site web. Cependant, voici les formats les plus répandus

• 4:3 (Format très répandu pour les photographies, très utilisé sur le web)
• 1:1 (Le célèbre carré popularisé un peu plus par Instagram)
• 2:1 (Qui représente une bannière courte)
• 3:1, 4:1, 5:1… (Des bannières plus longues)

Gardez à l’esprit que vous pouvez utiliser le format que vous voulez sur votre site internet et même « inventer » le votre. Pas d’importance. Pour garder un design homogène tenez-vous en à quelques formats pour des endroits bien définis et n’en changez pas.

Le poids de l’image

Le poids de l’image c’est le poids du fichier sur le serveur. Plus ce poids est important, plus l’image sera lourde à transporter du serveur au navigateur du client. Et donc plus les performances de votre site seront impactées.

La taille de l’image influence directement le poids du fichier. Donc pour une utilisation web des contenus, il est fortement recommandé d’exporter l’image dans la taille où elle sera affichée et pas plus.

Qu’est-ce que la résolution d’image ?

La résolution d’une image, c’est le nombre de pixels par pouce qu’elle contient. La résolution est exprimée en PPP (points par pouce) ou DPI (dots per inch). Plus la résolution est élevée, plus l’image est de bonne qualité.

La résolution standard d’une image pour le print est de 300DPI. Cependant, cette information est inutile pour le web. Un écran d’ordinateur est composé de pixels et par conséquent, seule la taille de l’image (en pixels) compte. On entend souvent dire qu’une image pour le web doit faire 72DPI. C’est faux. Votre écran d’ordinateur est contraint par la taille physique des pixels qui le composent et ne pourra pas afficher plus d’informations.

Compression de l’image, optimisation et export pour le web

La plupart des logiciels de retouche photo ou de designer (photoshop, affinity photo et autres…) proposent un export pour le web. Une fois la photo recadrée (format) et redimensionnée (taille). Il faut l’exporter pour obtenir le fichier final, c’est celui là qui sera utilisé sur votre site web. Au moment de l’export, il est possible de choisir un taux de compression qui fait varier le poids du fichier. Sachez qu’il est inutile de mettre sur votre site web une image JPEG à 100% de qualité.

En effet, l’export à 80-85% de qualité d’une image est imperceptible à l’œil nu et pourtant il réduit grandement la taille des fichiers. Cette étape est essentielle pour avoir un site performant.

Des outils existent pour compresser vos images en ligne : comme TinyPNG . Gardez cependant à l’esprit que si vous n’avez pas au préalable redimensionné l’image à la taille exacte qu’elle aura sur le site internet. C’est inutile de la compresser, cette étape est la dernière.

Image pour site web, performances et référencement (SEO)

Si vous vous intéressez aux performances de votre site web ou au SEO (référencement sur les moteurs de recherche). Vous devriez savoir que les images sont un point très sensible à optimiser.

Découvrez comment optimiser vos images pour le référencement.

Performances d’un site et images

Une première étape au référencement, c’est un site internet au top d’un point de vue technique et performances. Le simple fait d’avoir des images optimisées pour le web (nous en parlions plus haut). Et de les avoir à la bonne taille. Peut drastiquement changer vos scores de performances lors d’un audit technique SEO. Donc c’est un des premiers point à régler pour améliorer vos performances et votre référencement.

D’ailleurs, performances à part. Une page de site web qui contient du contenu image est largement plus vue qu’une page qui n’en contient pas. Et apparaît plus facilement dans les résultats de recherche.

La balise alt des images

Quand vous ajoutez une image à votre site web. Que ça soit dans le fichier HTML ou sur votre interface d’ajout d’image (sur WordPress par exemple). Renseignez toujours la balise ou le champ « alt » des images.

D’abord, ce contenu sert à afficher un texte de remplacement à l’image. Pour les personnes mal voyantes, les bugs de chargement de l’image ou le mode print. Mais aussi, Google peut les lire et donner un sens au contenu image de vos pages. C’est d’ailleurs une occasion, si les images sont dans le thème, de placer un mot clé !

Voilà pour cet article qui est sensé vous donner de bonnes bases. Et vous aider à comprendre les enjeux de l’image pour votre site web.