Brève 5 : Comment optimiser les images de son site web ?

Tags : #UX design #Web

Pourquoi optimiser les images de son site ?

Optimiser les images d’un site web, ça sert à quoi au final ? Des juniors se sont peut être déjà posés la question. La réponse est plutôt simple : accélérer le chargement du site, et avoir un meilleur référencement.

Donc l’optimisation des images n’affecte pas seulement le site, mais aussi son accessibilité. De plus, sachant que les images représentent une grand partie de son poids, il est important de ne pas négliger cet aspect afin d’optimiser les performances de son site.

Évaluer les performances de son site

GTmetrix est un outil simple à utiliser qui permet d’évaluer les performances de son site. En fonction des résultats, GTmetrix propose des outils et des méthodes pour améliorer celui-ci

Le rapport fourni par Gtmetrix se compose de cette façon :

Score GTmetrix

Juste en-dessous de cet élément, on a un rapport plus détaillé, avec différents onglets.

Rapport détaillé de Gtmetrix

La compression des images

Une façon d’optimiser les images d’un site web, c’est de les compresser. Plusieurs sites se sont spécialisés dans ce genre de service, pour différents formats.

Fun Fact :

Ces sites ne compressent pas l’image au sens propre du terme, mais optimisent l’encodage de l’image. La taille de l’image n’est donc pas réduite, mais les informations qui ne sont pas nécessaires, comme par exemple les métadatas, sont supprimées.

Deux sites pour les compressions d’images :

Afficher le terminal sans problème

Comment afficher un terminal sans que l’image soit floue ou de mauvaise qualité ? C’est une problématique à laquelle nous nous sommes confrontés au Bearstudio lors de la rédaction d’articles.

Avant de trouver une solution, on faisait seulement une capture d’écran, mais la qualité dépendait du PC sur lequel on se trouvait, ce qui rendait le résultat trop aléatoire.

Mais maintenant, on utilise un nouvel outil : Carbon

Avec cet éditeur, il est possible de personnaliser la police, la couleur du texte et la couleur du fond. D’autres paramètres sont disponibles pour changer l’apparence du terminal.

L’image est ensuite téléchargeable en 2 formats : SVG et PNG. Une fois l’image téléchargée, il ne faut pas oublier d’optimiser l’image.

PS : il est aussi possible, au lieu de télécharger l’image, de générer un lien ou une iFrame (une balise HTML intégrant du contenu venu d’une autre page).

Grégoire Protas

Publié le 12/01/2021 dans Design

         

Too long, didn’t read?
Call us! 🤙

06 20 27 32 24