Bien optimiser vos images pour le web

01/05/2015
par Joris Tricoire
Tutoriel

J’ai choisi d’illustrer cet article avec la carte « Gorille de Beringeï » 3e édition bords noirs du jeu « Magic The Gathering » pour faire plaisir à mon grand frère ainsi qu’au parrain de ma fille, à Quentin et à Romain.

 

 

Le rapport poids /qualité

 

Nous sommes nombreux à publier des images régulièrement sur les internets. Sur les réseaux sociaux (Facebook, Twitter, Instagram, Google +…) on ne se pose même pas la question du format et de la compression, ils s’occupent de tout. D’ailleurs, Facebook est fréquemment critiqué pour son algorithme de traitement des images trop destructeur.

 

Mais lorsque vous publiez sur votre blog ou votre site internet, c’est vous qui avez la main. Vous devez vous-même compresser vos images, et c’est là que des mauvais choix peuvent réduire vos efforts d’écriture à néant. Une image trop compressée ne valorisera pas votre contenu. Au contraire une image en trop grande définition sera trop longue à charger et bons nombres d’internautes quitteront votre page avant d’avoir pu la lire. Le défi des images sur le web est donc d’obtenir le meilleur rapport POIDS / QUALITÉ

 

À gauche l'image à été compressée très fortement pour un poids de  7Ko. Au milieu avec une compression moyenne on obtient un poids de 25ko À droite avec une compression très faible on obtient un poids de 90ko.

À gauche l’image a été compressée très fortement pour un poids de 7Ko.
Au milieu avec une compression moyenne on obtient un poids de 25ko
À droite avec une compression très faible on obtient un poids de 90ko.

 

On remarque que l’image de gauche, bien que très légère, est totalement illisible tellement elle est compressée. Sur les deux autres images, le texte est bien lisible, l’image semble nette (cliquez sur l’image pour l’afficher en grand). Donc, l’idéal est de choisir l’image du milieu vu qu’elle est 3 fois moins lourde !

 

D’accord, mais alors comment obtenir le meilleur rapport poids/qualité ?

 

 

 

Mettre le bon nombre de pixels

 

La taille d’une image sur un écran se définit par son nombre de pixels. Votre site internet affichera, s’il est bien fait, vos images à une largeur définie, quelle que soit leur taille d’origine (oublions le responsive pour ne pas compliquer inutilement). Donc si vous uploadez une image de 4000 pixels sur votre blog (dimension classique d’un appareil photo numérique), celle-ci s’affichera à 600 pixels (largeur standard d’un article de blog). Vous aurez donc téléchargé une photo bien trop grande qui va ralentir inutilement le chargement de la page.

Pour solutionner ce problème, faites un tour dans Photoshop dans l’onglet « image > taille de l’image » et réduisez votre image au bon nombre de pixels. La taille en cm et la définition importent peu, ce qui compte, c’est la hauteur et la largeur en pixel. Veillez à bien cocher la case « rééchantillonnage » pour pouvoir modifier les dimensions en pixels.

 

fenêtre taille de l'image

 

 

 

Gif, jpg ou png ?

 

Une fois l’image à la bonne taille, il faut l’enregistrer au bon format. Le jpg, bien qu’étant le plus répandu, n’est pas toujours le plus adapté.

 

Le png : choisissez ce format pour sa capacité à supporter les transparences. En effet, avec ses 256 niveaux de transparence, vous pourrez placer vos images détourées sur le fond de couleur de votre site avec un rendu de bonne qualité. Par contre ce format n’est d’aucune utilité pour les images non détourées car le poids du fichier est bien supérieur à celui d’un jpg.

 

Exemple d'image png

Exemple d’image png

 

Le gif : star des années 90, le gif est devenu désuet avant de retrouver ses lettres de noblesse ces dernières années. Ce format « magique » permet toutes les élucubrations grâce notamment à sa capacité d’être animé. Il supporte aussi la transparence mais de manière bien moins subtile que le png car il ne comprend que un seul niveau. Il se caractérise aussi par son nombre limité de couleurs. En clair pour une photo, ce n’est pas du tout le format adapté, mais pour une image faite d’aplats, un logo, un pictogramme, une illustration vectorielle, c’est le candidat idéal.

 

Exemple d'image Gif

Exemple d’image Gif

 

Le jpg : format populaire par excellence et indétrôné, le jpg est parfaitement adapté à la compression de photos. Encore faut-il savoir doser le taux de compression pour ne pas trop détruire l’image.

 

Exemple d'image Jpg

Exemple d’image Jpg

 

 

Bien compresser avec Photoshop

 

Il y a un outil génial dans Photoshop, c’est la fonction « enregistrer pour le web » (dans le menu « fichier »). Cela permet d’obtenir les images les plus légères possibles en supprimant des informations superflues dans les métadonnées. Cette fonction permet d’enregistrer dans les différents formats d’image vus plus haut, mais je vais m’attarder sur le jpg qui est le plus intéressant.

 

comparaison enregistrement web ou normal

  • À gauche, l’image de 450px compressée en jpg qualité 4/12 en enregistrement normal = 57ko
  • À droite, l’image de 450px compressée en jpg qualité 40/100 avec la fonction enregistrer pour le web= 35ko

 

Pour un résultat visuellement identique nous obtenons, avec la fonction « enregistrer pour le web », un fichier 40% plus léger !

 

C’est magique ! Alors voyons comment se présente « enregistrer pour le web ».

 

Vous avez devant vous 4 vignettes d’images montrant 4 niveaux de compressions (le poids apparaît sous chaque image). Le jugement du meilleur rapport se fait à l’œil. Vous avez à droite un curseur de compression (qualité). Attention à ne pas avoir la main trop lourde sur la compression. Une image trop compressée n’est pas valorisante. Il faut compresser juste ce qu’il faut pour ne pas que la compression se voit.

 

Fenêtre d'enregistrement pour le web

Dans l’exemple ci-dessus j’estime que la meilleure compression est en bas à gauche, soit qualité : 50 pour 20Ko .

 

Il y a aussi tout un tas d’options plus ou moins utiles mais je ne m’attarderai pas ici à les décrire, l’essentiel est de choisir le bon format et la bonne compression.

Cliquez sur enregistrer (avec un nom compatible web, c’est-à-dire sans espace ni accent) et voilà, c’est fini. Plus qu’à uploader sur votre site. Vous verrez à quel point c’est agréable de voir votre page se charger rapidement.

 

 

 

 

L’astuce du graphiste qui déchire !

 

Dans le combat du rapport poids/qualité que mènent les graphistes du monde entier (pas les développeurs, ceux-ci se fichent éperdument de la qualité, seul le poids compte pour eux, grrr), certains ont trouvé une solution très efficace.

 

Contrairement à ce que je vous ai dit plus haut, au lieu de mettre l’image au bon format du site (exemple 600px), il faut la mettre deux fois plus grande (1200px) et l’enregistrer en jpg très compressé (qualité : 5 ou 10%). L’algorithme de compression jpg étant très puissant, l’image sera très légère mais elle sera aussi très compressée. Mais comme l’image visible sur le site sera réduite de moitié (affichée à 600px) alors la compression ne se verra pas. Et paf, magie !

 

jpg-q40-900px

Exemple d’image de 900px, qualité 40 = 77ko

 

 

jpg-q0-1500px

Exemple d’image de 1500 px, qualité 0 = 63ko

 

L’image de 1500px est 20% plus légère et visuellement aussi belle.

 

Alors tous à vos Photoshop et bonne compression  🙂

photoshop
tuto
web
  13 472
  • Pingback: Méthodo Mettre en page | Pearltrees()

  • Pingback: Aides logiciels | Pearltrees()

  • Pingback: Développement/Ergonomie | Pearltrees()

  • Grégoire Noyelle

    Bonjour
    Merci pour l’astuce. Mais vous ne parlez pas de la résolution (pixels par pouce). Est-ce important dans votre cas?

    • Orignal_Communication

      La résolution des images n’est pas prise en compte sur le web, seule la dimension en pixel est importante. Pour la simple et bonne raison qu’un écran est composé de pixels, donc si une image fait 500 px, l’écran l’affichera tout simplement sur 500px, et ce, quelque soit la densité de pixels de l’écran et la résolution de l’image. Simple non ?
      Bon, il est vrai que depuis l’avénement des écrans à haute densité sur les smartphones et tablettes, les choses sont devenues beaucoup plus complexes. Les écrans trichent sur leur taille réelle en pixels dans le but de d’améliorer la lecture des sites sur des petits écrans. Cela à pour effet de zoomer sur les images et donc de les rendre floues. Différentes techniques existent pour régler le problème, mais c’est ce n’était pas le sujet de cet article.
      Alors oubliez ça et bonne compression !

      • Grégoire Noyelle

        Super. Merci beaucoup pour votre réponse. Je me posais la question avec les écrans retina justement.

  • Julien

    HELLO. Trés bon article trés utile je vous remercie. Ma question est la suivante. Quel poids doit avoir une photo pour rester de qualité tout en ne ralentissant pas le site. Je me doute que cela dépend de la technique du site, de l’hébergement … mais globalement.? je suis parti sur entre 40 et 50 Ko? Est ce correct? Merci

    • Orignal_Communication

      Bonjour,
      La question est intéressante mais c’est une question piège. C’est comme demander le prix d’une voiture. Entre une vieille voiture d’occasion avec beaucoup de kilomètres et une grosse BMW toute neuve, il y a un pont.
      Donc si votre image est un logo de 100 px 50ko c’est beaucoup. Si c’est une photo de 2000px c’est peu. Tout dépend aussi du nombres d’images que vous avez sur la page. Si vous avez 30 images, mieux vaut compresser beaucoup quitte à perdre en qualité. Si vous avez 2 images, autant avoir des images jolies et peu compressées.
      Ensuite c’est aussi une question de choix perso. Un développeur n’hésitera pas à compresser fortement les photos pour gagner en rapidité de chargement alors qu’un photographe préférera faire attendre un peu plus l’internaute pour ne pas perdre les détails de ses clichés.
      Actuellement je pense qu’une page doit mettre entre 1 et 2 secondes à charger pour ne pas gêner l’internaute (sachant que si c’est 0,5 sec c’est encore mieux). Au-delà de 5 sec ça devient vraiment désagréable. De ombreux sites peuvent vous aider à calculer ça.

      Bref, il y a pleins de paramètres mais je dirait que grosso modo 40ko pour une image de 500px est bien. Mais il faut avant tout se fier à l’œil. Quelle compression est acceptable à votre œil ? Bonne compressions !

    • Le problème du poids se pose sur l’ensemble d’une page. Lorsque qu’un internaute se connecte il télécharge plein de chose pour afficher la page dont les images et le code. C’est donc le total du poids de vos image qui compte. Si il s’agit d’un article de blog avec juste une grande image en haut, elle peut être assez lourde, la page se chargera quand même vite. Si vous avez un ecommerce ou une galerie de visuels, là chaque image devra être bien optimisée. Tout ça pour dire qu’il n’y a pas de poids d’image idéal. 50ko pour une image de 2000 pixels de large risque d’être trop compressé et moche. 50ko pour une vignette de 200 pixels de large est trop. Il existe des sites pour calculer la vitesse de chargement d’une page en fonction de son poids mais je n’en ai pas là sous la main.

      Aujourd’hui il n’y a pas que le poids des images qui ralentissent les sites mais aussi le poids du code qui est de plus en plus complexe et riche.

  • Pingback: Méthodes | Pearltrees()

  • Moreau

    Monsieur,

    Votre article est excellent; je vous en remercie beaucoup.
    Seulement, je suis tombé sur un os; en réglant la qualité d’une image qui doit servir d’image d’accueil pour un site, la totalité de l’image reste de très bonne qualité même si je descend jusqu’à 30, sauf un aplat rouge pourtant bien uni dont les pixels deviennent irréguliers. Ce qui est fort ennuyeux, car je suis obligé de maintenir une qualité assez haute et du coup un poids fort élevé.
    Je vous saurais gré, si vous pouviez m’aider.

    • Le jpg n’aime pas trop tout ce qui est aplat de couleur car il a tendance à réer des artefacts visibles à l’œil. C’est pour ça que le Gif est idéal pour les illustration en aplat. Malheureusement si votre image est une photo avec une zone riche en couleur et une zone d’aplat le jpg risque d’être plus efficace que le gif malgré tout. Il n’y a pas de miracle il faut que vous compressiez au maximum que ce que vous trouvez acceptable visuellement, tan pis si vous n’arrivez pas à obtenir un poids trop faible. La dernière astuce du tuto, qui consiste à faire une image plus grande que nécessaire mais très compressée, pourrait s’avérer très utile dans votre cas je pense.

  • Elise

    Merci pour cet article complet et agréable à lire. Je ne connaissais pas la dernière astuce, ça peut servir 🙂

  • Pingback: Optimiser les images pour le web – Amazony.fr()

  • Pingback: Réduire le Temps de chargement grâce à l’Optimisation des Images()