Les images sont les éléments qui alourdissent le plus le poids des pages web. Pourtant, les images sont indispensables, pour mettre en valeur vos articles ou vos produits (si vous êtes e-commerçant). Si vous souhaitez améliorer la performance et la vitesse de chargement de votre site web, vous devez avoir une priorité : réduire le poids de vos images et le nombre de requêtes HTTP qui leur sont associées. Ceci inclut aussi bien les images intégrées dans vos contenus que les images qui font partie du design de votre site web (logo, icônes, etc.).
Nous verrons les formats suivants :
- JPEG ou JPG
- PNG
- GIF
Le JPEG ou JPG
Il s’agit du format idéal pour les photographies, il s’agit du format dont la compression entrainera le plus de déperdition.
Malgré cela, ce format restera le format phare pour vos images sur le web. Vous veillerez donc à l’utiliser dans la majorité des cas à quelques exceptions près que nous verrons ci-dessous.
Quelle taille pour le JPEG ou JPG ?
La taille (le poids) d’une image au format JPEG n’excèdera JAMAIS plus de 500ko.
Quel logiciel de retouche d’image ?
Nous vous recommandons Photoshop pour l’édition et la transformation de vos photos, l’option « enregistrer pour le web » vous permettra d’avoir automatiquement les options liées à l’image nécessaires à la publication sur le web :
Après avoir cliqué sur « Enregistrer pour le Web », une fenêtre s’ouvre avec les options suivantes :
- Choix de la qualité de l’image : essayez de rester avec l’option « Supérieure ».
- Toutefois, il convient de vérifier la taille dans le bas à gauche pour que cette taille reste en-dessous de 500ko.
Le PNG
Il s’agit du format à utiliser uniquement lorsque votre image utilise la transparence du fond de l’image.
Imaginez un personnage sur une photo, et vous souhaitez ne pas avoir le fond rose de l’image par exemple, après l’avoir retiré et pour conserver la transparence, le format PNG sera utilisé.
Il permet également de compresser l’image sans aucune perte de qualité, deux formats existent : PNG-8 et PNG-24, utilisez le PNG-24 par défaut.
Etant donné que le poids de l’image au format PNG sera bien plus important que le format JPEG, ce format ne sera utilisé uniquement que si la transparence dans une image est nécessaire.
Sous Photoshop, le format PNG sera choisi en suivant la même procédure que pour le JPEG, « Enregistrer pour le web » avec l’option PNG :
Vous devez cocher l’option transparence mais en général elle sera cochée par défaut, choisissez PNG-24 et vérifiez bien la taille de l’image.