Nos conseils pour optimiser les images de votre site
Réduire la taille des images
Plus une photographie est de grande taille, plus le nombre de pixels nécessaires est important et rend l’image lourde. Il n’est pas nécessaire d’utiliser une image supérieure à la dimension souhaitée, car elle sera sûrement rognée. Veuillez privilégier des photos aux bonnes dimensions.
Sachez que néanmoins, en réduisant la taille, vous réduisez également la qualité de l’image. Nous vous conseillons de trouver un point d’équilibre et prévoir à l’avance la position, le rôle et la proportion de l’image sur votre site.
Choisir le bon format de votre image
Il existe de nombreux formats d’images avec chacun des rôles et des spécificités. Pour cet article, nous avons sélectionné les formats à privilégier pour vos pages web.
Le format JPEG (.jpg ou .jpeg)
Le format JPEG est principalement utilisé pour des images de grandes tailles et issues d’appareils photo numériques. Standard et universel, il peut être lu par n’importe quel outil.
Sa compression supprime les détails invisibles par l’œil. Ainsi, les images sont plus légères. Cependant, il faut noter qu’à chaque nouvel enregistrement l’image est compressée, réduisant ainsi sa qualité. Le JPEG n’est donc pas à favoriser pour la retouche photographique.
Attention : le format JPEG ne gère pas la transparence.
Le format PNG (.png)
Le format PNG est généralement utilisé pour les logos, les infographies, les schémas… Il permet une compression sans perte capable de gérer la transparence.
Il existe 2 types de PNG :
- Le format PNG-8: sur 8 bits, il permet de coder jusqu’à 256 couleurs
- Le format PNG-24: sur 24 bits, il permet de coder jusqu’à 16 millions de couleurs, rendant l’image plus lourde
Ce format est à utiliser sur des images où l’on retrouve de grandes zones de couleurs unies.
Le format GIF (.gif)
Le format GIF est notamment utilisé pour les images animées. C’est un format de compression sans perte. Codé sur 8 bits, il peut produire jusqu’à 256 couleurs différentes et de jouer sur la transparence.
Pour un rendu identique, une image au format GIF est plus lourde qu’au format PNG. Il est donc préférable de l’utiliser seulement pour les animations.
Le format SVG (.svg)
Le format SVG est un format vectoriel dans lequel l’image est étirable sans perte de qualité ni effet de pixellisation. Il est utilisé pour des logos, icônes, formes simples ou même polices de caractère.
C’est un format très léger qui ne s’utilise que sur navigateur. Cependant, il n’est pas compatible avec certains navigateurs tels qu’Internet Explorer 8 ainsi que ses versions antérieures. Combiné avec SMIL, il est possible de créer des animations.
La particularité d’une image SVG est qu’elle peut être modifiée en HTML, CSS et JavaScript.
Des outils pour optimiser vos images
Grâce à Photoshop, vous pouvez optimiser manuellement vos images.
En effet, il est possible de réduire la taille de l’image, mais aussi de choisir le format lors de l’enregistrement de l’image. Pour cela, il faut passer par la fonctionnalité « Enregistrer pour le web ».
Vous pouvez ainsi tester les différents formats, voir la qualité du rendu et le poids final de l’image. Cependant, Photoshop ne prend pas en charge le format SVG.
Compressor.io est un outil très complet qui peut compresser les formats JPEG, PNG sans perte, mais aussi GIF et SVG qui peuvent subir une légère perte.
Ezgif est un outil conçu spécialement pour les images au format GIF. Il permet de compresser de 30% à 50% en réduisant légèrement la qualité. L’avantage est que vous avez la possibilité de contrôler le taux de compression comme vous l’entendez et donc préserver la qualité.
ImageResizer.com est un outil qui permet de compresser jusqu’à 20 images simultanément au format JPEG et PNG, qui ne doivent pas être trop volumineuses.
Pour conclure
Nous espérons que cet article vous permettra d’y voir plus clair sur l’importance du format et poids de vos images.
Vous souhaitez en apprendre plus sur les site web, cliquez ici.
