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.
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.
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.
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).
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 ?
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.
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.
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.
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.).
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).
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..
Tout le monde veut améliorer les performances de son ordinateur mais peu de personnes savent par où commencer. TechTurn vous donne 9 étapes pour commencer ce processus.
Le référencement ou SEO intéresse de nombreuses entreprises afin de se positionner de façon durable dans les résultats des moteurs de recherche. TechTurn vous explique ce que c’est afin de mieux comprendre en quoi le référencement peut vous aider à performer sur internet.
Que vous soyez une grande entreprise ou une petite, vous pouvez être la cible d’une cyber-attaque. Savez-vous comment réagir si tel est le cas?
