{"id":4402,"date":"2017-04-20T14:04:07","date_gmt":"2017-04-20T14:04:07","guid":{"rendered":"https:\/\/blog.hostinger.io\/tutoriels\/?p=4402"},"modified":"2024-09-26T14:13:21","modified_gmt":"2024-09-26T14:13:21","slug":"jpeg-progressif","status":"publish","type":"post","link":"\/fr\/tutoriels\/jpeg-progressif","title":{"rendered":"Optimiser rapidement son site web gr\u00e2ce au JPEG progressif"},"content":{"rendered":"<p>Une t&acirc;che tr&egrave;s importante dans l&rsquo;optimisation d&rsquo;un site web est l&rsquo;optimisation des images en elle-m&ecirc;mes. Dans l&rsquo;un de nos guides pr&eacute;c&eacute;dents, nous avons appris &agrave; am&eacute;liorer efficacement la performance du site en utilisant des <a href=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/scaled-images\/\" target=\"_blank\" rel=\"noopener noreferrer\">images scal&eacute;es (ou mises &agrave; l&rsquo;&eacute;chelle)<\/a>&nbsp;. Dans celui-ci, nous allons faire un pas de plus et apprendre &agrave; utiliser le&nbsp;JPEG progressif.<\/p><figure class=\"wp-block-image size-full\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Speed-Up-Your-Website-FR.pdf\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/public\" alt=\"\" class=\"wp-image-41455\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/eBook_-Speed-Up-your-website-FR-1024x283-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-quelle-est-la-difference-entre-les-jpeg-de-base-et-les-images-jpeg-progressives\"><strong>Quelle est la diff&eacute;rence entre les JPEG de base et les images JPEG progressives?<\/strong><\/h3><p>G&eacute;n&eacute;ralement, les images JPEG sont charg&eacute;es de haut en bas. Les images JPEG progressives diff&egrave;rent en montrant toute l&rsquo;image imm&eacute;diatement tout en chargeant une partie des donn&eacute;es, ce qui signifie qu&rsquo;elle peut appara&icirc;tre pixellis&eacute;e jusqu&rsquo;&agrave; ce qu&rsquo;elle soit compl&egrave;tement charg&eacute;e. Vous trouverez ci-dessous un exemple pour une meilleure compr&eacute;hension.<\/p><p>Cycle de chargement JPEG de base :<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/basiline-jpeg-load.png\" alt=\"Processus de chargement JPEG de base\"><\/figure><\/div><p>Cycle de chargement JPEG progressif:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/progressive-jpeg-load.png\" alt=\"Processus de chargement JPEG progressif\"><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-comment-les-images-jpeg-progressives-amelioreront-elles-les-performances-du-site-web\"><strong>Comment les images JPEG progressives am&eacute;lioreront-elles les performances du site Web?<\/strong><\/h3><p>En plus d&rsquo;une meilleure exp&eacute;rience visuelle, les images JPEG progressives sont de 2% &agrave; 10% plus petites par rapport aux images de base. Ce qui leur permettra d&rsquo;am&eacute;liorer le chargement de votre site Web et les performances globales. Vos demandes vers le serveur seront plus courtes et plus efficaces. Ce qui r&eacute;duira &eacute;galement votre utilisation de ressources telles que la bande passante et l&rsquo;espace disque. C&rsquo;est extr&ecirc;mement efficace si vous h&eacute;bergez un site Web sur des services d&rsquo;h&eacute;bergement gratuits ou mutualis&eacute;s. Les sites Web avec une grande quantit&eacute; d&rsquo;images JPEG de base auront aussi une qualit&eacute; moindre d&rsquo;image qu&rsquo;avec des images JPEG progressives. Il est &eacute;galement important de mentionner que les visiteurs qui acc&egrave;dent &agrave; votre site Web via un appareil mobile ou une connexion Internet lente auront une meilleure exp&eacute;rience visuelle globale et des temps de chargement plus rapides si vous utilisez des images JPEG progressives.<br><\/p><p>\n\n\n<div><p class=\"important\"><strong>IMPORTANT!<\/strong> Certains navigateurs (par exemple Internet Explorer avant Windows 7) ne prennent pas en charge les images JPEG progressives. Cependant, toutes les versions ult&eacute;rieures le supportent.<\/p><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.hostinger.com\/fr\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/public\" alt=\"\" class=\"wp-image-41467\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/46\/2022\/12\/FR-Web-hosting_in-text-banner-1-1024x300-1.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-ce-dont-vous-aurez-besoin\"><strong>Ce dont vous aurez besoin<\/strong><\/h2><p>Avant de mettre en place des JPEG progressif, assurez vous d&rsquo;avoir les &eacute;l&eacute;ments suivants:<\/p><ul class=\"wp-block-list\">\n<li>Acc&egrave;s au FTP<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-etape-1-analyse-de-votre-site\"><strong>&Eacute;tape 1 &ndash; Analyse de votre site<\/strong><\/h2><p>Pour localiser les images JPEG de base qui peuvent &ecirc;tre remplac&eacute;es par des JPEG progressifs, nous utiliserons <a href=\"https:\/\/webpagetest.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">WebPageTest.org<\/a>&nbsp;. Cet outil est vraiment g&eacute;nial, car vous pouvez obtenir la version progressive d&rsquo;une image JPEG directement sur le site !<\/p><p>Voici les r&eacute;sultats de la&nbsp;section <strong>Performance analysis<\/strong>&nbsp;apr&egrave;s avoir analys&eacute; un site de test:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/0-100-prog-jpeg.png\" alt=\"r&eacute;sultat du premier test pour les JPEG progressifs\"><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-etape-2-telechargement-d-images-jpeg-progressives\"><strong>&Eacute;tape 2 &ndash; T&eacute;l&eacute;chargement d&rsquo;images JPEG progressives<\/strong><\/h2><p>Il existe une grande vari&eacute;t&eacute; d&rsquo;outils qui vous permettront de convertir les images JPEG de base en progressives. Voici quelques-uns:<\/p><h3 class=\"wp-block-heading\" id=\"h-option-1-compression-en-jpeg-progressif-a-l-aide-de-webpagetest-org\"><strong>Option 1 &ndash; Compression en JPEG progressif &agrave; l&rsquo;aide de <\/strong><strong>WebPageTest.org<\/strong><\/h3><p>Apr&egrave;s avoir trouv&eacute; la liste des images pouvant &ecirc;tre remplac&eacute;es, acc&eacute;dez &agrave; la section <strong>Details<\/strong>&nbsp;et appuyez sur <strong>View all images <\/strong>(en dessous du premier test Waterfall)<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/view-all-images.png\" alt=\"afficher tous les images de la page sur webpagetest\"><\/figure><\/div><p>Cette section affichera toutes les images de votre page. Appuyez sur <strong>Analyze JPEG<\/strong> sur chaque image que vous avez vu &agrave; l&rsquo;&eacute;tape 1 de ce tutoriel et faites d&eacute;filer vers le bas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/analyze-jpeg.png\" alt=\"analyser jpeg sur webpagetest\"><\/figure><\/div><p>Vous y trouverez une image en dessous de <strong>Quality 85 Image<\/strong>. Enregistrez toutes les images en qualit&eacute; 85 sur votre ordinateur et passez &agrave; l&rsquo;&eacute;tape suivante. Nous vous recommandons fortement de sauvegarder les images avec le <strong>m&ecirc;me<\/strong>&nbsp;<strong>nom de fichier<\/strong>&nbsp;que celles d&rsquo;origine. De cette fa&ccedil;on la proc&eacute;dure de remplacement sera beaucoup plus facile.<\/p><h3 class=\"wp-block-heading\" id=\"h-option-2-convertir-les-jpeg-de-reference-en-progressifs-avec-optimizilla\"><strong>Option 2 &ndash; Convertir les JPEG de r&eacute;f&eacute;rence en progressifs avec Optimizilla<\/strong><\/h3><p>Si vous pr&eacute;voyez de t&eacute;l&eacute;charger plus d&rsquo;images sur votre site &agrave; l&rsquo;avenir, ou si votre site Web n&rsquo;est pas encore en ligne, vous pouvez utiliser <a href=\"http:\/\/optimizilla.com\" target=\"_blank\" rel=\"noopener noreferrer\">Optimizilla<\/a>&nbsp;pour convertir vos images JPEG de base en progressives. En utilisant cet outil, vous pouvez optimiser jusqu&rsquo;&agrave; 20 images et les r&eacute;tr&eacute;cir en utilisant des algorithmes de compression. Vous pourrez les convertir en<strong>&nbsp;qualit&eacute; 85<\/strong>&nbsp;ou moins encore.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/optimizilla-usage.png\" alt=\"utilisation d'optimizilla \"><\/figure><\/div><p>\n\n<div><p class=\"important\"><strong>IMPORTANT!<\/strong> En dessous de 85 cela peut entra&icirc;ner une perte de qualit&eacute; visible. Proc&eacute;dez avec attention.<\/p><\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-option-3-optimisation-des-images-avec-des-plugins-cms\"><strong>Option 3 &ndash; Optimisation des images avec des plugins CMS<\/strong><\/h3><p>Si vous avez un blog WordPress, vous pouvez facilement optimiser vos images JPEG de base en utilisant WP Smush. Consultez ce tutoriel pour obtenir des instructions d&eacute;taill&eacute;es sur l&rsquo; <a href=\"https:\/\/fr.wordpress.org\/plugins\/wp-smushit\/\" target=\"_blank\" rel=\"noopener noreferrer\">utilisation de WP Smush<\/a><\/p><h2 class=\"wp-block-heading\" id=\"h-etape-3-remplacement-des-anciennes-images\"><strong>&Eacute;tape 3 &ndash; Remplacement des anciennes images<\/strong><\/h2><p>\n\n\n<div><p class=\"important\"><strong>IMPORTANT!<\/strong> Assurez-vous de sauvegarder <a href=\"https:\/\/www.hostinger.com\/tutorials\/backups\/downloading-website-backup\" target=\"_blank\" rel=\"noopener noreferrer\">votre site Web<\/a>&nbsp;ou les images que vous envisagez de remplacer avant de continuer.<\/p><\/div>\n\n\n\n<\/p><p>&Agrave; l&rsquo;aide du Gestionnaire de fichiers&nbsp;ou d&rsquo;<a href=\"https:\/\/www.hostinger.com\/tutorials\/ftp\/filezilla-ftp-configuration\" target=\"_blank\" rel=\"noopener noreferrer\">un client FTP<\/a>&nbsp;, localisez les images de l&rsquo;&Eacute;tape 1. Supprimez les et remplacez-les par les nouvelles images en<strong>&nbsp;qualit&eacute; 85 <\/strong>acquises &agrave; l&rsquo; <strong>&eacute;tape 2<\/strong>. Encore une fois, assurez-vous qu&rsquo;elles ont le <strong>m&ecirc;me nom de fichier<\/strong>&nbsp;pour &eacute;viter les erreurs 404 ou les probl&egrave;mes de chargement.<\/p><h2 class=\"wp-block-heading\" id=\"h-etape-4-test-des-modifications\"><strong>&Eacute;tape 4 &ndash; Test des modifications<\/strong><\/h2><p>Une fois que toutes les images sont t&eacute;l&eacute;charg&eacute;es, effacez votre cache de navigateur et ouvrez votre site Web pour voir si tout charge bien. Apr&egrave;s cela, vous pouvez analyser votre site Web avec WebPageTest.org&nbsp;pour v&eacute;rifier si tout a &eacute;t&eacute; fait correctement. Voici les r&eacute;sultats que vous devriez voir dans la section <strong>Performance review<\/strong>&nbsp;:<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-content\/uploads\/sites\/46\/2017\/04\/100-100-prog-jpeg.png\" alt=\"r&eacute;sultat du test apr&egrave;s la conversion des images au format JPEG progressif\"><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-conclusion\"><strong>Conclusion<\/strong><\/h2><p>Dans ce guide, nous avons appris &agrave; augmenter la vitesse de votre site Web en utilisant des images JPEG progressives au lieu de celles de base. Vos visiteurs seront plus heureux puisqu&rsquo;ils auront une exp&eacute;rience plus fluide. Vous r&eacute;duirez aussi l&rsquo;utilisation des ressources du site, aurez une am&eacute;lioration des performances SEO de votre site Web. Dans l&rsquo;histoire tout le monde est gagnant !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Une t&acirc;che tr&egrave;s importante dans l&rsquo;optimisation d&rsquo;un site web est l&rsquo;optimisation des images en elle-m&ecirc;mes. Dans l&rsquo;un de nos guides pr&eacute;c&eacute;dents, nous avons appris &agrave; am&eacute;liorer efficacement la performance du site en utilisant des images scal&eacute;es (ou mises &agrave; l&rsquo;&eacute;chelle)&nbsp;. Dans celui-ci, nous allons faire un pas de plus et apprendre &agrave; utiliser le&nbsp;JPEG progressif. [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/fr\/tutoriels\/jpeg-progressif\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":212,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"Optimiser rapidement son site web gr\u00e2ce au JPEG progressif","rank_math_description":"Apprenez \u00e0 utiliser le JPEG progressif pour optimiser votre site web, am\u00e9liorer ses performances en peu de temps, et gagner en rapidit\u00e9 !","rank_math_focus_keyword":"jpeg progressif","footnotes":""},"categories":[4804,5811],"tags":[4870,4869,4858,4790],"class_list":["post-4402","post","type-post","status-publish","format-standard","hentry","category-developpement-site-web","category-optimisation","tag-format-jpeg","tag-jpeg-progressif","tag-optimisation-site-web","tag-optimiser"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/jpeg-progressif","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/que-son-las-imagenes-jpeg-progressive","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/que-son-las-imagenes-jpeg-progressive","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/que-son-las-imagenes-jpeg-progressive","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/que-son-las-imagenes-jpeg-progressive","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/what-is-progressive-jpeg-images","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/what-is-progressive-jpeg-images","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/users\/212"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/comments?post=4402"}],"version-history":[{"count":11,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4402\/revisions"}],"predecessor-version":[{"id":35189,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/posts\/4402\/revisions\/35189"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/media?parent=4402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/categories?post=4402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/fr\/tutoriels\/wp-json\/wp\/v2\/tags?post=4402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}