Nos conseils pour optimiser les images de ton 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. Privilégie des photos aux bonnes dimensions.
Sache que néanmoins, en réduisant la taille, tu réduis également la qualité de l’image. Nous te conseillons de trouver un point d’équilibre et prévoir à l’avance la position, le rôle et la proportion de l’image sur ton site.
Choisir le bon format de ton 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 tes 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 tes images
Grâce à Photoshop, tu peux optimiser manuellement tes 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 ».
Tu peux 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 tu as la possibilité de contrôler le taux de compression comme tu l’entends 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 te permettra d’y voir plus clair sur l’importance du format et poids de tes images.
Tu souhaites en apprendre plus sur les site web, clique ici.
