Optimisez les images de votre site pour accélérer l’affichage

Optimiser les images de son site pour en accélérer l’affichage est la seconde partie de notre tutoriel consacré à l’optimisation de la vitesse d’affichage de votre site web. Les images étant très souvent les fichiers les plus volumineux pour un site web, une bonne optimisation de celles ci peut grandement réduire le poids d’une page et ainsi accélérer la vitesse de chargement.

Ce guide pour l’optimisation de la vitesse d’affichage de votre site web comprend 6 parties :

• L’optimisation des images et de leur poids
• Réunir et optimiser les fichiers externes pour un temps d’affichage plus rapide
• La compression de fichiers coté serveur
• L’utilisation du cache pour accélérer votre site
• L’hébergement du site et la vitesse de chargement
• Divers autres paramètres

Limitez le nombre d’images dans votre site

Afin d’alléger le poids de vos pages web il est recommandé de travailler avec des images ayant la plus petite taille possible mais aussi et surtout avec le moins d’images possible. En effet pour chaque chargement d’une image il se passe deux choses :

• L’appel de l’image qui correspond à une requête HTTP et qui comprend la résolution d’une requête DNS, la recherche du fichier sur le serveur, l’envoi du fichier, sa récupération par votre serveur, l’envoi d’une réponse pour avertir que le fichier a bien été reçu. Quelque soit la taille de l’image ces étapes sont obligatoires.
• Le chargement de l’image lui même directement en rapport avec son poids et la qualité de votre connexion

Il faut également savoir que les navigateurs limitent volontairement le nombre de requêtes HTTP ouvertes simultanément. Donc les images seront chargées par paquets de 5 à 8 selon les navigateurs ce qui implique qu’un trop grand nombre d’images va entrainer un goulot d’étranglement.

Réduire le nombre d’image possible en utilisant le CSS

Avant même d’optimiser les images de son site, il faudra déjà essayer d’en enlever le maximum. Certaines images présentent sur un site web peuvent tout à fait être remplacées par un bloc en utilisant les CSS. C’est le cas pour les images visant à faire de la mise en page : images des menus, bloc de mise en valeur du texte, fond coloré, boutons…

Aujourd’hui avec les CSS on peut aller très loin dans le design et la mise en page et avec l’arrivée des CSS 3 c’est encore plus vrai. N’hésitez donc pas à enlever toutes les images que vous pourrez remplacer par un peu de CSS car cela économisera une requête HTTP et le temps de chargement de l’image.

Réduire le nombre d’images possibles en utilisant les sprites CSS

L’utilisation des sprites CSS permet de réunir plusieurs images contenus dans votre site en une seule image qui sera ensuite utilisée sur les différents éléments en utilisant la propriété CSS : background-position.
Au lieu de charger par exemple 20 images pour un menu ce qui nécessiterait 20 requêtes HTTP, il n’y en aura plus qu’une.

Réduire le nombre d’image en les réunissant en une seule

Toujours afin de réduire le nombre de requêtes HTTP nécessaires au chargement de la page, vous pouvez vous demander si certaines images ne peuvent pas être réunis en une seule. Le poids théorique sera le même mais il n’y aura plus qu’une seule requête HTTP. On retrouve souvent ce cas sur des headers découpés en 4 ou 5 images ou pour des logos de partenaires cote à cote en bas de page.

Réduire le poids des images en choisissant le bon format

Une fois qu’il ne reste plus que les images strictement nécessaires à votre site, il faut se poser la question du format de celles ci ainsi que de leur compression.

Actuellement trois formats sont utilisés pour le web, le JPG, le PNG et le GIF. Nous ne parlerons ici que des deux premiers puisque le format GIF est devenu obsolète car apportant un taux de compression dérisoire par rapport au JPG et au PNG.

Compresser le format d’image JPG

Le format JPG permet d’effectuer une compression destructrice mais importante. C’est le format d’image à utiliser pour les photos. Concrètement si on compresse une image carré avec d’un coté du blanc et de l’autre du noir, la compression va consister à prendre les pixels du coté blanc et les pixels du coté noir pour les transformer en pixel gris sur une largeur de ligne plus ou moins grosse en fonction  du taux de compression. C’est ce que l’on appelle la compression destructive car l’image est directement altérée. Cependant le poids de l’image est réduit grandement.
Mais voyons un exemple avec cette photo JPEG non compressé :

Image original. Poids : 122. kB

Comme vous le constatez dans la légende de l’image celle ci fait quand même 122Kb ce qui est énorme pour une image présentée sur un site web. Regardons maintenant ce qu’offre la compression JPG.

qualité: 90. Poids 50.9 kB soit -58%

qualité: 80. Poids : 34.2 kB Soit -71%

On peut encore aller plus loin dans la compression selon la qualité désirée et selon l’image. Certaine images vont supporter plus de compression avant que cela ce remarque et d’autres moins. Vous pouvez faire vos tests vous mêmes en utilisant un logiciel de retouche d’image comme « The Gimp » ou Photoshop. Il existe également un outils en ligne permettant d’obtenir le rendu d’une image avec plusieurs taux de compression différents, il s’agit de http://tools.dynamicdrive.com.

Compresser le format d’image PNG

Le PNG est le format d’image à préférer pour toutes les images contenant du texte, pour les icônes et bien entendu pour les images utilisant la transparence puisque le JPG ne le gère pas. La compression d’une image PNG ne se fait pas en mélangeant les couleurs comme pour le JPG, c’est ce qui permet un rendu net pour les textes ou les icônes.

Pour compresser un fichier PNG, nous enlèverons toutes les palettes de couleurs inutiles car les fichiers PNG non compressés possèdent une palette de plusieurs millions de couleurs alors que nous n’en auront très souvent besoin que de 8 ou 16.

Mais voyons un exemple avec ce fichier PNG  :

Fichier PNG original. Poids : 182Kb

Fichier PNG avec palette de 256 couleurs. Poids : 38KB

Le fichier PNG choisi ne comprend véritablement que quelques couleurs et teintes (orange et bleu) aussi il est inutile de laisser une palette de plusieurs millions de couleurs inutiles.

• Pour compresser vos fichier PNG dans The Gimp, ouvrez l’image puis cliquez sur « couleurs/posteriser » et essayer plusieurs réglages.

• Pour compresser vos fichiers PNG dans photoshop, ouvrez l’image, faites « fichier/enregistrer pour le web et les périphériques » puis dans paramètre prédéfini choisissez « PNG-8″ puis ensuite jouer avec le curseur placé dans l’option « couleurs » juste en dessous.

Ressource en rapport avec cet article :

http://tools.dynamicdrive.com est un site qui vous permet de tester plusieurs modes de compression sur une image.
http://www.smushit.com/ysmush.it/ est un service proposé par Yahoo qui optimise la compression de vos images. Possibilité de traiter des lots d’images.

Recherches recentes:

• optimisez les images
• accelerer chargement images
• photoshop optimisation rapide dimage pour le web
• poid maxi fond site
• poid maximum d\un background
• poids d une photo pour un site e commerce
• poids images site web
• poids maxi dun site
• poids maximum background
• poids photo affichage en ligne

Tags: optimiser image, optimiser image jpg, optimiser image png, optimiser vitesse des images

Catégorie: référencement