Optimisation de code – comment faire perdre du poids aux pages – les images – 4/5

Cette partie va s’intéresser aux images.

Utilisez des sprites css

Cette technique regroupe plusieurs images en un seul fichier.

Et les positionne à l’aide de CSS.

.icon-foo {
  background-image: url('mySprite.png');
  background-position: -10px -10px;
}

.icon-bar {
  background-image: url('mySprite.png');
  background-position: -5px -5px;
}

En conséquence, vous avez considérablement réduit le nombre de requêtes HTTP et vous avez éviter tout retard potentiel d’autres ressources sur votre page.

Lorsque vous utilisez votre sprite , évitez de laisser trop d’espace blanc entre les images. Ceci n’affectera pas la taille du fichier, mais aura un effet sur ​​la consommation de mémoire.

Et même si beaucoup de monde connait la technique des sprites, cette technique n’est pas beaucoup utilisée. La raison est peut-être que les développeurs n’utilisent pas suffisament d’outils automatisés pour générer des sprites. Nous avons mis en évidence quelques-uns de ces outils pour vous aider à les faire.

> Des outils utiles: SpritePad , Compass , SpriteMe et Cow Sprite .

Les données uri

Cette technique est une alternative à l’utilisation des sprites CSS.

Un URI de données est un moyen d’inclure le contenu de l’URI que vous auriez normalement pointer. Dans cet exemple, nous l’utilisons pour inclure le contenu des images de fond en CSS afin de réduire le nombre de requêtes HTTP nécessaires pour charger une page.

Avant:

.icon-foo {
  background-image: url('foo.png');
}

Après:

.icon-foo {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D');
}

Tous les navigateurs IE8 et au-dessus connaissent cette technique base64.

Cette méthode et la méthode de sprites CSS requierent des outils pour être maintenable dans le temps. Cette méthode a l’avantage de ne pas nécessiter de placement spriting manuel car il conserve vos images dans des fichiers individuels au cours du développement.

Cependant l’inconvénient c’est qu’elle va augmenter la taille de votre code HTML / CSS considérablement si vous avez de grandes images. Il n’est pas recommandé d’utiliser cette méthode si vous n’avez pas déjà gzippé votre code HTML / CSS. En effet, le surcoût de la taille pourrait annuler les gains de vitesse que vous obtenez en minimisant le nombre de requêtes HTTP.

> Des outils utiles: mod_pagespeed et des données: Générateur URI .

Ne pas redimensionner les images dans le balisage

Toujours définir les attributs width et height d’une image. Cela permettra d’éviter les réajustements inutiles pendant le rendu.

<img width="100" height="100" src="logo.jpg" alt="Logo">

Sachant cela, le développeur John Q. qui a une image de 700x700px décide d’utiliser cette technique pour afficher l’image en tant 50x50px .

Ce que M. le développeur ne sait pas, c’est que des dizaines de kilo-octets inutiles seront envoyés. Toujours garder à l’esprit: que le fait de définir une largeur et une hauteur d’une image en HTML ne signifie pas que vous devez faire pour réduire les grandes images.

Optimisez vos images

Les fichiers d’images contiennent beaucoup d’informations inutile au Web. Par exemple, une photo JPEG peut contenir des métadonnées Exif de l’appareil photo (date, modèle d’appareil photo, l’emplacement, etc.) Un PNG contient des informations sur les couleurs, les métadonnées, et parfois même une vignette miniature intégrée. Rien de tout cela n’est utilisé par le navigateur et contribue à gonfler la taille du fichier.

Il existe des outils pour l’optimisation d’image qui vont enlever toutes ces données inutiles et vous donner un fichier réduit sans perte de qualité. En ligne, vous pouvez trouver Kraken.io et Smush.it . Si vous préférez une application installable, il y a ImageOptim (Mac) ou RIOT(Windows). Il existe également divers outils en ligne de commande comme PNGOUT , ​​jpegtran , gifsicle et plus encore.

Tous ces outils sont simples à utiliser et produisent des fichiers plus petits qui ne dégradent pas la qualité d’image. En d’autres termes, ils effectuent une compression sans perte de qualité. Une autre façon d’optimiser les images est de les compresser au détriment de la qualité visuelle. Nous appelons cela des optimisations avec perte.

Lorsque vous exportez un fichier JPEG, par exemple, vous pouvez choisir le niveau de qualité (un nombre entre 0 et 100). En pensant à la performance, vous devez toujours choisir le plus petit nombre possible où la qualité visuelle est encore acceptable. Voici un outil en ligne qui vous aidera à choisir la moindre qualité d’un JPEG sans affecter de manière sensible la qualité visuelle: JPEGmini . Une autre technique commune avec perte est de réduire la palette de couleurs dans une image PNG ou pour convertir les fichiers PNG-24 en PNG-8.

Pour lire la suite, cliquez sur la flèche ci-dessous.