Les images représentent une grande partie des actifs sur un site Web et le contenu visuel ne cesse d’augmenter. Il est crucial de prendre au sérieux l'optimisation des images afin d'améliorer les performances de votre site. Google a fait de la performance un facteur important de classement car elle affecte l'expérience utilisateur. Google intègre des outils de mesure de performance des images. L'outil PageSpeed Insights montre à quel point l'algorithme de Google est efficace pour mesurer la vitesse de chargement des images.
Il y a donc deux bonnes raisons de commencer à optimiser les images dans le processus de développement web :
- le temps de chargement de la page,
- le classement SERP.
Remplacer les images inutiles
La suppression des images peut être aussi simple que la réévaluation de vos décisions de conception. Un design plus simple peut avoir plus d'impact, et moins d'encombrement visuel peut aider à transmettre votre message plus efficacement.
Cela dit, une image ou un effet graphique peut faire partie intégrante de la conception du site. Pouvez-vous réaliser le même effet sans inclure une image ?
Voici quelques alternatives à considérer :
1. CSS uniquement pour l’arrière-plan :
Vous pouvez souvent remplacer des images d'arrière-plan simples par des gradients ou des motifs CSS.
Proriété css : background : linear-gradient(x y, couleur1, couleur2, couleurN)
Vous trouverez des explications sur cette propriété css sur ce site.
2. Pourquoi pas des effets en CSS :
les effets d’ombres, les lueurs et la transparence sont possibles à réaliser en CSS3.
CSS3 supporte même les animations.
Proriétés css :
text-shadow: 4px 4px 2px rgba(150, 150, 150, 1); - explications et simulation sur ce site
box-shadow: 10px 10px 5px #656565; - explications et simulations sur ce site
transition (et nombreuses variantes) - explications et simulations sur ce site
animation et transform (et nombreuses variantes) - explications et simulations sur ce site
3- Utilisez les sprites si possible
Un "sprite" est une seule image qui en regroupe plusieurs. Le gain de traitement est représenté par la requête dans le navigateur d'un seul fichier image plutôt que X fichiers. L'affichage de chaque sous-image est géré en css. Cette méthode est particulièrement utile lorsque vous avez des icônes qui vous sont propres et et nombre conséquent.
Prenons un exemple de sprite simple avec une image appelée par exemple "gites-de-france-gplus.png" : 
Aussi étonnant que cela puisse paraître, cette unique image va permettre d'afficher les 2 icônes ci-dessous :
Voici le css qui permet cet affichage, avec notamment la notion de background-position :
.sprite-accueil-gdf, .sprite-accueil-google {
background: url('../../../../images/gites-de-france-gplus.png') no-repeat;
display: inline-block;
}
.sprite-accueil-gdf {
background-position: 0 0;
width: 64px;
height: 64px;
}
.sprite-accueil-google {
background-position: -65px 0;
width: 40px;
height: 40px;
}
et dans le HTML on insère les classes, par exemple comme ceci :
<p><a href="http://www.xxx.com"><span class="sprite-accueil-gdf"></span></a></p>
<p><a href="http://www.google.com/xxxx"><span class="sprite-accueil-google"></span></a></p>
Vous trouverez toutes les explications sur les sprites sur ce site.
Dans une page telle que celle-ci (scroller vers le bas) cette notion prend tout son sens.
4. Abusez des polices vectorielles :
Il existe de nombreuses polices gratuites, comme celles proposées par Google. Les polices Web ont permis aux concepteurs d'utiliser des polices plus créatives sans avoir transformer le texte sous forme d'image.
ll existe même des polices web sous forme d'icônes, telles que FontAwesome, qui fournissent des centaines de vecteurs d'icônes de haute qualité à utiliser sur votre site.
Sur le site de Nosyweb, vous trouverez de nombreuses utilisations de cette police - voir le site de FontAwesome.
La plupart des templates modernes fournissent un accès simple et rapide pour intégrer les icônes (ci-dessous l'icône bien connue de l'accueil et de son paramétrage) :
Autre exemple pour placer une icône au sien du HTML:
Cette image comporte un triangle orange géré avec l'attribut ":before" en css
Voici les propriétés css qui permettent cet affichage :
h2:before {
font-family: FontAwesome;
content: "\f0da"; /*le code du triangle orange*/
color: #ff6200;
margin-right: 4px;
}
Préférez les images vectorielles lorsque c’est possible
Chaque fois que vous manipulez des formes géométriques simples, des illustrations bidimensionnelles ou des images avec des zones planes de couleur, les images vectorielles constituent une bonne alternative aux rasters (PNG et JPG). Les graphiques vectoriels SVG peuvent être beaucoup plus petits que les bitmaps, même avant la compression. Ils ne sont pas seulement plus petits, ils sont de meilleure qualité lorsqu'ils sont mis à l'échelle, car ils sont composés essentiellement de courbes, de lignes et de formes plutôt que de pixels. Ainsi, ils n'ont pas de bord déchiqueté, ils restent clairs et net dans n'importe quelle taille.
Les graphiques vectoriels sont définis comme des points et des chiffres - ce sont essentiellement des données mathématiques. Le format SVG est un dialecte XML, ce qui signifie qu'il est basé sur du texte. Il peut être minifié et compressé, tout comme le CSS et le JavaScript.
Il existe des site de fichiers SVG gratuits.
Pour modifier un fichier SVG (taille, couleur, cacher un élément ...), il n'est pas nécessaire de posséder Illustrator, il existe aussi l'application gratuite INKSCAPE.
Choisissez le bon format
Il existe trois formats de fichiers raster qui sont utiles sur tous les navigateurs. PNG, GIF et JPEG. Chacun d’eux permet de répondre à un besoin précis. Les PNG sont utiles lorsqu'il est nécessaire de conserver un haut niveau de détail. Ils fonctionnent bien pour des motifs complexes ou des images avec des détails qui doivent être conservés, comme une capture d'écran contenant du texte.
Cependant, si l'image comporte seulement du texte, il est plus logique d'utiliser du code HTML. Il utilise moins de bande passante, et c'est plus pratique pour l'utilisateur, qui peut rechercher du texte ou le copier-coller.
Avant le PNG, le GIF était le meilleur choix pour les images non photographiques. Le format PNG offre plus de fonctionnalités que le GIF, et peut être jusqu'à 25% moins volumineux. Les GIF sont un meilleur choix lorsque vous avez besoin d'une image animée. Les images JPEG sont idéales pour les photographies. Ils utilisent un algorithme spécial de compression à perte qui ignore les détails que l'œil humain ne peut pas voir.
Utilisez la bonne résolution pour le bon équipement
L'une des plus grandes erreurs que les développeurs web font est de charger une grande image et de la mettre à l'échelle avec le CSS. Si l'image est réduite à la moitié de sa taille d'origine, cela signifie que votre utilisateur aura téléchargé une image dont la largeur et la hauteur sont deux fois plus grandes que nécessaire. Cela signifie que le fichier est quatre fois plus grand que nécessaire (2 x 2), cf exemple ci-dessous où il faudra redimensionner l'image à 300px de large et 87px de hauteur.:
Un autre facteur à considérer est la puissance du processeur qui doit être utilisée pour mettre à l’échelle ces images. La mise à l'échelle peut provoquer des latences dans le rendu d'une page. Cela peut également provoquer des artefacts visuels (sur certaines versions d'Android, il existe des problèmes visibles lorsqu'une image mise à l'échelle est animée). Lorsqu'un appareil mobile télécharge des fichiers destinés à un affichage sur ordinateur de bureau, il les mettra à l’échelle généralement automatiquement. La mise à l'échelle automatique comporte les mêmes inconvénients que la mise à l'échelle dans CSS. En exportant plusieurs versions du fichier pour chaque résolution, vous pouvez présenter la bonne version pour le périphérique cible. Les techniques d'image responsive permettent de charger différents fichiers d'image pour différentes tailles d'écran.
Il existe plusieurs techniques d'image responsive :
1. L’attribut srcset de la balise <img /> permet de définir plusieurs résolutions d’image que le navigateur pourra choisir. Voici un exemple :
<img src="/img/keycdn-600.jpg"
alt="KeyCDN"
srcset="/img/keycdn-300.jpg 300w,
/img/keycdn-600.jpg 600w,
/img/keycdn-1200.jpg 1200w" />
La plupart des navigateurs Web modernes supportent srcset, sauf IE et Opera Mini.
2. Utilisez la détection de user-agent sur le serveur pour charger seulement le nécessaire.
3- Utilisez le lazy-loading avec JavaScript
Le lazy-loading (chargement paresseux, en français) consiste à charger les images lorsque la page est elle-même chargée. Souvent, elles ne sont pas chargées si elles ne sont pas visibles sur la portion de page affichée. JavaScript peut détecter les dimensions de l'appareil et peut charger la résolution d'image correcte. LazySizes est une bibliothèque légère de JavaScript qui facilite l'implémentation du lazy-loading.
Désormais de nombreux templates intègrent cette fonctionnalité.
Se débarrasser des métadonnées des images
Souvent, les fichiers d'images sont encombrés d'informations dont le navigateur Web n'a pas besoin. Les métadonnées du fichier peuvent inclure toutes sortes d’informations inutiles, comme les données géographiques et des informations sur l’appareil photo. Il existe des programmes simples pour supprimer ces données redondantes des fichiers image ainsi que des outils de compression intelligents pour rendre les fichiers encore plus petits.
Vérifiez que les outils de compression que vous utilisez (voir ci-après) éliminent bien les metadonnées.
Pour cela, dans l'explorateur faites un clic-droit sur votre fichier image, et allez dans "Propriétés".
Compresser les fichiers d'image
La compression d'image peut rendre vos images beaucoup plus légères sans pour autant sacrifier leur qualité. Notez qu’il est préférable d'optimiser les images après la mise à l'échelle afin d’éviter les artefacts. Souvent, un fichier SVG peut avoir des métadonnées provenant de l'éditeur (telles que des calques, des commentaires, etc.). Un optimiseur SVG comme svgo peut supprimer ces données inutiles. SVG est un langage XML, donc il peut contenir des espaces inutiles. Le nettoyage des fichiers supprimera les espaces et les commentaires. Vous pouvez compresser le fichier ainsi nettoyé en activant la compression GZIP dans vos paramètres CDN. Vous pouvez aussi le configurer sur votre serveur pour le rendre encore plus petit, sans perdre de données.
Les images raster (PNG,JPG,GIF), contiennent des données pour chaque pixel, disposé dans une grille. Chaque pixel comporte quatre canaux distincts : rouge, vert, bleu et alpha (transparence). Par défaut, chaque canal utilise 8 bits (un octet) pour avoir jusqu'à 256 niveau de rouge, vert, bleu ou alpha. Cela fait quatre octets pour chaque pixel. Il est possible d'utiliser moins de bits par canal. Bien sûr, cela signifie qu'il y aura une variation moins importante entre les nuances de l'image. Souvent, il est possible de réduire de 7 ou 5 bits sans détériorer l'image de façon notable.
L'algorithme JPEG comporte plusieurs paramètres sur lesquels vous pouvez jouer pour obtenir un meilleur résultat. La plupart des éditeurs d'images vous donnent un curseur de "qualité" que vous pouvez faire glisser, mais il existe d'autres options plus avancées que vous pouvez expérimenter. En plus d'essayer différentes options dans la boîte de dialogue de compression, il existe des techniques d'édition d'image avancées (en anglais) qui vous aideront à produire le plus petit fichier possible. Les images PNG peuvent être indexées, ce qui signifie que chaque pixel aura une couleur définie à partir d'une palette limitée. Si votre image n'a pas beaucoup de variation de couleur ou n'est composée que de quelques couleurs, l'indexation est une excellente façon de réduire la taille de votre fichier. Smashing Magazine a publié un guide avancé pour l'optimisation des PNG (en anglais).
Outils de compression en ligne
Quelques sites gratuits en ligne :
- JPEGMINI : JPG
- IMAGERECYCLE : JPG et PNG
- TINYPNG : JPG et PNG
Conclusion
Il existe de nombreux outils et options que vous pouvez utiliser pour optimiser vos images. Suivez les étapes décrites ci-dessus, et vos images seront beaucoup plus petites. Bien sûr, il est possible qu’il vous faille effectuer plusieurs réglages et tâtonner avec l'optimisation afin d’atteindre l'objectif souhaité. Il est utile d'avoir un critère pour mesurer votre site afin de définir si vous devez l’optimiser davantage, et si vous avez atteint votre objectif de performance.
Google’s PageSpeed Insights ou Dare Boost, attribuent un score à votre site et signaler tous les fichiers qui doivent être améliorés, pas seulement les images.
Bonne optimisation !
Articles qui devraient vous intéresser
Comment nommer les images pour un site internet
Performances de votre site Joomla : le guide ultime d'optimisation
