Optimiser le poids et adapter la taille des réalisations.
Optimiser le poids et adapter la taille des réalisations.
Définition.
L’optimisation du poids et de la taille d’une image fait référence au processus de réduction de la taille de fichier d’une image tout en maintenant une qualité visuelle acceptable. Cela peut être réalisé en utilisant différentes techniques et méthodes, telles que la compression d’image et l’ajustement des paramètres de format.
La compression d’image est une méthode couramment utilisée pour réduire la taille d’un fichier image. Elle permet de réduire la quantité de données nécessaires pour stocker l’image en éliminant les informations redondantes ou en les encodant de manière plus efficace. Il existe deux types de compression d’image : la compression avec perte et la compression sans perte.
Les avantages.
Éviter les rebonds utilisateurs.
Une page web qui se déplace lentement, telle une tortue, et qui par conséquent prend un temps considérable pour se charger, entraîne un taux de rebond élevé. Nous sommes conscients que la patience n’est pas notre atout majeur, et que les utilisateurs quittent la page lorsqu’ils rencontrent des délais pour accéder au contenu. Nous souhaitons éviter de perdre des utilisateurs en raison d’un chargement lent !
Augmenter le positionnement Google.
Google classe les pages d’un site internet en fonction de la vitesse de chargement, ce qui signifie que plus les images sont légères, plus le score du site est élevé, ce qui se traduit par une meilleure position dans les résultats de recherche.
La principale avantage de la compression des images réside dans la réduction de la taille du fichier. Selon le type de fichier que vous compressez, il est possible de comprimer l’image de manière continue jusqu’à atteindre la taille souhaitée.
Une meilleure vitesse de chargement.
Les images non compressées ont généralement une taille de fichier plus importante, ce qui peut entraîner des temps de chargement plus longs. En compressant les images, on réduit leur poids, ce qui permet de charger les pages plus rapidement. Les temps de chargement rapides sont essentiels pour offrir une bonne expérience utilisateur, car les visiteurs sont plus enclins à rester sur un site qui se charge rapidement.
Quelques bonnes pratiques à mettre en place.
Utiliser le format JPG.
Le format JPEG permet d’équilibrer la taille et la qualité d’un fichier standard. C’est un format de haute qualité mais qui est peu compressible.
Utiliser le format PNG.
Ce format s’adapte particulièrement aux images qui ont des résolutions élevées.
Contrairement au format JPEG, il peut compresser une image sans perte de qualité. Les fichiers PNG sont souvent très légers.
Utiliser le format GIF.
Le format GIF est le plus adapté si vous souhaitez mettre de l’animation sur votre site. Ce format limite la qualité des images mais ne perd aucune information lors de la compression.
Vous pouvez utiliser le GIF pour les images de petite taille avec une faible palette de couleurs.
Utiliser le format SVG.
Nous avons l’habitude d’utiliser les formats JPEG, PNG ou GIF mais le format SVG est aussi intéressant pour optimiser vos images. Il est conseillé pour les raisons suivantes :
- Les navigateurs sont tous compatibles avec les fichiers SVG et les images peuvent être automatiquement redimensionnées.
- Google indexe de la même manière tous les formats vectoriels y compris celui-ci.
- La taille des fichiers en format SVG est en général plus petite que les formats JPEG et PNG ce qui implique un temps de chargement plus rapide des images sur votre site.
Compresser les images.
Vous pouvez utiliser des outils pour supprimer des données cachées dans vos fichiers et qui n’ont pas d’impact sur la qualité visuelle des images.
Il est cependant nécessaire d’évaluer votre taux de compression. En effet, une compression trop élevée peut dégrader la qualité de vos images.
Utiliser des polices web.
Encoder un texte dans une image n’est pas forcément agréable pour les utilisateurs. En effet, vous ne pouvez ni agrandir ni sélectionner le texte par exemple.
Alors qu’en utilisant les polices web, vous pouvez trouver de très beaux types de caractères tout en gardant la possibilité de les modifier.
Utiliser les effets en CSS3 plutôt que de les appliquer sur les images.
Les effets et animations CSS comme les ombres ou les dégradés sont en mesure de créer des fichiers à la résolution indépendante pour un résultat très net.
Cette technique génère plus de fichiers CSS mais peut améliorer la vitesse de chargement tout en réduisant le nombre de requêtes. N’hésitez pas à les utiliser pour l’optimisation de vos images.
Réduire la taille des images.
Pour réduire le poids de vos images, vous pouvez simplement réduire leurs dimensions afin qu’elles correspondent à l’utilisation dont vous avez besoin.
Il est inutile d’utiliser un fichier de 2000x2000px, si vous souhaitez l’afficher en 100x100px sur votre site internet.