Optimiser ses images pour le Web

Sommaire

  1. Quels sont les avantages de l'optimisation web ?
  2. Les bonnes pratiques à mettre en place
    1. Poids et taille optimale
    2. Format du fichier
    3. Recadrer l'image
    4. Compresser l'image
  3. Source 

 

Quels sont les avantages de l'optimisation web ?

    Les grosses images ralentissent vos pages Web, ce qui crée une expérience utilisateur moins qu’optimale. L’optimisation des images est le processus qui consiste à diminuer la taille du fichier. Les principaux avantages sont les suivants :

    • améliorer votre vitesse de chargement des pages
    • améliorer votre référencement, un site rapide et moins lourds est mieux classé par Google
    • simplifier la création de sauvegardes car elle sera plus rapide
    • alléger le réseau et le navigateur client,  permettant entre autre la lisibilité rapide du site sur smartphone
    • alléger l'espace de stockage des serveurs (pour consommer moins d'électricité et réduire les émissions de CO2).

    Toutes ces démarches ne s'inscrivent pas uniquement dans le but client mais va également dans le sens de la planète. L’impact environnemental du numérique n’est pas toujours connu, pour s’en rendre compte, voici quelques chiffres :

    • Une donnée numérique parcourt en moyenne 15 000 kilomètres.
    • Une recherche Google produit une émission de CO2 de 7 grammes.
    • Les data center français consomment 10 % de l’électricité utilisée dans notre pays.

     

    Les bonnes pratiques à mettre en place

    Avant d'uploader une image sur votre site, voici un une checklist récapitulative des bonnes pratique.

     

     

    Poids et taille optimale

    Selon votre image et son emplacement d'affichage, la taille et le poids peuvent varier. Voici globalement un tableau récapitulatif selon le composant à afficher sur votre site :

    Composant graphique Poids max Poids recommandée Largeur Max
    Image full screen background 1mo 150 ko 2000px
    Image large / image en background 1mo 150 ko Taille de l'encart ou elle doit s'afficher
    Petite image / icône 300ko 20 ko 150px

     

     

     

    Format du fichier

    Deux types de fichiers à retenir : le JPG et le PNG.

    JPG

    Pour tout ce qui est photographie, privilégiez le format JPG.
    Il peut supporter toutes les couleurs d'une photo, le tout dans un petit fichier efficient.

    PNG

    Pour tout ce qui est plus graphique tels que des logos, des infographies, des bannières etc, privilégiez le format PNG.
    Il peut gérer : beaucoup de couleur, supporte assez bien le zoom et gère la transparence contrairement au JPG.

    Astuce

    Si vous utilisez Photoshop, préférez sauvegarder un PNG en 24bit format pour avoir plus de couleur supporté.

     

     

    D'autres formats ? (SVG, GIF, ...)

    Les autres formats ne sont bien évidemment pas à exclure totalement, il en existe beaucoup d'autres.

    Pour en citer deux autres qui peuvent vous être utiles : Le SVG est un cousin éloigné du PNG. Il est riche en couleur et vous permettra de ne pas perdre en netteté si il a été correctement vectorisé. Le GIF peut vous être utile si vous avez besoin d'une animation mais la qualité est moins bonne que les autres formats.

     

     

    Recadrer l'image

    Une manière efficiente de réduire le poids d'une photo est simplement de la recadrer dans le format d'affichage sur site. Il est contre productif d'afficher une image en 2000px / 2000px si elle est voué à être affiché dans un encart de 150px.

    Astuce

    Des outils en lignes existent pour vous aider à recadrer votre image : https://www.iloveimg.com/crop-image

     

     

    Compresser l'image

    Avant d'uploader votre photo, vous pouvez au préalable la compresser sans perdre de qualité. Cette compression a pour utilité de réduire la redondance des données d’une image (les pixels) afin de pouvoir l’emmagasiner sans occuper beaucoup d’espace ou la transmettre rapidement.

    La compression d’image peut être effectuée de 2 manières : avec perte de données ou sans perte. La compression sans perte est souvent préférable là où la netteté est importante : schémas, dessins techniques, imprimerie, affiches publicitaire, etc. La compression avec perte, plus radicale, est utile pour les transmissions sur des réseaux bas débit. En contre partie, cette dernière méthode peut dégrader la qualité de l’image.

    Mais pas de panique, des outils en lignes de compression peut vous aider à compresser sans perdre de la qualité d'image.

    Outils

    Pour les JPG : Kraken - https://kraken.io/web-interface
    Pour les PNG : Compressor - https://compressor.io

     

     

    Source

    https://kinsta.com/fr/blog/optimiser-les-images-pour-le-web/

    https://www.jimdo.com/blog/optimize-website-images-for-better-design-seo/

    https://themeisle.com/blog/best-online-image-optimizer-tools/