Alors que la performance (entendez « rapidité d’affichage ») de votre site est plus que jamais importante pour garantir une bonne Expérience Utilisateur et un meilleur référencement, et avec l’importance du visuel pour illustrer vos propos, il est fondamental de bien optimiser vos visuels avant de les intégrer à vos publications.
En effet, il est impensable d’imaginer une fiche produit ou la présentation d’un hébergement pour vos vacances sans visuels. En tant qu’utilisateurs, nous en avons besoin : « À quoi ressemblent ces chaussures de tous les côtés ? », « Comment est la déco ou la piscine de cet hôtel ? »
Mais si cette même publication contient une dizaine de visuels non-optimisés, son poids va être énorme, le temps de chargement trop important.
Quel format pour mon visuel ?
Usuellement, nous distinguons aujourd’hui trois principaux formats pour les visuels :
- JPEG (ou JPG)
- GIF
- PNG
Le format JPEG
Il s’agit du format que vous devez préférer pour vos photos, et plus généralement pour les images utilisant un spectre de couleurs et de contrastes très large (plus de 16 millions de couleurs gérées). Attention néanmoins, le format JPEG ne supporte pas la transparence, chaque pixel d’un fichier JPEG est « plein ». Par ailleurs, une compression excessive d’un fichier JPEG dégradera la qualité de celui-ci.
Le format GIF
Très populaire il y a des années (on est plus tout jeune vous savez), le format GIF était utilisé pour des petits éléments iconographiques qui pouvaient être animés. Avec une palette de 256 couleurs, le format GIF ne permet pas de valoriser des visuels trop « complexes ».
À la différence du format JPEG, le format GIF supporte la transparence, mais sans couche Alpha : chaque pixel d’un fichier GIF peut être soit plein, soit vide.
Aujourd’hui, nous lui préférons les format SVG ou PNG, plus performants. Mais si vous êtes nostalgiques ou que vous souhaitez donner un côté « Vintage » à vos publications, vous pouvez toujours faire un saut sur giphy.com.
Le format PNG
Le format PNG permet d’enregistrer vos visuels sans perte de qualité, à la différence du format JPEG. Néanmoins, cela se ressentira sur la balance, avec un poids supérieur.
Le grand intérêt du format PNG est que celui-ci supporte la transparence, avec couche Alpha. Ce qui signifie qu’en plus d’une couleur (composée de rouge, de vert et de bleu – RGB), chaque pixel porte une notion d’opacité.
Juste pour être complet, à ces trois formats s’ajoutent les formats SVG et WEBP. Le format SVG n’est pas à proprement parler un « visuel », c’est une illustration vectorielle. Le format WEBP quant à lui n’est pas encore largement supporté par les navigateurs, mais aura une place plus importante dans un avenir proche.
Comment bien enregistrer et compresser vos images ?
Maintenant que nous avons vu quels étaient les formats, voyons comment en optimiser le poids. En trois étapes :
- Réduire les dimensions de l’image.
- Enregistrer l’image « proprement » pour en réduire le poids.
- Compresser l’image en utilisant des outils.
Réduire les dimensions de l’image
La plupart des appareils photos et smartphones captent des visuels en Haute Résolution, ce qui donne des fichiers « volumineux » en taille. Cette taille est exprimée en pixels : 6000x4000px, en associant également une densité de pixels par pouces (72dpi, 150 dpi, 300dpi…).
En réduisant la taille du fichier (en passant à 1920x1280px, par exemple) et en passant sa résolution à 72dpi, vous réduirez déjà de manière significative le poids du fichier.
Enregistrer l’image « proprement » pour en réduire le poids
Si vous faites le choix (certainement judicieux) d’enregistrer votre fichier au format JPEG, alors vous allez pouvoir préciser un ratio de compression, exprimé en pourcentage :
- Ça va de 0% : hyper optimisé mais qualité médiocre
- Jusqu’à 100% : peu optimisé mais qualité supérieure
En fonction du type de visuel et de l’utilisation que vous souhaitez en faire, optez pour un ratio compris entre 51% et 75%.
Si vous utilisez Photoshop, il faut passer par « Fichier > Exporter > Enregistrer pour le web » et définir les paramètres d’exportation. En modifiant ces paramètres, Photoshop vous indique le poids final du fichier exporté.
Compresser l’image en utilisant des outils
Il existe plusieurs services en ligne qui permettent d’optimiser vos visuels, comme tinypng.com ou tinyjpg.com. Ces deux outils, identiques, sont gratuits. Après avoir uploadé votre visuel, celui-ci est compressé et vous n’avez plus qu’à télécharger le fichier optimisé avant de l’intégrer à votre site.
Si vous êtes utilisateur de Mac, alors nous vous recommandons d’installer un petit logiciel (gratuit lui aussi) : ImageOptim. Une fois le logiciel lancé, vous faites glisser votre fichier sur la fenêtre du logiciel, et votre visuel est automatiquement optimisé.
Optimisation des visuels : Ça se passe aussi du côté de WordPress
Dès que vous chargez un visuel dans la bibliothèque de médias de WordPress, plusieurs miniatures de ce visuel sont générées automatiquement. Il s’agit des Post Thumbnails. Ces miniatures sont automatiquement utilisées par le thème de votre site afin de ne pas systématiquement appeler le visuel dans sa taille originale. Mais pour ce point, vous pouvez souffler, c’est chez nous que ça se passe !
Commentaires
Soyez le premier à poster un commentaire !
