{"id":1533,"date":"2023-03-20T21:52:55","date_gmt":"2023-03-20T21:52:55","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1533"},"modified":"2025-12-06T06:00:09","modified_gmt":"2025-12-06T06:00:09","slug":"redimensionner-et-compresser-des-images-png-en-ligne","status":"publish","type":"page","link":"https:\/\/universomotero.com\/fr\/redimensionner-et-compresser-des-images-png-en-ligne\/","title":{"rendered":"Redimensionnement et compression d&#039;images PNG en ligne"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Redimensionnement et compression d&#039;images PNG en ligne<\/h2>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">Compressez gratuitement n&#039;importe quelle image PNG en ligne. Vous pouvez \u00e9galement redimensionner instantan\u00e9ment les images en ligne.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<tool-body>\n<div id=\"tool-body\" style=\"text-align: center;\" class=\"wrapper\">\n<div class=\"upload-box\">\n   <input type=\"file\" accept=\"image\/*\" hidden=\"\">\n   <img decoding=\"async\" src=\"http:\/\/universomotero.com\/wp-content\/uploads\/2023\/03\/upload-icon.webp\" alt=\"ic\u00f4ne de t\u00e9l\u00e9chargement\">\n   <p>S\u00e9lectionnez le fichier \u00e0 t\u00e9l\u00e9charger<\/p>\n   <\/div>\n   <div style=\"text-align: center;\" class=\"content\">\n   <div class=\"row sizes\">\n   <div class=\"column width\">\n   <label>Largeur<\/label>\n   <input type=\"number\">\n   <\/div>\n   <div class=\"column height\">\n   <label>Hauteur<\/label>\n   <input type=\"number\">\n   <\/div>\n   <\/div>\n   <div class=\"row checkboxes\">\n   <div class=\"column ratio\">\n   <input type=\"checkbox\" id=\"ratio\" checked=\"\">\n   <label for=\"ratio\">Verrouiller le rapport d&#039;aspect<\/label>\n   <\/div>\n   <div class=\"column quality\">\n   <input type=\"checkbox\" id=\"quality\">\n   <label for=\"quality\">R\u00e9duire la qualit\u00e9<\/label>\n   <\/div>\n   <\/div>\n   <button class=\"download-btn\">T\u00e9l\u00e9charger l&#039;image<\/button>\n   <\/div>\n   <\/div>\n<\/tool-body>\n\n\n\n<style>\ntool-body{\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nmin-height: 50%;\n}\n\n.wrapper{\n\/* width: 50%; *\/\nheight: 288px;\npadding: 30px;\nbackground: #fff;\nborder-radius: 9px;\ntransition: height 0.2s ease;\n}\n\n.wrapper.active{\nheight: 537px;\n}\n\n.wrapper .upload-box{\nheight: 225px;\ndisplay: flex;\ncursor: pointer;\nalign-items: center;\njustify-content: center;\nflex-direction: column;\nborder-radius: 5px;\nborder: 2px dashed #afafaf;\n}\n\n.wrapper.active .upload-box{\nborder: none;\n}\n\n.upload-box p{\nfont-size: 1.06rem;\nmargin-top: 20px;\n}\n\n.wrapper.active .upload-box p{\ndisplay: none;\n}\n\n.wrapper.active .upload-box img{\nwidth: 100%;\nheight: 100%;\nobject-fit: cover;\nborder-radius: 5px;\n}\n\n.wrapper .content{\nopacity: 0;\nmargin-top: 28px;\npointer-events: none;\n}\n\n.wrapper.active .content{\nopacity: 1;\npointer-events: auto;\ntransition: opacity 0.5s 0.05s ease;\n}\n\n.content .row{\ndisplay: flex;\njustify-content: space-between;\n}\n\n.content .row .column{\nwidth: calc(100% \/ 2 - 15px);\n}\n\n.row .column label{\nfont-size: 1.06rem;\n}\n\n.sizes .column input{\nwidth: 100%;\nheight: 49px;\noutline: none;\nmargin-top: 7px;\npadding: 0 15px;\nfont-size: 1.06rem;\nborder-radius: 4px;\nborder: 1px solid #aaa;\n}\n\n.sizes .column input:focus{\npadding: 0 14px;\nborder: 2px solid #927DFC;\n}\n\n.content .checkboxes{\nmargin-top: 20px;\n}\n\n.checkboxes .column{\ndisplay: flex;\nalign-items: center;\n}\n\n.checkboxes .column input{\nwidth: 17px;\nheight: 17px;\nmargin-right: 9px;\naccent-color: #927DFC;\n}\n\n.content .download-btn{\nwidth: 100%;\ncolor: #fff;\noutline: none;\nborder: none;\ncursor: pointer;\nfont-size: 1.06rem;\nborder-radius: 5px;\npadding: 15px 0;\nmargin: 30px 0 10px;\nbackground: #927DFC;\ntext-transform: uppercase;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nconst uploadBox = document.querySelector(\".upload-box\"),\npreviewImg = uploadBox.querySelector(\"img\"),\nfileInput = uploadBox.querySelector(\"input\"),\nwidthInput = document.querySelector(\".width input\"),\nheightInput = document.querySelector(\".height input\"),\nratioInput = document.querySelector(\".ratio input\"),\nqualityInput = document.querySelector(\".quality input\"),\ndownloadBtn = document.querySelector(\".download-btn\");\nlet ogImageRatio;\n\nconst loadFile = (e) => {\nconst file = e.target.files[0]; \/\/ getting first user selected file\nif(!file) return; \/\/ return if user hasn't selected any file\npreviewImg.src = URL.createObjectURL(file); \/\/ passing selected file url to preview img src\npreviewImg.addEventListener(\"load\", () => { \/\/ once img loaded\nwidthInput.value = previewImg.naturalWidth;\nheightInput.value = previewImg.naturalHeight;\nogImageRatio = previewImg.naturalWidth \/ previewImg.naturalHeight;\ndocument.querySelector(\".wrapper\").classList.add(\"active\");\n});\n}\n\nwidthInput.addEventListener(\"keyup\", () => {\n\/\/ getting height according to the ratio checkbox status\nconst height = ratioInput.checked ? widthInput.value \/ ogImageRatio : heightInput.value;\nheightInput.value = Math.floor(height);\n});\n\nheightInput.addEventListener(\"keyup\", () => {\n\/\/ getting width according to the ratio checkbox status\nconst width = ratioInput.checked ? heightInput.value * ogImageRatio : widthInput.value;\nwidthInput.value = Math.floor(width);\n});\n\nconst resizeAndDownload = () => {\nconst canvas = document.createElement(\"canvas\");\nconst a = document.createElement(\"a\");\nconst ctx = canvas.getContext(\"2d\");\n\n\/\/ if quality checkbox is checked, pass 0.5 to imgQuality else pass 1.0\n\/\/ 1.0 is 100% quality where 0.5 is 50% of total. you can pass from 0.1 - 1.0\nconst imgQuality = qualityInput.checked ? 0.5 : 1.0;\n\n\/\/ setting canvas height & width according to the input values\ncanvas.width = widthInput.value;\ncanvas.height = heightInput.value;\n\n\/\/ drawing user selected image onto the canvas\nctx.drawImage(previewImg, 0, 0, canvas.width, canvas.height);\n\n\/\/ passing canvas data url as href value of <a> element\na.href = canvas.toDataURL(\"image\/png\", imgQuality);\na.download = new Date().getTime(); \/\/ passing current time as download value\na.click(); \/\/ clicking <a> element so the file download\n}\n\ndownloadBtn.addEventListener(\"click\", resizeAndDownload);\nfileInput.addEventListener(\"change\", loadFile);\nuploadBox.addEventListener(\"click\", () => fileInput.click());\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Comment \u00e7a marche ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Cet outil en ligne compresse les images PNG gr\u00e2ce \u00e0 un algorithme g\u00e9n\u00e9ralement appel\u00e9 compression sans perte. Cette technique r\u00e9duit la taille de l&#039;image tout en pr\u00e9servant l&#039;int\u00e9gralit\u00e9 de ses donn\u00e9es, sans alt\u00e9rer sa qualit\u00e9. L&#039;outil redimensionne le fichier PNG en optimisant sa palette de couleurs, en supprimant les informations superflues et en modifiant le nombre de pixels tout en conservant les proportions.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Comment compresser un fichier PNG ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez utiliser notre outil en ligne de redimensionnement et de compression d&#039;images PNG pour r\u00e9duire la taille d&#039;un fichier PNG volumineux et l&#039;adapter aux dimensions souhait\u00e9es. Aucun t\u00e9l\u00e9chargement, installation ou inscription n&#039;est n\u00e9cessaire. Voici comment proc\u00e9der en trois \u00e9tapes\u00a0:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>T\u00e9l\u00e9chargez votre photo\u00a0:<\/strong>&nbsp;Choisissez une image PNG que vous souhaitez compresser ou redimensionner. Glissez-d\u00e9posez l&#039;image dans l&#039;outil.<\/li>\n\n\n\n<li><strong>Personnalisez les param\u00e8tres\u00a0:<\/strong>&nbsp;Apr\u00e8s avoir import\u00e9 l&#039;image, vous pouvez choisir sa largeur et sa hauteur. S\u00e9lectionnez ces dimensions selon vos besoins. Vous pouvez \u00e9galement choisir de r\u00e9duire la qualit\u00e9 ou de conserver les proportions. L&#039;option \u201c\u00a0R\u00e9duire la qualit\u00e9\u00a0\u201d permet de r\u00e9duire la taille d&#039;une image volumineuse. L&#039;option \u201c\u00a0Conserver les proportions\u00a0\u201d garantit que les proportions de l&#039;image restent inchang\u00e9es apr\u00e8s redimensionnement.<\/li>\n\n\n\n<li><strong>Enregistrez votre photo\u00a0:<\/strong>&nbsp;Pr\u00e9visualisez la personnalisation pour vous assurer qu&#039;elle correspond \u00e0 vos attentes, puis cliquez sur T\u00e9l\u00e9charger l&#039;image.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Pourquoi compresser les fichiers PNG ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Un fichier PNG est toujours plus volumineux qu&#039;un fichier JPEG, car il contient davantage de donn\u00e9es. Les fichiers PNG offrent une r\u00e9solution et des d\u00e9tails plus pr\u00e9cis. En compressant les fichiers PNG, vous pouvez r\u00e9duire consid\u00e9rablement leur taille et faciliter leur utilisation, leur partage et leur mise en ligne. Vous \u00e9conomiserez \u00e9galement de l&#039;espace de stockage sur votre appareil ou votre serveur, ce qui contribuera \u00e0 am\u00e9liorer les performances de votre site web en augmentant sa vitesse de chargement.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Est-il s\u00fbr de compresser les fichiers PNG\u00a0?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Oui, la compression des fichiers PNG est sans danger. L&#039;outil de compression PNG utilise une compression sans perte, ce qui signifie qu&#039;il redimensionne et compresse votre image PNG sans alt\u00e9rer sa qualit\u00e9 ni perdre aucune donn\u00e9e. C&#039;est pourquoi la compression PNG est consid\u00e9r\u00e9e comme plus s\u00fbre que la compression JPEG.<\/p>","protected":false},"excerpt":{"rendered":"<p>Online PNG Image Resize And Compress Compress any PNG image online for free. You also can resize images online instantly Browse File to Upload Width Height Lock aspect ratio Reduce quality Download Image How Does It Work? This online tool will compress a PNG image by using an algorithm that is generally called lossless compression. [&hellip;]<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1533","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages\/1533","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/comments?post=1533"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages\/1533\/revisions"}],"predecessor-version":[{"id":2329,"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages\/1533\/revisions\/2329"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/media?parent=1533"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}