Tricorn
06 43 81 70 33
Rechercher un article
Catégories
Conception
Prix
SEO
Sandwich
Polénisation

Comment optimiser ses images pour le web ?

Plusieurs photos de formats différents sont disposées sur le sol
Les images peuvent être le plus grand atout comme le plus gros handicap de vos pages web. Dans cet article, vous verrez pourquoi il est dangereux de ne pas prendre des mesures pour optimiser vos images, et comment maximiser leur efficacité pour votre site.
Sommaire

Pourquoi faut-il optimiser ses images ?

Pour être bien référencé et éviter de faire fuir ses visiteurs, un site web doit être rapide. Selon une étude menée par Google, plus de 50% des utilitateurs sur mobile quittent un site si le temps de chargement excède trois secondes. Il est donc primordial que le contenu de vos pages s'affiche rapidement. Hors les ressources pesant le plus lourd dans un site web sont en général les images. Si vous souhaitez préserver vos performances, c'est donc le principal levier sur lequel agir. Rendez-vous compte : une seule image mal optimisée peut multiplier par dix le temps de chargement de votre site !

Plus généralement, on constate que lorsqu'un site est très lent à afficher son contenu, c'est dans la majorité des cas à cause d'un problème d'image. Nous allons donc aborder les règles à suivre et les choses à ne pas faire pour éviter que cette situation ne vous arrive.

1ère étape : réduire le poids de votre image

Une balance indique un poids égal à zéro

Utiliser des formats adaptés au web

Internet suit une règle très simple concernant les images : moins c'est lourd, mieux c'est. Google favorisera toujours les images les plus légères, même si elles sont moins nettes. Pour éviter de vous retrouver avec des médias trop pixelisés, vous devez donc vous arranger pour trouver le meilleur ratio entre poids et qualité. Mais tous les formats d'image ne sont pas adapté à cette pratique. Ainsi, un format comme le PNG, utilisé pour augmenter au maximum la qualité d'une image, a aussi tendance à être bien plus lourd. Privilégiez plutôt es formats comme le JPG et le WEBP, qui sont parfois 3 à 4 fois moins lourd. Il y existe cependant des cas spécifiques nécessitant d'autres formats spécifiques. Voici donc une liste précisant quels formats utiliser, et dans quels cas :

- Jpg (ou JPEG) et WEBP : Ce sont les formats à utiliser par défaut. En théorie, le WEBP est conçu pour mieux s'adapter aux moteurs de recherche, mais il arrive souvent en pratique qu'une image en JPG soit moins lourde. Le choix est donc à votre convenance.

- SVG : Ce format est utile pour les icônes et les logos, car il permet de préserver la netteté des contours.

- PNG : Ce format est utile pour intégrer une image sans fond. Il est néanmoins à réserver pour les très petits médias, car il est bien plus lourd. Il faut l'éviter dans la mesure du possible.

Dimensionner correctement ses images

Même au bon format, une image peut s'avérer très lourde tout simplement car elle est très grande. On mesure généralement la taille d'une image en px (à ne pas confondre avec des pixels). Il faut environ 37,8 px pour faire un centimètre. Cela signifie qu'une image d'une taille de 4000px est dimensionnée pour un écran de plus d'un mêtre de large. Une taille utile pour l'impression mais pas du tout optimisée pour un site web ! En réalité, il n'est pas utile que vos images dépassent les dimensions suivantes :

- 1800 à 2500px pour une image de fond ou faisant toute la taille de l'écran.

- 900 à 1400px pour des images secondaires

- 100 à 600px pour des miniatures

Utiliser des dimensions différentes sur tablette et mobile

Les smartphones sont aujourd'hui tellement démocratisés que nous y passons souvent plus de temps que sur un ordinateur. Hors il est toujours plus difficile de rendre efficace le chargement d'une page sur mobile, notamment si le réseau n'est pas optimal. Une option intéressante est donc d'utiliser des images moins grandes et plus verticales pour les petits formats d'écran. Cela permet d'une part d'économiser de précieuses ressources, et d'autre part de faciliter le rendu de la page sur mobile.

Exemple : Imaginons une page contenant 10 images d'une taille moyenne de 150Ko (Kilo-octets). Le fait de prévoir des images petites pour la version mobile peut permettre d'économiser facilement plus de 50% du poids total, soit une économie générale de 750Ko; en pratique, cela signifie que la page chargera 1 à 2 secondes plus vite sur mobile. Cette différence semble peu impressionnante, mais une seule seconde de chargement en moins peut énormément impacter l'expérience utilisateur.

Compresser ses images

Si vous avez fait votre possible pour minimiser le poids de vos médias, mais que certains sont encore trop imposant, il vous reste une dernière option, à savoir la compression d'image. Cette technique consite à diminuer le poids d'une image en altérant légérement sa qualité. Le résultat final dépendra du niveau de compression, mais la différence entre une image originale et compressée n'est généralement pas visible à l'oeil nu. Il est donc conseillé de compresser tous ses médias.

En fonction du nombre de couleurs et d'éléments, la compression d'image peut être plus ou moins eficace; elle peut permettre d'économiser de 10% à 90% du poids original. Le résultat dépendra également du logiciel de compression que vous utilisez, les outils payants étant naturellement plus efficaces.

Si vous ne savez pas quel logiciel de compression d'image choisir, vous pouvez utiliser I Love IMG, qui est un outil en ligne gratuit offrant un bon taux de compression.

2e étape : optimiser les informations concernant vos images

Une clé usb est attachée à une étiquette

La balise alternative

Avec toutes ces règles à respecter, on pourrait croire qu'ajouter des images à son site n'est pas une bonne idée. Détrompez-vous, Google adore les images ! Cependant, il n'est pas capable d'identifier par lui-même de quoi parlent vos médias. Il est donc nécessaire de lui faciliter la tâche; c'est le rôle de la balise alternative, aussi appelée attribut ALT, qui permet de donner une description de l'image pouvant être interprétée par un moteur de recherche.

La balise alternative possèdent également d'autres utilités : en cas de problème d'affichage d'une image, l'utilisateur verra s'afficher la description de l'image, ce qui est toujours mieux qu'un cadre vide. Il est également important de préciser que les moteurs de recherche pénalisent les images sans attribut ALT, car elles ne respectent pas les bonnes pratiques du web (il sera par exemple impossible pour une personne aveugle d'obtenir la description de l'image via la lecture audio). Enfin, sachez qu'une balise alternative peut servir votre référencement si vous y incuez les bons mots-clés (attention tout de même au bourrage de mots-clés).

La légende

Similaire à la balise alternative, une légende a pour fonction d'être visible même lorsque l'image est fonctionnelle. Elle a pour but d'ajouter du contexte à vos médias, et permet à un moteur de recherche de déterminer plus facilement si votre image correspond au sujet de la page. Ajouter une légende peut également s'avérer très utile si les images que vous utilisez sont soumises à des droits d'auteur, en vous permettant de citer discrètement l'auteur du média en question.

Comme pour la balise alternative, une légende peut également être utile pour votre référencement. Il n'est pas pour autant judicieux de l'ajouter systématiquement, car vous risquez au contraire d'impacter négativement votre page. Faites en sorte de l'ajouter uniquement si le besoin s'en fait sentir.

Le sitemap

Nous entrons ici dans des techniques avancées. Si vous ne souhaitez pas effectuer cette étape, votre site ne sera pas pénalisé.

Le sitemap n'est pas à proprement parler une optimisation d'image, mais peut vous aider à accélérer l'indexation de vos pages et vos médias, et donc favoriser votre référencement. Cette étape consiste à envoyer à Google Search Console (ou à la console du moteur de recherche que vous utilisez) le plan de votre site, qui regroupe toutes vos pages, mais également vos médias.

Vous pouvez trouver le sitemap de votre site en tapant son adresse URL suivi de "/sitemap.xml". Pour que vos images soient également indexées, vous devez cependant activer les plans de sites des images. Pour plus d'informations à ce sujet, vous pouvez consulter Google Search Central .

.

Conclusion

Optimiser ses images est un travail contraignant et qui peut être chronophage, surtout au début. Il serait cependant mal avisé d'expédier cette étape, car chaque image dont l'efficacité n'est pas maximisée vous causera systématiquement des problèmes. Prenez le temps qu'il faudra pour effectuer toutes les actions nécessaires, vous vous en féliciterez grandement par la suite.

wave (10)

Nos derniers articles

Pourquoi vous devez avoir votre site internet

Doit-on vraiment avoir son propre site web ? Si vous êtes commerçant, vous vous êtes peut-être déjà posé cette question. Cet article est là pour vous parler des avantages à créer son site internet, mais également des désavantages à ne pas le faire.

Oxygen Builder : Pourquoi il est meilleur qu'Elementor

Si vous choisissez de construire vous-même votre site sur WordPress en 2022, il y a de fortes chances que vous utilisiez Elementor ou que vous ayez envisagé de l'utiliser. Pourtant, même Elementor est de loin le plugin de page builder le plus utilisé aujourd'hui, il existe une opportunité qui pourrais être bien plus intéressante pour […]

Accélérer son site web : le guide complet

10%. C'est la proportion de clients que vous perdez pour chaque seconde supplémentaire de chargement pour accéder à votre page. Plus de 75% des sites dans le monde ne chargent pas assez vite selon les internautes, et c'est probablement le cas du vôtre. Apprenez à résoudre les problème de vitesse de votre site par vous-même avec ce guide.

Critères d'évaluation d'un site web : le guide ultime

Il n'est pas toujours évident de savoir ce qui fait la qualité d'un site web. De nombreux critères peuvent l'impacter positivement ou négativement. Cet article a pour objectif de vous permettre d'estimer facilement si votre site est suffisamment qualitatif aux yeux de Google.

hello world!
bonjour@tricorn.fr
472000 - Marmande
Contactez-nous
cross
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram