{ "id": 37022, "slug": "2018-09-26_optimiser-les-images-pour-le-web-et-les-performances", "url": "https://agents.willem.com/fr/posts/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/", "source_url": "https://willem.com/fr/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/", "language": "fr", "date": "2018-09-26", "published": "2018-09-26T00:00:00+02:00", "created": "2025-06-26T22:10:20.991000+02:00", "updated": "2026-10-20T09:19:12.822000+02:00", "title": "Optimiser les images pour le web et les performances", "subtitle": "Réduire la taille des fichiers avec jpegoptim, optipng, pngcrush et pngquant", "summary": "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 !", "topics": [ "cloud", "data", "howto", "networking", "programming", "server", "web", "webdesign", "work" ], "author": { "name": "Willem L. Middelkoop", "url": "https://willem.com" }, "provenance": { "kind": "model", "method": "Claude Sonnet, two passes (translation, then proofreading) against a glossary and hunspell", "date": "2026-10-20", "reviewed_by_native_reader": false, "language": "fr", "source_language": "en" }, "translations": [ { "language": "en", "title": "Optimising images for the web and performance", "url": "https://agents.willem.com/en/posts/2018-09-26_optimising-images-for-the-web-and-performance/", "source_url": "https://willem.com/en/2018-09-26_optimising-images-for-the-web-and-performance/" }, { "language": "nl", "title": "Afbeeldingen optimaliseren voor web en performance", "url": "https://agents.willem.com/nl/posts/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/", "source_url": "https://willem.com/nl/2018-09-26_afbeeldingen-optimaliseren-voor-web-en-performance/" }, { "language": "de", "title": "Bilder für Web und Performance optimieren", "url": "https://agents.willem.com/de/posts/2018-09-26_bilder-fur-web-und-performance-optimieren/", "source_url": "https://willem.com/de/2018-09-26_bilder-fur-web-und-performance-optimieren/" }, { "language": "es", "title": "Optimización de imágenes para la web y el rendimiento", "url": "https://agents.willem.com/es/posts/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/", "source_url": "https://willem.com/es/2018-09-26_optimizacion-de-imagenes-para-la-web-y-el-rendimiento/" }, { "language": "it", "title": "Ottimizzare le immagini per il web e le prestazioni", "url": "https://agents.willem.com/it/posts/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/", "source_url": "https://willem.com/it/2018-09-26_ottimizzare-le-immagini-per-il-web-e-le-prestazioni/" }, { "language": "pt", "title": "Otimizar imagens para a web e para o desempenho", "url": "https://agents.willem.com/pt/posts/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/", "source_url": "https://willem.com/pt/2018-09-26_otimizar-imagens-para-a-web-e-para-o-desempenho/" }, { "language": "pap", "title": "Optimalisá imagen pa web i rendimentu", "url": "https://agents.willem.com/pap/posts/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/", "source_url": "https://willem.com/pap/2018-09-26_optimalisa-imagen-pa-web-i-rendimentu/" }, { "language": "fy", "title": "Ôfbyldings optimalisearje foar it web en prestaasje", "url": "https://agents.willem.com/fy/posts/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/", "source_url": "https://willem.com/fy/2018-09-26_ofbyldings-optimalisearje-foar-it-web-en-prestaasje/" } ], "image": "https://willem.com/global/images/c806bdb54964.webp", "image_width": 2560, "images": [ { "url": "https://willem.com/global/images/ec02ee9672ec.webp", "description": "Poids moyen d'une page web, réparti par type de ressource (HttpArchive, septembre 2018)", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-1.jpg" }, { "url": "https://willem.com/global/images/e94033e684f1.webp", "description": "Les images bitmap sont comme des échiquiers, dont les pixels sont les cases", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-2.png" }, { "url": "https://willem.com/global/images/3640b9482061.webp", "description": "Diapositive typique sur pace-cme.org", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-3.jpg" }, { "url": "https://willem.com/global/images/4c08bf11faa4.webp", "description": "Image de test, avec des aplats de couleur, des photos et du texte", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-4.jpg" }, { "url": "https://willem.com/global/images/19c8b9866186.webp", "description": "Contrôle de la qualité : à gauche l'original, à droite pngquant", "manager_file": "148-bf2d6faf6057f115dc72e82d984e71359f16b48d8c42b4b41c2ee918cf46b556_ContentAsPost_37022_images-5.jpg" } ], "text": "Optimiser ton site web\nSi 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.\nTaille moyenne d'une page\nBeaucoup 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).\nUne optimisation efficace des images peut donc avoir des effets incroyables sur la vitesse de ton site web.\nQu'est-ce que l'optimisation d'images ?\nUne 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.\nOptimiser 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.\nIl 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.\nFormats d'image courants\n- 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.\n- 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.\n- 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.\nRé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.\nChoisir le bon format d'image\nLe 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 ».\nTu 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.\nCompression avec et sans perte\nLes 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.\nComment optimiser les images\nUne 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.\nOptimiser les images JPG\nSi tu utilises Photoshop, tu peux utiliser sa fonction intégrée Enregistrer pour le web pour obtenir une image JPG raisonnablement optimisée.\nTu 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.\nUne 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).\nSi tu utilises WordPress, pense à un plugin qui optimise les images à ta place, comme Imagify de xtremerain (https://www.xtremerain.com/imagify-advanced-optimization/).\nOptimiser les images PNG\nLes 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.\nIl existe des optimiseurs en ligne pour les fichiers PNG, comme TinyPNG (https://tinypng.com) et Compressor.io (https://compressor.io).\nTu 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.\nTest : optipng contre pngcrush contre pngquant\nDans 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.\nPour 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.\nPACE-CME\nL'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.\nPour 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.\nMéthode\nJ'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).\nRésultats\n- image de test originale 2897 Ko\n- optipng extrême (-o7) : 2510 Ko en 2 minutes 36 secondes / par défaut : 2536 Ko en 4,9 secondes\n- pngcrush extrême (-brute) : 2510 Ko en 1 minute 42 secondes / par défaut : 2531 Ko en 9,2 secondes\n- pngquant extrême (-s 1) : 744 Ko en 5,2 secondes / par défaut : 746 Ko en 4,2 secondes\nLes 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.\nConclusion\nOptimiser les images pour le web et les performances est vraiment important. Mes tests le montrent : choisir le bon algorithme peut tout changer.\nPour moi, ça voulait dire choisir pngquant, mais ton choix peut être différent selon le type d'images que tu veux optimiser.\nCe 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 ?", "word_count": 1340, "markdown_url": "https://agents.willem.com/fr/posts/2018-09-26_optimiser-les-images-pour-le-web-et-les-performances/post.md" }