Optimiser une image pour le web

Les images font partie des éléments qui alourdissent le plus les pages web, avec les vidéos. Mais contrairement à ces dernières, elles sont très facile à optimiser. Petit tour d’horizon.

Pourquoi optimiser ses images ?

Vous l’avez sûrement déjà constaté : certaines pages peuvent mettre longtemps à s’afficher. Cela peut être dû à la qualité de votre connexion à internet (notamment sur réseau mobile), à la qualité de l’hébergement mais également aux poids des éléments à charger.

Par exemple, une galerie photo de 50 images (non optimisées), peut peser plus d’une centaine de Mo (méga-octets) !

Conséquences :

• L’internaute va devoir attendre plus longtemps que la page se charge
• Les moteurs de recherche vont pénaliser le référencement du site (la vitesse de chargement étant l’un des critères pour un bon référencement)
• Si l’internaute consulte la page depuis son smartphone, il va utiliser plus rapidement son crédit de données mobiles
• Vous allez plus rapidement remplir l’espace de stockage de votre hébergement web

Quel format d’image utiliser ?

Il existe une multitude de formats, mais peu sont à la fois adaptés au web ET compatibles avec l’ensemble des navigateurs.

Le JPG

Avec le JPG, peu de chance de se tromper ! Ce grand classique du web est adapté à la plupart des utilisations grâce à sa bonne compression.

Le GIF

Le GIF est connu principalement car il permet d’afficher des images animées. Il n’a aujourd’hui d’intérêt que cette particularité, ce format étant limité à 256 couleurs maximum.

Le PNG

Ce format se décline en deux méthodes de compression : le PNG-8 et le PNG-24. L’extension étant la même (.png).

Le PNG-8 est, comme le GIF, limité à 256 couleurs. Il bénéficie en outre d’une meilleure compression que son aîné (mais pas de sa capacité d’animation).
Malgré cette limitation colorimétrique, ce format est bien plus léger qu’un JPG pour certains types d’images ayant peu de couleurs, comme les logos, les graphiques, les pictogrammes…

Le PNG-24 a la particularité de pouvoir gérer la transparence (chaque pixel peut être plus ou moins opaque, et donc révéler ce qui sera affiché sous l’image).
Contrairement au JPG et au PNG-8, ce format est dit « sans perte », c’est-à-dire qu’il ne dégrade pas la qualité de l’image. Le revers de la médaille étant qu’il est plus lourd. Il convient donc de ne l’utiliser lorsque cela est nécessaire.

Le SVG

Ce format est dit « vectoriel ». Comme son nom l’indique, il est composé de vecteurs : le visuel est donc calculé, contrairement aux images dites matricielles (comme le JPG ou le PNG par exemple) qui ont une taille en pixel définie.
L’avantage du format vectoriel est qu’il peut être redimensionné à l’infini sans perte de qualité, là où une image classique va être « pixelisée » si on l’agrandie. Le SVG présente aussi l’avantage d’être léger.
Enfin, le SVG peut aussi être animé, même si cela s’avère être plus complexe à réaliser qu’avec le format GIF, car il faut savoir coder.

Les « nouveaux formats » WebP, HEIF/HEIC…

De nouveaux formats d’images, plus performants, ont fait leur apparition ces dernières années. Intéressants « sur le papier », ils ne sont malheureusement pas encore pleinement compatibles avec les différents navigateurs.

Caractéristiques des formats d’images :

	JPG	GIF	PNG-8	PNG-24	SVG
Vectoriel					√
Transparence		√*	√*	√
Animation		√			√
Compression	Avec perte	Sur 256 couleurs	Sur 256 couleurs	Sans perte	Sans perte

Comment optimiser une image pour le web ?

Adapter les dimensions de l’image aux dimensions d’affichage

L’erreur classique est de placer ses photos telles quelles sur son site. L’image va certes s’afficher, mais pourquoi charger une photo de 10 mégapixels lorsqu’un visuel bien plus léger de 300 pixels suffirait ?

Il convient donc de redimensionner ses visuels à la taille à laquelle ils seront affichés. Le gain de poids sera déjà considérable.

À quelle résolution dois-je enregistrer mes visuels ?

Peut importe ! On entend souvent dire – à tord – qu’il faut utiliser une résolution de 72dpi pour un affichage à l’écran mais c’est inexact. La résolution est souvent confondue avec la définition d’une image.

La résolution correspond à la densité de pixels sur une zone donnée. Elle est exprimée en dpi = dot per inch, soit points (ou pixels) par pouce (ppp en français). Votre écran, qu’il soit HD, retina, ou du siècle dernier, affichera par défaut chaque pixel de vos visuels sur un pixel de l’écran.

La définition correspond au nombre de pixels de votre visuel : une image de 300×200 px s’affichera sur… 300×200 pixels de votre écran, qu’elle soit en 72, 300 ou 4 000 dpi !

Pour en savoir plus, lisez cet article sur le même sujet

Avec quels outils optimiser une image ?

Photoshop

Si vous avez l’outil phare d’Adobe, la fonction « Enregistrer pour le web » permet très rapidement d’alléger considérablement vos visuels.
Il suffit de choisir le format souhaité (JPG, GIF, PNG-8, PNG-24) puis le niveau de compression.
Pour le format JPG, une qualité de 60 donne un très bon rapport poids/qualité.
Pour les formats GIF et PNG, le poids va dépendre du nombre de couleurs choisi (de 256 à 2 couleurs). Il s’agit donc de sélectionner une palette adaptée à la richesse colorimétrique du visuel.

Les outils en ligne

IloveIMG
Le couteau suisse en ligne de l’image. Il vous permet toutes sortes d’actions sur vos images : redimension, compression, recadrage, conversion, pivotage…

Ezgif
Autre couteau suisse, mais du GIF cette fois. Il permet toute sorte d’interventions sur les GIFs animés, ainsi que de la conversion d’une vidéo en GIF et vice-versa.

TinyPNG
Cet outil (qui existe aussi sous forme de plugin Photoshop) permet par un simple glisser-déposer d’alléger considérablement vos PNG.

SVGOMG
Tout comme TinyPNG, cet outil optimise vos images, au format SVG.