Améliorer la vitesse d’affichage d’un site web en ajustant la taille de vos photos:
un + pour le SEO
La vitesse d’affichage est un critère essentiel dans l’optimisation de votre référencement internet : la réduction de vos photos à 360 px, 500 px ou 900 px est un principe simple pour améliorer ce temps d'affichage. Yaseo vous conseille.
Les moteurs de recherche, dont Google, prennent en compte ce temps d’affichage dans leurs algorithmes de classement des résultats. Si l’on prend en considération deux sites aux mots clés équivalents, le site au temps d’affichage très long aura un mauvais référencement SEO alors que celui qui s’affichera très vite aura des résultats SEO beaucoup plus intéressants (position en première page de Google par exemple).
Une astuce simple qui ne requiert aucun frais supplémentaire est de bien optimiser la taille et le format de vos fichiers photos.
NB : Cela s’avère encore plus important pour la simple lecture de vos pages, notamment sur mobile, lorsque la connexion peut être limitée à 3 ou 4G. Personne ne sera suffisamment patient aujourd’hui pour attendre 5 secondes, le temps que votre page s’affiche.
Comment connaître la vitesse d’affichage de mon site ?
Il existe plusieurs outils en ligne proposant une estimation de la vitesse d’affichage d’un site. Parmi les plus courants :
- https://pagespeed.web.dev/ (en français)
- https://gtmetrix.com/
- https://tools.pingdom.com/ (vous pourrez choisir un lieu d’origine pour ce test)
Chaque analyse vous indiquera un score et les parties techniques nécessitant une amélioration. La plupart du temps, c’est le poids de vos fichiers images qui représente la plus longue attente de chargement. C’est pourquoi il est indispensable de savoir optimiser ces fichiers images / photos pour gagner quelques secondes ou millisecondes de chargement !
Une dimension de photos raisonnable
pour un poids raisonnable
Aujourd’hui, il est relativement aisé de prendre une photo avec un mobile, en haute définition, puis de l’envoyer sur la page d’un site web. Problème : une photo HD pèsera entre 1,5 et 4 Mo, alors qu’un poids maximum d’image pour le web doit plutôt rester autour de 180 Ko si l’on veut obtenir les meilleures performances d’affichage.
Voici la méthode pour gérer vos fichiers photos spécialement pour votre site web :
- Prenez votre photo HD avec votre mobile (en conservant la qualité HD si vous pensez utiliser ces photos pour faire des imprimés)
- Modifiez la dimension de cette photo :
- Sur votre mobile : en choisissant une résolution basse, et un ratio d’image à 20% de la dimension initiale.
- Si vous n’avez pas d’option pour redimensionner une image sur mobile, vous pouvez après un transfert vers votre ordinateur, faire le nécessaire avec un logiciel simple comme Paint.
- Une autre solution encore est d’utiliser une des applications en ligne permettant de redimensionner une image en ligne - Connectez-vous à votre gestion de site web et placez cette image redimensionnée, qui est maintenant passée sous les 500 ko, peut-être même sous les 200 ko. Ou bien remplacez une image précédente, trop lourde, par cette nouvelle image.
Rappel des résolutions d’écran
Une résolution d’écran comporte deux indicateurs : le nombre de pixels sur la ligne horizontale de la largeur de votre écran, et un autre nombre de pixels, sur la ligne verticale de la hauteur de votre écran.
Il existe une vingtaine de résolutions d’écran, mais les plus courantes sont : 1920 pixels de large, puis 1366 pixels en taille intermédiaire, et 1280 pixels pour des écrans plus petits. Il existe bien sûr des écrans de résolution supérieure, mais ils sont rares, et généralement, leurs utilisateurs regarderont les sites internet en restant sur une résolution 1920 px, qui est la plus courante.
Dès lors, vous savez que vos photos ne doivent jamais avoir une largeur supérieure à 1920 pixels pour internet.
Le choix d'avoir une photo de 1920 px de large ne sert que pour des images que vous souhaitez voir en pleine largeur ou en plein écran sur votre site, pour une belle mise en avant de vos produits, services, magasin etc.
En règle générale, quand vous réalisez une mise en page avec texte et images, vous aurez plutôt 3 types de dimension d'images que je vous présente ici, dans l'hypothèse d'un site calibré sur une largeur utile de 1280 px :
Pour une mise en page sur 100 % de large :
vous pouvez choisir une largeur de 900 px
Mise en page sur deux colonnes 50% / 50% :
vous pouvez choisir une largeur de 500 px
Mise en page sur trois colonnes ou 2/3 - 1/3 :
vous pouvez choisir une largeur de 340 ou 360 px
L'affichage sur mobiles
Les résolutions d'écrans smartphones sont très nombreuses. En règle général, la largeur utile sera de 300 à 360 px de large. Notez toutefois que certains écrans HD ont des densités plus élevées (Retina chez Apple, Amoled chez Samsung), ce qui nécessite de doubler la taille d'image pour conserver une qualité optimum : dès lors, pour avoir une image affichée en 400x300 px, votre fichier photo préparé et mis en ligne aura en réalité une dimension de 800x600.
Choisir un format d'enregistrement adéquat
Pour internet, il existe plusieurs formats d’enregistrement d’un fichier image, d’une photo. Voici ceux qu’il faut privilégier :
Format JPG ou JPEG
Idéal pour une photo couleur classique.
Attention : en plus d’une redimension largeur / hauteur comme vu précédemment, vous pouvez au moment d’enregistrer votre fichier image, choisir de la compresser : vous perdrez en qualité (zone floue, zone pixelisée) mais vous diminuerez encore de cette manière le poids de votre fichier. En général, la compression ne doit pas aller au-delà de 50% de perte de qualité.
Format GIF
Idéal pour des images monochromes (noir et blanc) ou avec deux, trois couleurs en aplat, ou pour des schémas, des graphiques. Il suffit de tester en enregistrant une même image en JPG puis en GIF et de constater quel est le poids le plus bas entre les deux.
Format PNG
Idéal pour des photos ou dessins avec des zones en transparence. Par contre, le format PNG est l’un des plus lourd en termes de poids de fichier. A éviter en très grande taille d’image.
Formats spécifiques WEBP ou AVIF
En 2010, Google a développé le format WEBP spécifique pour internet, mieux adapté que les compresseurs précédents. Ce format permet de gagner encore en légèreté, avec très peu de perte de qualité. Tous les formats indiqués (JPG, GIF, PNG) peuvent être convertis en WebP.
Attention : ce format ne s’affichera pas sur les navigateurs les plus anciens. Vous trouverez ici une liste des principales versions de navigateurs compatibles WebP :
- Google Chrome version 23 et ultérieures (desktop)
- Microsoft Edge version 18 et ultérieures
- Firefox version 65 et ultérieures.
- Safari version14 et ultérieures
- Chrome pour Android version 25 ou ultérieures
- Navigateur Web natif, Android version 4.0 et ultérieures
- iOS version 14 et ultérieures
En 2019, le consortium Alliance for Open Media a mis au point le format AVIF, ultra performant, pour un affichage encore plus rapide.
Là encore, seuls des navigateurs récents afficheront ce format correctement :
- Google Chrome version 85 et ultérieures (desktop)
- Microsoft Edge version 121 et ultérieures
- Firefox version 93 et ultérieures
- Safari version16.4 et ultérieures
- Chrome pour Android version 89 ou ultérieures
- iOS version 16 et ultérieures
Comment convertir une image au format WebP ou AVIF ?
Il existe de nombreux convertisseurs gratuits en ligne, pour WebP et pour Avif. Vous trouverez sûrement celui qui vous convient !
Vous êtes maintenant prêtes et prêts pour mettre toutes les chances de votre côté grâce à ces améliorations qui facilitent la lisibilité de votre site. Votre score SEO y gagnera quelques points, et peut-être aurez-vous plus de contacts clients depuis votre site !
Mais ce n’est qu’une étape dans votre optimisation SEO…
Plus d’info sur la stratégie webmarketing SEO
Choisir la rédaction web externalisée
