Les images représentent une part très importante du temps de chargement d’un site web : elles sont souvent bien plus lourdes que le code lui-même. Leur optimisation est donc essentielle afin d’alléger votre site et d’accélérer le chargement des pages pour une meilleure expérience utilisateur.
Le poids des images
En informatique, le « poids » d’un fichier représente l’espace qu’il occupe sur la mémoire sur laquelle il est stocké (disque dur, clé USB, SSD…). Ce poids s’exprime en octets (bytes en anglais). Lorsque l’on envoie des images sur son site, il est important de garder à l’esprit qu’elles devront être téléchargées par le navigateur avant de pouvoir être affichées. Cela signifie que plus leur poids est important, plus le temps de chargement des pages sera long pour l’internaute. Le poids de l’image est déterminé par ses dimensions (le nombre de pixels présents sur sa hauteur et sa largeur) et le taux de compression proposé par son format d’enregistrement, mais nous reviendrons un peu plus tard sur cette histoire de format.
De manière générale une image ne sera pas affichée plus grande que la taille de l’écran. Il est donc inutile de vouloir afficher une image de 5000 pixel de large. La grande majorité des écran actuel n’excède pas 1920px de large.
La résolution d’une image
La résolution, mesurée en pixels par pouce (ppp ) ou dot per inch en anglais (dpi), décrit la finesse des détails d’une image bitmap. Plus le nombre de pixels par pouce est grand, plus la résolution est élevée. Contrairement au monde de l’édition et à pas mal d’idées reçues, la résolution d’une image affichée sur le web n’a pas énormément d’importance. La réalité, c’est que la résolution d’image n’a aucune importance sur le web : c’est la taille qui compte ! Ou en d’autres termes, la hauteur et la largeur en pixels, qui définissent le nombre total de pixels présents dans l’image. Selon la résolution de l’écran, votre image occupera donc plus ou moins d’espace en fonction de sa largeur et de sa hauteur en pixels, quelle que soit sa propre résolution. Cependant, l’usage fait l’habitude et le plus généralement les images seront exportées dans une résolution de 72 dpi.
Le mode colorimétrique
Par définition, un site web sera affiché sur un écran. Il n’est donc pas question de vouloir y afficher une image en quadrichromie (CMJN). L’affichage de contenu sur un écran s’appuie sur le principe de la synthèse additive. Il s’agit de l’association de 3 couleurs, le rouge, le vert. Vous l’aurez donc compris, les images seront enregistré dans le mode RVB. L’un des avantage de ce mode est de couvrir un spectre plus large de fréquences lumineuses. Nous pourrons donc, dans la mesure du raisonnable et le respect des yeux de l’internaute, utiliser des couleur fluorescentes et plus riches que dans un mode quadrichromique.
Les différents formats
Nous arrivons au cœur de notre problématique. Quels formats d’image puis-je utiliser ?
Tout d’abord définissons ce qu’est un format en langage informatique. Le format désigne la nature d’un document informatique et permet d’identifier le logiciel nécessaire à sa lecture. Chaque fichier porte une extension en 3 lettres en général et indiquant le format. Ex : MP3 pour les musiques, JPG pour les images et PDF pour les documents.
Suivant cette logique, il est important de bien comprendre que le navigateur est un logiciel. Tous les formats ne pourront donc pas être affiché. Le .psd de Photoshop par exemple n’affichera rien une fois ouvert dans un navigateur. Seuls quelques formats sont tolérés, chacun offrant ses propres particularités. Couche alpha pour la transparence, algorithme de compression plus ou moins destructeur, animation…
Voici un tableau regroupant les principaux formats d’images, leurs avantages, leurs inconvénients et leur utilisation :
| Format | Avantage | Inconvénient | Utilisation |
|---|---|---|---|
| .jpeg | Léger ; possibilité de choisir le taux de compression ; 16 million de couleurs | Ne gère pas la transparence ; perte de qualité d’image en cas de trop fort taux de compression | Photo sans transparence ; arrière plan ; image de grande taille |
| .png | Format sans perte ; 16 millions de couleurs ; transparence | Lourd donc plus long à charger | Visuel avec transparence ; |
| .gif | Gestion des animations ; format sans perte (pas de pixellisation) ; possibilité de choisir le nombre de couleurs indexées (de 2 à 256) ; gestion partielle de la transparence (binaire) | Limité à 256 couleurs maximum ; pas de couche alpha | Uniquement pour les animations |
| .svg | Format vectoriel ; très léger ; gestion de la transparence ; peut être combiné à du code pour créer des animations ; peut être utilisé sous forme de police de caractères ; modifiable avec un éditeur de code ; balise <svg> dédiée en HTML5 | Non supporté par les vieux navigateurs ; uniquement pour les images vectorielles ; | Icônes ; logos et pictogrammes ; typographie ; formes géométriques |
Enregistrer son image dans Photoshop
Lorsque nous travaillons dans Photoshop, le fichier source est bien souvent enregistré en .psd. Il faudra donc opérer une opération d’export pour l’enregistré au format désiré.
Les développeur du logiciel y ont pensé depuis un certain nombre de version et mettent à disposition une boite d’export accessible depuis le menu Ficher > Exportation > Enregistrer pour le web (hérité).
Bien nommer son fichier
Cette dernière étape n’aura pas d’incidence sur le temps de chargement mais pourrait vous épargner bien des soucis. Il s’agit tout simplement de renommer correctement vos images avant de les mettre en ligne. Comme pour n’importe quel fichier destiné à être hébergé sur un serveur web, les caractères accentués et les espace sont proscrits. Plutôt que de coller les mots, remplacez les espaces par des tirets (-). Ils sont à privilégier aux underscores (_) bien que les deux fonctionnent. Les tirets sont recommandés par le guide des « bonnes pratiques » de Google. Le fait de séparer vos mots plutôt que de les coller permet une meilleure lisibilité mais aussi une meilleure identification des différents mots par les moteurs de recherche, qui peuvent alors mieux qualifier votre image.
Dernier point à aborder : nommez toujours vos images selon leur contenu. Les noms de fichier de type IMG20141216_5.jpg sont à bannir. Ils ne donnent aucune information sur le contenu de l’image et ne sont pas esthétiques dans une URL. Privilégiez un nom clair et explicite. Exemple : boite-d-export-photoshop.jpg (en lisant le nom de ce fichier, vous savez immédiatement ce que vous allez trouver sur l’image).