Comment optimiser les images de votre site?

Comment optimiser les images de votre site
Vous vous demandez pourquoi vous n'êtes pas bien classé sur Google ou pourquoi les utilisateurs n'agissent pas sur votre site ? La vitesse du site Web est un facteur essentiel de l'expérience utilisateur et du référencement (elle influe sur le taux de rebond et le classement), et la taille des images est souvent le principal goulot d'étranglement des performances.

Partager cet article

Table des matières

Introduction sur l'optimisation des images

Dans ce guide détaillé, nous allons vous apprendre tout ce que vous devez savoir sur les dimensions et la compression des images avant de les télécharger sur votre site Web, sur les outils à utiliser, sur la façon de tester la vitesse de votre site, et bien plus encore.

Vous trouverez des conseils simples et pratiques sur la façon d’optimiser les images pour le Web et d’améliorer rapidement les performances de votre site, ainsi que des tonnes d’exemples et de ressources, et une FAQ complète à la fin.

Pourquoi se soucier de la taille des images et des performances de votre site web ?

Les internautes s’attendent à naviguer sur un site rapide, tout comme Google

Mais malheureusement, il existe de nombreux sites lents. Ces dernières années, les performances des sites Web sont devenues un facteur essentiel du référencement et de l’expérience utilisateur, car les vitesses de connexion se sont considérablement améliorées. Tout retard important dans le chargement des pages peut amener les visiteurs de votre site à se désintéresser et à partir.

Source : Think with google

Nous pouvons voir avec ces données que plus le temps de chargement est long, plus les utilisateurs sont susceptibles de quitter votre site. Le taux de base pour un site qui charge entre 1 et 3 secondes est déjà élevé : 1/3 des utilisateurs trouve ça trop long !

Et comme la moitié de vos visiteurs utilisent probablement un appareil mobile, il est essentiel de proposer des formats et des tailles de fichiers d’image optimaux. Sinon, votre trafic durement gagné diminue, et votre classement dans Google finit par baisser aussi.

Comment calculer le temps de chargement?

Il existe une multitude de sites permettant de calculer le temps de chargement de votre site internet, nous utilisons généralement :

Pensez juste à choisir un serveur proche de votre localisation (généralement en France, en Allemagne, aux Pays-Bas ou dans le pire des cas, l’Angleterre).

Pourquoi améliorer la vitesse de chargement de votre site?

Réduire la taille des fichiers tout en maintenant une qualité acceptable est l’objectif principal de l’optimisation des images pour les performances des sites web. Des fichiers plus petits permettent un chargement plus rapide des pages et améliorent l’expérience de l’utilisateur et le référencement.

Mais comment redimensionner et compresser vos photos avant de les télécharger sur votre site ? Comment pouvez-vous automatiser ce processus ? Et quels formats de fichier devez-vous utiliser ?

Optimiser les images de son site

Les meilleures tailles d'images pour les sites web (en pixels)

Par "taille de l'image", nous entendons les dimensions en pixels de l'image (largeur et hauteur en pixels), ou la taille du fichier image (Ko ou Mo). Mais nous ne faisons PAS référence à la taille de l'image en pouces/cm ou au DPI de l'image. Sur le web, le DPI n'est pas pertinent et seules les dimensions en pixels comptent !

Tout commence par la détermination des dimensions exactes des images nécessaires à vos pages, afin de vous aider à mieux les préparer sur votre ordinateur. Le téléchargement de grandes images sur votre site, sans tenir compte de leur taille réelle, est à l’origine d’énormes problèmes de performances.

Mais tout d’abord, quels que soient les formats de fichier (JPG, PNG, GIF, TIF, etc.), vous ne devez jamais télécharger des images haute résolution sur votre site à des fins d’affichage uniquement.

Même si votre site Web ne les affiche qu’en plus petite taille, l’URL des images originales peut souvent être inversée à partir du code source et vos images peuvent être volées. De plus, les grandes images prennent beaucoup plus de temps à télécharger et sont plus lentes à optimiser.

Utilisez au moins un plugin tel que Resize Image After Upload ou Imsanity (si vous utilisez WordPress) qui se chargera de redimensionner les images pour vous, et effectuez également un redimensionnement en masse de toutes vos images précédemment téléchargées pendant que vous y êtes.

Si vous n’affichez des images que dans un portfolio ou un article de blog, n’utilisez jamais les images à leurs dimensions maximales.

Comment déterminer les dimensions correctes d'une image pour votre site Web ?

Pour une performance optimale du site Web, les images doivent être aussi grandes que nécessaire pour remplir leurs « conteneurs », en fonction de la mise en page. Par exemple, les images des diaporamas sont généralement plus larges, les images des blogs sont de taille moyenne (d’une largeur égale à celle de la page moins la barre latérale), les vignettes sont plus petites, etc.

Il est donc essentiel de déterminer d’abord les dimensions des images pour connaître la largeur de la zone de contenu sur votre site. Si vous avez de l’expérience, utiliser les outils de développement intégrés à votre navigateur Web : cliquez avec le bouton droit de la souris sur n’importe quel élément de la page et cliquez sur « Inspecter ». Sinon, il existe tout un tas d’extensions pour le savoir.

a) Taille des images pour les diaporamas pleine largeur

Pour les diaporamas pleine largeur ou sliders (qui s’étirent automatiquement à la taille complète du navigateur), nous recommandons d’opter pour une largeur de 2560 pixels, qui est la largeur de résolution standard pour les moniteurs 27″ et 30″.

Les images peuvent avoir la hauteur dont vous avez besoin, pour créer un rapport d’aspect avec lequel vous êtes à l’aise. D’autres sites utilisent un diaporama qui occupe toujours toute la largeur de la page, mais qui est plus court en hauteur (ce qui donne un rapport d’aspect d’environ 3:1).

Ainsi, pour les images qui s’étendent sur toute la largeur du navigateur, les images doivent avoir une largeur de 2560 pixels, et la hauteur que vous préférez (selon que vous souhaitez conserver le rapport d’aspect original de vos photos ou opter pour une coupe plus panoramique).

Utilisez 2500px si vous voulez un chiffre rond.

b) Taille des images pour les diaporamas moins larges

Pour les diaporamas plus petits qui n’occupent pas toute la largeur de la page, mais seulement un pourcentage de celle-ci, ajustez la taille de l’image requise en conséquence (2000px, ou 1800px, etc.).

c) Taille des images de la galerie (et des vignettes qui s'agrandissent)

Les galeries de vignettes sont des scénarios spéciaux dans lesquels vous ne tenez pas compte de la taille de vos vignettes et vous assurez que les images sont suffisamment grandes lorsqu’elles sont agrandies.

Nous faisons ainsi référence à une grille de vignettes qui, lorsqu’on clique dessus, s’ouvre en diaporama plein écran (généralement avec une superposition semi-transparente en dessous) :

Comme ces images s’ouvrent en plein écran, je vous recommande de les dimensionner à au moins 1500 pixels (sur le bord le plus long), afin qu’elles aient l’air suffisamment grandes sur les ordinateurs de bureau et les tablettes.

Vous pouvez même aller jusqu’à 2000 pixels si vous le souhaitez, pour un effet de surprise supplémentaire, mais généralement pas plus.

Sur les appareils mobiles, les images sont de toute façon redimensionnées par le navigateur, et cette taille de 1500 pixels est suffisante pour être nette sur les smartphones dotés d’écrans « rétina » à haute résolution.

Les images verticales/portrait peuvent être encore plus petites, avec une hauteur maximale de 1200px (comme 800×1200 pixels pour une image verticale 2:3, ou 900×1200 pixels pour une image verticale 3:4).

En limitant ainsi les dimensions de l’image, la taille du fichier restera raisonnablement petite, ce qui accélérera le chargement des images (si le diaporama permet de naviguer entre les images à l’aide des flèches latérales, des puces, du balayage sur le mobile ou des flèches du clavier sur le bureau).

d) Taille idéale pour les images de blog ou autres images statiques utilisées dans les mises en page.

En supposant que les images de votre blog n’ont pas besoin de la fonction « cliquer pour agrandir » (alias « lightbox »), les images doivent être dimensionnées en fonction de la largeur de la colonne ou de la zone de contenu.

En fonction du thème de votre site et de votre tolérance au vol d’images, vous pouvez réduire ce nombre à un chiffre plus raisonnable de 1200 pixels sur le bord le plus long (soit 1200px en largeur pour les images horizontales, ou 1200px en hauteur pour les images verticales, en conservant leur rapport hauteur/largeur d’origine bien sûr).

La même décision s’applique aux images plus petites utilisées comme vignettes (qui n’ont pas besoin d’être agrandies).

Par exemple, votre site peut afficher quelques vignettes comme c’est le cas sur nos articles ci-dessous.

Sachant qu’elles s’affichent dans une largeur de 260×174 pixels en fonction de la mise en page, vous pouvez télécharger des images d’une taille deux fois supérieure : 520×348 pixels.

Une fois que vous avez déterminé les dimensions en pixels de vos images, vous pouvez commencer à les préparer dans le logiciel de retouche photo de votre choix. Ce qui nous amène au deuxième aspect le plus important, à découvrir dans notre futur Ebook..

S'inscrire à notre Newsletter

Recevez des notifications et restez informés !

Lire plus d'articles

Les 7 avantages de WordPress pour créer votre site internet
Site internet

Les 7 avantages de WordPress pour créer votre site internet

L’idée de créer un nouveau site internet peut être excitante, intimidante ou même stressante. Après vous être renseigné, vous vous êtes rendu compte qu’il existant une multitude de plateformes parmi lesquelles choisir mais il y a une plateforme qui ressort souvent : WordPress.

Aujourd’hui nous allons voir ensemble si WordPress est fait pour vous ! Bien qu’il ne soit pas vraiment possible de citer toutes les raisons qui font que plus de 40% des sites internet utilisent WordPress, nous allons voir ensemble les 7 plus gros avantages de WordPress sur la concurrence.

7 raisons de mettre à jour votre site web en 2022
Site internet

7 raisons de mettre à jour votre site web en 2022

Récemment, un client nous a demandé « Pourquoi dois-je mettre à jour régulièrement mon site internet? ».

Il fut surpris de ma réponse quand je lui expliqua qu’il n’avait pas BESOIN de le mettre à jour mais qu’il DEVRAIT le mettre à jour.

Votre site internet est votre vitrine pour impressionner des prospects ou même vos clients actuels, l’image que vous souhaitez afficher dépend uniquement de vous.

Avis Google : pourquoi et comment y répondre
Marketing digital

Avis Google : pourquoi et comment y répondre ?

Les commentaires des clients exprimés par le biais des avis Google sont l’une des sources d’informations les plus importantes qui influencent la perception des consommateurs et l’intention d’achat d’une marque. Il est donc important d’en tenir compte. Répondre aux commentaires des clients, positifs ou négatifs, est le plus grand avantage de l’entreprise alors qu’elle cherche à développer son activité et à attirer de nouveaux prospects.

Voulez-vous faire évoluer votre entreprise?

Choisissez une entreprise qui obtiendra des résultats et qui vous parlera avec des mots compréhensibles au lieu de vous noyer sous le vocabulaire compliqué !