--- title: "Optimiser les images pour le web et les performances" date: 2018-09-26 language: fr topics: ["cloud", "data", "howto", "networking", "programming", "server", "web", "webdesign", "work"] source_url: https://willem.com/fr/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/ --- # Optimiser les images pour le web et les performances *Réduire la taille des fichiers avec jpegoptim, optipng, pngcrush et pngquant* > Pour rendre ton site web plus rapide, tu peux le rendre plus léger. Pas avec des polices minuscules, mais avec moins d'octets ! Plus de la moitié du poids d'un site web moyen vient des images. Pourtant, très peu de gens optimisent leurs images pour le web et les performances. Il est temps de voir combien d'octets tu peux économiser ! ## Optimiser ton site web Si tu optimises ton site web, il se chargera plus vite. Comme beaucoup de gens préfèrent les sites rapides, les moteurs de recherche comme Google ont commencé à mesurer la vitesse des pages pour déterminer le classement de ton site dans les résultats de recherche. ### Taille moyenne d'une page Beaucoup de créateurs de sites se concentrent d'abord sur le HTML et les scripts, mais la majeure partie du poids d'un site web moyen est constituée d'images (source : HttpArchive (https://httparchive.org/reports/page-weight), poids des pages, septembre 2018). ![Poids moyen d'une page web, réparti par type de ressource (HttpArchive, septembre 2018)](https://willem.com/global/images/ec02ee9672ec.webp) Une optimisation efficace des images peut donc avoir des effets incroyables sur la vitesse de ton site web. ## Qu'est-ce que l'optimisation d'images ? Une image numérique ressemble à un échiquier, un rectangle de 8x8 cases noires et blanches. Si tu enregistrais l'échiquier sans compression, tu noterais la couleur de chaque case une par une (« case un blanche, case deux noire, case trois blanche, case cinq noire, etc. »). Il faudrait 64 lignes pour décrire tout l'échiquier : c'est exact, mais pas très efficace. ![Les images bitmap sont comme des échiquiers, dont les pixels sont les cases](https://willem.com/global/images/e94033e684f1.webp) Optimiser une image, c'est trouver des façons plus efficaces de décrire ses couleurs. Tu pourrais décrire tout l'échiquier en une ligne de texte : « alterne noir et blanc, commence par blanc », ou même plus efficacement : « répète blanc, noir ». Pour les images numériques, on appelle ça la compression : l'algorithme essaie d'identifier des séquences de couleurs qui se répètent. Il existe différents algorithmes, avec chacun leurs forces et leurs faiblesses. Certains sont meilleurs pour les photos (avec des millions de couleurs), d'autres pour les images avec beaucoup moins de couleurs différentes (comme une diapositive PowerPoint). Choisir le bon algorithme, c'est ton premier gain de performances. ## Formats d'image courants - **JPG** est un type de fichier image très courant, avec une compression efficace pour les images qui ont beaucoup de couleurs différentes, comme les photos. Ce format existe depuis 1992 et il est pris en charge par presque tous les appareils. - **GIF** est un autre vieux type de fichier image, développé en 1987. Il est populaire parce qu'il gère l'animation. Techniquement, il est très limité : 256 couleurs différentes par image. - **PNG** a été développé en 1994 pour remplacer le GIF, à cause de la polémique autour de l'algorithme de compression du GIF. Il est populaire parce que presque tous les appareils le prennent en charge et qu'il gère des millions de couleurs, transparence comprise. Il permet une compression sans perte, qui garantit des textes et des lignes nets, ce qui rend ce format parfait pour les graphiques et les logos. Récemment, Google (WebP) et Apple (HEIF) ont introduit de nouveaux formats d'image qui offrent une compression encore meilleure que JPG, GIF et PNG. Mais ces formats ne sont pas encore largement adoptés. ## Choisir le bon format d'image Le meilleur format dépend du contenu réel de ton image. Il n'existe pas de règle universelle qui détermine le meilleur format pour une image donnée. Le mieux est d'essayer toi-même : regarde ce qui arrive à la taille du fichier quand tu enregistres ton image dans différents formats. Beaucoup de programmes de bureau te laissent choisir un format quand tu sélectionnes « Enregistrer sous ». Tu peux commencer par JPG pour les photos et PNG pour les images avec moins de couleurs, comme un logo, un graphique ou une diapositive PowerPoint. Des formats comme JPG proposent différents niveaux de qualité de compression, qui influencent la qualité de l'image et la taille du fichier. Un réglage de qualité plus bas diminue la qualité de l'image au profit d'un fichier plus petit : essaie de trouver le bon équilibre entre qualité et taille. ### Compression avec et sans perte Les algorithmes de compression qui sacrifient de la qualité pour réduire la taille du fichier s'appellent des algorithmes de **compression avec perte**. À l'inverse, ceux qui préservent la qualité d'origine de l'image s'appellent des algorithmes de **compression sans perte**. ## Comment optimiser les images Une fois que tu as ton image JPG ou PNG, tu peux l'optimiser en choisissant les bons réglages pour l'algorithme de compression. Pas d'inquiétude, tu n'as pas besoin de le faire à la main : des logiciels d'optimisation automatique trouvent les réglages de compression optimaux pour une image donnée. ### Optimiser les images JPG Si tu utilises Photoshop, tu peux utiliser sa fonction intégrée **Enregistrer pour le web** pour obtenir une image JPG raisonnablement optimisée. Tu peux aussi utiliser un utilitaire en ligne de commande comme **jpegoptim**. Cet outil réduit les fichiers JPG en optimisant les tables de Huffman internes, ce qui améliore concrètement les performances de l'algorithme de compression. En moyenne, tu peux compter sur un gain de 10 à 15 % sans perte de qualité d'image. Une autre façon d'optimiser les images JPG, c'est d'utiliser un optimiseur en ligne, comme TinyJPG (https://tinyjpg.com) ou ImageOptim (https://imageoptim.com/api). Si tu utilises WordPress, pense à un plugin qui optimise les images à ta place, comme **Imagify** de xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/). ### Optimiser les images PNG Les fichiers PNG peuvent être optimisés avec Photoshop grâce à la fonction **Enregistrer pour le web**. Pour optimiser encore mieux tes fichiers PNG, tu peux utiliser une appli spécialisée, comme ImageAlpha (https://pngmini.com) pour Mac ou PNGGauntlet (https://pnggauntlet.com) pour Windows. Il existe des optimiseurs en ligne pour les fichiers PNG, comme TinyPNG (https://tinypng.com) et Compressor.io (https://compressor.io). Tu peux aussi utiliser des programmes en ligne de commande comme **optipng**, **pngcrush** ou **pngquant**. Ça vaut la peine de creuser un peu plus ces outils PNG. ## Test : optipng contre pngcrush contre pngquant Dans mon travail de développeur web, j'intègre l'optimisation d'images dans des systèmes de gestion de contenu, pour que mes clients aient plus facilement leurs images optimisées automatiquement. Comme le nombre de clients a beaucoup augmenté, j'ai rencontré des problèmes de performances. Pour gagner en performances, j'ai décidé de tester **optipng**, **pngcrush** et **pngquant**. J'espérais trouver une bonne optimisation d'images en demandant moins de puissance de calcul au serveur. Ça améliorerait les performances pour mes clients. ### PACE-CME L'un de ces clients est PACE-CME, un site web (https://pace-cme.org) de ressources pour la formation cardiovasculaire des médecins. Ce site contient des milliers de diapositives PowerPoint enregistrées en fichiers PNG. ![Diapositive typique sur pace-cme.org](https://willem.com/global/images/3640b9482061.webp) Pour tester les performances, j'ai utilisé une image de test spéciale, plus grande et plus lourde qu'une diapositive PowerPoint typique. C'est une image haute résolution au contenu mixte, composée en partie de photos, de texte et d'aplats de couleur. ![Image de test, avec des aplats de couleur, des photos et du texte](https://willem.com/global/images/4c08bf11faa4.webp) ### Méthode J'ai fait les tests sur un serveur Intel XEON quadricœur avec 8 Go de RAM. Pour chaque outil d'optimisation PNG, j'ai utilisé à la fois les réglages les plus **extrêmes** (pour voir ce qu'il peut faire sur la taille du fichier) et ses réglages **par défaut** (pour voir à quel point les réglages par défaut sont plus rapides, et comment leur résultat se compare aux meilleurs réglages de compression). ### Résultats - image de test **originale** 2897 Ko - **optipng** extrême (-o7) : 2510 Ko en 2 minutes 36 secondes / par défaut : 2536 Ko en 4,9 secondes - **pngcrush** extrême (-brute) : 2510 Ko en 1 minute 42 secondes / par défaut : 2531 Ko en 9,2 secondes - **pngquant** extrême (-s 1) : 744 Ko en 5,2 secondes / par défaut : 746 Ko en 4,2 secondes Les performances de pngquant sont impressionnantes : il est beaucoup plus rapide et donne en plus un fichier bien plus petit. Ce n'est pas de la magie, il utilise simplement un autre algorithme de compression, avec perte. Cela veut dire que les images optimisées avec pngquant perdent un peu de qualité. Je les ai comparées de près et je n'ai pas vu la différence. ![Contrôle de la qualité : à gauche l'original, à droite pngquant](https://willem.com/global/images/19c8b9866186.webp) ## Conclusion Optimiser les images pour le web et les performances est vraiment important. Mes tests le montrent : choisir le bon algorithme peut tout changer. Pour moi, ça voulait dire choisir pngquant, mais ton choix peut être différent selon le type d'images que tu veux optimiser. Ce qu'il faut retenir de cet article, c'est donc de prendre soin de tes images. Ton site web sera beaucoup plus rapide, et qui n'aime pas un site web rapide ?