Comme vous le savez, les internautes ont adopté le Web pour ses informations variées et… sa formidable vitesse. Sur le Web, toutes les secondes d’attente paraissent une éternité.
Si vous accélérez le chargement de votre site et augmentez ainsi sa vitesse de navigation, vous favorisez alors la fréquence des visites et la recherche sur votre site. Pas mal, n’est-ce pas?
Cet article vous propose quelques méthodes faciles d’application pour augmenter la performance du temps de chargement de votre site. Vous y trouverez des renseignements pour intervenir sur les images qu’il contient afin d’en diminuer le poids.
Avec des images moins lourdes sur votre site Web, la vitesse de chargement en sera automatiquement améliorée, tant sur téléphone ou tablette que sur ordinateur. De plus en plus d’internautes utilisent leur mobile pour avoir accès à l’information rapidement; selon le site Statscounter – GlobalStats, la navigation se fait sur mobile à 59,77 %, d’où l’importance d’alléger vos informations.
Déterminer la vitesse de vos pages Web
La première étape à effectuer avant d’augmenter la vitesse de chargement des pages de votre site est de l’évaluer. Quelques outils ont été développés en ce sens, mais nous vous proposons d’utiliser celui de Google. Il existe depuis de nombreuses années et est bien connu des développeurs Web.
L’outil de Google analyse plusieurs critères qui ont une influence sur la vitesse de chargement des pages. Nous vous suggérons de considérer ceux-ci en particulier :
- Le temps de réponse du serveur
- Le délai requis pour que les premiers contenus s’affichent
- La dimension des images
- Les images aux formats « nouvelle génération » (Webp, etc.)
- Le nombre de fichiers à télécharger (css, JavaScript, etc.)
Une fois cela fait, il est possible d’intervenir sur un ou sur plusieurs de ces critères.
Les renseignements qui suivent portent sur le format des images (JPG, PNG), sur leur possible conversion à un format encore plus performant (SVG) et à celui de « nouvelle génération » (Webp) ainsi que sur les changements de dimension des images.
Près de 90 % des problèmes de lenteur de chargement des pages Web causés par les images peuvent être réglés par le simple fait de redimensionner ces images et d’en utiliser le format approprié. Ce n’est donc pas à ignorer. Et pourtant, il s’agit des éléments les plus négligés lorsque les administrateurs d’un site ajoutent du nouveau contenu.
Un outil facile d’utilisation et gratuit
Afin de vous permettre d’intervenir sur les images avant de les intégrer à votre site, nous vous proposons d’employer l’outil Paint 3D. Ce logiciel est gratuit, facile d’utilisation et est compatible avec le système PC. Et surtout, il vous évite d’avoir à utiliser Photoshop.
Avec quelques connaissances de base disponibles en tutoriels sur YouTube, vous pourrez ainsi facilement recadrer et redimensionner les images avec Paint 3D.
1-Donner le bon format à l’image
Une première action sur les images consiste à vérifier si le bon format, soit JPG ou PNG, est attribué à l’image. C’est simple, mais très efficace pour réduire le poids de votre image.
|
 |
|
Format JPG : pour une photo d’une personne ou d’un groupe de personnes, un paysage, un animal, un objet, etc. |
Format PNG : pour une illustration avec couleurs en aplat, un logo ou un icône. Le format PNG permet aussi la transparence. |
Effectuer ce simple ajustement a un effet considérable sur la réduction du poids de l’image. Par exemple, pour une photo en format original de 4772 pixels X 2848 pixels :
- En JPG : le poids est 2750 Ko
- En PNG : il est de 19 400 Ko
Bien sûr, la photo peut alors être compressée, ce qui en diminue la qualité. Mais en utilisant le bon taux de compression de l’image, vous éviterez une trop grande perte de qualité. Si vous utilisez Paint 3D, l’application détermine automatiquement le taux de compression requis.
Pour aller plus loin : le format SVG
Plutôt qu’utiliser le format PNG pour les logos et illustrations en vecteur, il est possible de les enregistrer en format SVG. Pour ce faire, vous devez cependant détenir quelques notions plus poussées, puisqu’il est nécessaire de partir du fichier original en vecteur et de travailler avec un logiciel spécialisé, comme Illustrator.
Vous bénéficiez de plusieurs avantages à utiliser le format SVG :
- L’image reste en vecteur, et non en pixels comme pour les PNG.
- Une image en vecteur est beaucoup moins lourde.
- La qualité demeure, peu importe le format utilisé (grand, moyen ou petit).
SI vous souhaitez transformer un fichier PNG en un format SVG, mais que vous n’en avez pas la possibilité, demandez à votre graphiste de faire ces modifications. Ce sont des tâches qui font partie de ses compétences.
Les formats d’images « nouvelle génération »
Il est également possible de convertir les images au format Webp qui est le format idéal pour les appareils mobiles. La méthode la plus simple pour y parvenir est d’utiliser une extension qui génère automatiquement ce format d’image lors de l’intégration. Et il est plus facile de le faire sur les sites bâtis avec WordPress.
2- Modifier la dimension des images
En plus de modifier le format de l’image, il est aussi utile de la redimensionner au format approprié afin d’en diminuer davantage le poids. Ce format est plus petit que les normes courantes des photos ou des illustrations, qui, elles, peuvent aller jusqu’à 6500 pixels de large, et même parfois plus.
En comparaison, voici les dimensions principales des écrans d’ordinateur :
- Écran standard de 23 pouces – 1920 x 1080 pixels
- Écran HD de 23 pouces – 2560 x 1440 pixels
- Écran standard de 27 pouces – 2560 x 1440 pixels
- Écran HD de 27 pouces – 3840 x 2160 pixels. Bien sûr, l’utilisation d’un écran HD de 27 pouces ne représente pas la norme.
Par exemple, si l’on reprend l’exemple de l’image de 4772 pixels et qu’on la réduit à une dimension de 2560 pixels, elle passe de 2750 Ko à 1350 Ko. Vous sauvez ainsi un peu plus de la moitié du poids de l’image originale. Et s’il s’agit d’une image de format PNG, les résultats en perte de poids sont également très significatifs.
Si vous multipliez ces gains par le nombre d’images utilisées dans chacune de vos pages Web, le gain total est potentiellement énorme. Et on peut faire encore mieux…
Une grande image n’est pas toujours utile
En effet, il n’est pas toujours nécessaire de réduire les images à 2560 pixels. Ce format de 2560 pixels correspond à la pleine largeur du navigateur sur un écran HD de 23 pouces.
Ainsi, si l’on considère la largeur fixe du contenu texte, qui est généralement autour de 1100 pixels, la largeur nécessaire pour l’image est encore plus petite. L’image aurait alors un poids de 306 Ko. Elle pourrait peut-être même utiliser un tiers de colonne ou une demi-colonne. Dans ces cas, il est possible d’en réduire le format davantage, tout en veillant cependant à ne pas trop le réduire.
Puisque les sites Web sont responsive, il faut également prévoir le rendu sur tablette et sur mobile. Généralement, les colonnes deviennent pleine largeur en mode tablette. On peut donc réduire l’image jusqu’à 980 pixels de large, afin de couvrir la pleine largeur d’une tablette, soit entre 768 et 980 pixels. Cependant, il n’est pas recommandé de la réduire à moins de 980 pixels.
3- Vérifier si le site utilise les srcset pour images
L’attribut srcset, qui fait partie du code de la page, permet d’afficher le format optimal de l’image, selon le média utilisé (téléphone, tablette ou écran). De cette façon, les utilisateurs de votre site Web voient toujours une image de qualité, utilisée de façon optimale, peu importe la plateforme qu’ils utilisent.
Pour des résultats optimaux, il est important de s’assurer que cet attribut est présent dans le code de votre site WordPress ou autres.
Si vous utilisez WordPress, le logiciel génère 3 images supplémentaires, de différents formats lors de l’ajout d’image :
- Thumbnail : 150 pixels x 150 pixels
- Medium : 300 pixels de large
- Large : 1024 pixels de large
L’attribut srcset utilise ces nouvelles images et en applique le format approprié selon l’appareil utilisé pour visionner la page Web.
L’importance de redimensionner l’image selon l’endroit où elle est placée s’applique également ici, car le scrset affichera toujours la meilleure grandeur d’image selon l’écran. Prenons l’exemple d’une image disposée sur un tiers de colonne sur un écran d’ordinateur. On pourrait penser qu’une image de 400 pixels de large serait suffisante, mais elle pourrait être trop petite. Pourquoi?
- Par défaut, une image Web n’est jamais affichée à plus de 100 %, donc 400 pixels. Cette dimension équivaut approximativement à la largeur d’un tiers de colonne (1200 pixels divisés par 3).
- Par contre, lorsque cette image est vue sur une tablette, le tiers de colonne est généralement redisposé pour occuper la pleine largeur de la tablette (soit entre 768 et 980 pixels). Puisque l’image a une largeur originale de 400 pixels, elle ne couvre alors que la moitié de l’écran d’une tablette. C’est peut-être l’effet souhaité. Par contre, si l’on désire que l’image couvre la pleine largeur de la tablette, le format approprié serait donc environ 810 pixels.
- L’attribut srcset affiche donc l’image originale pour les tablettes. Tandis que le format moyen (medium) est utilisé pour les mobiles et dans les colonnes de moins de 300 pixels. Dans ce cas-ci, notre image de référence aurait un poids de 175 Ko.
4- Optimiser l’image avec des outils en ligne
Une fois l’image réduite à la largeur désirée, on peut encore faire un gain supplémentaire en termes de diminution de poids.
Par exemple, un outil comme tinypng vous permet d’optimiser vos images JPG, PNG ou Webp et d’en réduire le poids de 30 à 70 % de plus, selon l’image. Vous pourrez obtenir ce résultat appréciable simplement en téléversant votre image sur le site tinypng.com. Une fois cela fait, il ne vous reste qu’à télécharger votre image finale et à l’insérer dans la page Web de votre site.
Basta communication, présent pour votre performance en ligne
Diminuer le temps de chargement des pages de votre site Web est un élément majeur de votre performance en ligne. Et intervenir sur le poids des images qu’il contient permet d’y parvenir facilement. Pour d’autres solutions ou questions concernant votre site, n’hésitez pas à nous contacter.
