{"id":1527,"date":"2023-03-20T21:41:17","date_gmt":"2023-03-20T21:41:17","guid":{"rendered":"https:\/\/universomotero.com\/?page_id=1527"},"modified":"2025-12-06T06:00:04","modified_gmt":"2025-12-06T06:00:04","slug":"convertissez-gratuitement-et-instantanement-des-images-au-format-webp","status":"publish","type":"page","link":"https:\/\/universomotero.com\/fr\/convertissez-gratuitement-et-instantanement-des-images-au-format-webp\/","title":{"rendered":"Convertissez gratuitement et instantan\u00e9ment vos images au format WebP"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-align-center\">Convertissez gratuitement et instantan\u00e9ment vos images au format WebP<\/h2>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"text-align: center;\" class=\"layout\">\n<div style=\"margin-bottom: 20px; text-align: center;\">\n<input style=\"display:none;\" type=\"file\" id=\"files\" multiple=\"\" accept=\"image\/*\">\n<label class=\"upload-image-button\" for=\"files\">Choisir des fichiers<\/label>\n<\/div>\n<div id=\"previews\"><\/div>\n<div class=\"dropTarget\"><\/div>\n<\/div>\n\n\n\n<style>\nh1 {\nmargin-top: 0;\n}\n\n[type=\"file\"] + label {\nbackground: hsl(214deg 62% 46%);\nborder: none;\nborder-radius: 5px;\ncolor: #fff;\ncursor: pointer;\ndisplay: inline-block;\nfont-family: 'Rubik', sans-serif;\nfont-size: inherit;\nfont-weight: 500;\nmargin-bottom: 1rem;\noutline: none;\nposition: relative;\ntransition: all 0.3s;\nvertical-align: middle;\n}\n\n.upload-btn:hover {\nbox-shadow: 0 4px darken(#f8eae3, 10%);\ntop: 2px;\nbackground: #545b62!important;\n}\n\n.upload-image-button {\n\/* Style the color of the message that says 'No file chosen' *\/\ncolor: #878787;\n}\n\n.upload-image-button {\ncolor: #fff;\ncursor: pointer;\noutline: none;\npadding: 10px 25px;\ntext-transform: uppercase;\ntransition: all 1s ease;\nmargin: 10px 0px 10px 0px;\n}\n\n#previews img {\nmax-height: 100%;\nmax-width: 100%;\nbox-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);\n}\n\n.dropTarget {\nposition: relative;\nborder: 3px dashed silver;\nflex-basis: auto;\nflex-grow: 20;\nheight: 30px;\nwidth: 100%;\n}\n\n.dropTarget::before {\ncontent: 'Drop files here';\ncolor: silver;\nfont-size: 5vh;\nheight: 5vh;\nposition: absolute;\ntop: 0;\nbottom: 0;\nleft: 0;\nright: 0;\nmargin: auto;\ntext-align: center;\npointer-events: none;\nuser-select: none;\n}\n\n#previews > div {\nbox-sizing: border-box;\nheight: 150px;\nwidth: 150px;\npadding: 20px;\ndisplay: inline-flex;\nvertical-align: top;\njustify-content: center;\n}\n\n#previews > div > progress {\nwidth: 50;\nmax-height: 100px;\n}\n\n.layout {\ndisplay: flex;\nflex-direction: column;\njustify-content: flex-start;\nalign-items: stretch;\nalign-content: stretch;\nheight: calc(100vh - 40px);\n}\n\n[type=\"file\"] {\nheight: 0;\noverflow: hidden;\nwidth: 0;\n}\n<\/style>\n\n\n\n<script type=\"text\/javascript\">\nlet refs = {};\nrefs.imagePreviews = document.querySelector('#previews');\nrefs.fileSelector = document.querySelector('input[type=file]');\n\nfunction addImageBox(container) {\nlet imageBox = document.createElement(\"div\");\nlet progressBox = document.createElement(\"progress\");\nimageBox.appendChild(progressBox);\ncontainer.appendChild(imageBox);\nreturn imageBox;\n}\n\nfunction processFile(file) {\nif (!file) {\nreturn;\n}\nconsole.log(file);\n\nlet imageBox = addImageBox(refs.imagePreviews);\n\/\/ Load the data into an image\nnew Promise(function (resolve, reject) {\nlet rawImage = new Image();\n\nrawImage.addEventListener(\"load\", function () {\nresolve(rawImage);\n});\n\nrawImage.src = URL.createObjectURL(file);\n})\n.then(function (rawImage) {\n\/\/ Convert image to webp ObjectURL via a canvas blob\nreturn new Promise(function (resolve, reject) {\nlet canvas = document.createElement('canvas');\nlet ctx = canvas.getContext(\"2d\");\n\ncanvas.width = rawImage.width;\ncanvas.height = rawImage.height;\nctx.drawImage(rawImage, 0, 0);\n\ncanvas.toBlob(function (blob) {\nresolve(URL.createObjectURL(blob));\n}, \"image\/webp\");\n});\n})\n.then(function (imageURL) {\n\/\/ Load image for display on the page\nreturn new Promise(function (resolve, reject) {\nlet scaledImg = new Image();\n\nscaledImg.addEventListener(\"load\", function () {\nresolve({imageURL, scaledImg});\n});\n\nscaledImg.setAttribute(\"src\", imageURL);\n});\n})\n.then(function (data) {\n\/\/ Inject into the DOM\nlet imageLink = document.createElement(\"a\");\n\nimageLink.setAttribute(\"href\", data.imageURL);\nimageLink.setAttribute('download', `${file.name}.webp`);\nimageLink.appendChild(data.scaledImg);\n\nimageBox.innerHTML = \"\";\nimageBox.appendChild(imageLink);\n});\n}\n\nfunction processFiles(files) {\nfor (let file of files) {\nprocessFile(file);\n}\n}\n\nfunction fileSelectorChanged() {\nprocessFiles(refs.fileSelector.files);\nrefs.fileSelector.value = \"\";\n}\n\nrefs.fileSelector.addEventListener(\"change\", fileSelectorChanged);\n\/\/ Set up Drag and Drop\nfunction dragenter(e) {\ne.stopPropagation();\ne.preventDefault();\n}\n\nfunction dragover(e) {\ne.stopPropagation();\ne.preventDefault();\n}\n\nfunction drop(callback, e) {\ne.stopPropagation();\ne.preventDefault();\ncallback(e.dataTransfer.files);\n}\n\nfunction setDragDrop(area, callback) {\narea.addEventListener(\"dragenter\", dragenter, false);\narea.addEventListener(\"dragover\", dragover, false);\narea.addEventListener(\"drop\", function (e) { drop(callback, e); }, false);\n}\nsetDragDrop(document.documentElement, processFiles);\n<\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Comment convertir des images JPEG en WebP<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Vous pouvez facilement convertir des images JPEG en WebP \u00e0 l&#039;aide de l&#039;outil ci-dessus.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Cliquez sur le bouton \u00ab\u00a0Choisir un fichier\u00a0\u00bb et s\u00e9lectionnez une image.<\/li>\n\n\n\n<li>Il convertit ensuite instantan\u00e9ment les images au format WebP et vous en offre un aper\u00e7u.<\/li>\n\n\n\n<li>Cliquez sur l&#039;image d&#039;aper\u00e7u pour la t\u00e9l\u00e9charger.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">FAQ<\/h2>\n\n\n\n<h4 class=\"wp-block-heading\">Qu&#039;est-ce que WebP\u00a0?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Google a cr\u00e9\u00e9 le format d&#039;image WebP, con\u00e7u pour offrir une compression sup\u00e9rieure \u00e0 celle d&#039;autres formats courants comme JPEG et PNG, tout en pr\u00e9servant la m\u00eame qualit\u00e9. Ce format utilise des m\u00e9thodes de compression avec et sans perte afin de r\u00e9duire la taille des fichiers image.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Les sites web peuvent tirer profit du protocole WebP, car il acc\u00e9l\u00e8re le chargement des pages et r\u00e9duit la consommation de bande passante pour l&#039;affichage des images. Cela am\u00e9liore la fonctionnalit\u00e9 et l&#039;exp\u00e9rience utilisateur globale d&#039;un site web, notamment pour les utilisateurs d&#039;appareils mobiles disposant de forfaits de donn\u00e9es limit\u00e9s ou de connexions internet lentes.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Qu&#039;est-ce que WebP Converter\u00a0?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">WebP Converter est un outil en ligne qui convertit les images JPEG, JPG et PNG au format WebP. Notre outil est un parfait exemple de convertisseur WebP gratuit, fonctionnant en ligne et convertissant instantan\u00e9ment les images au format WebP.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pourquoi convertir les images au format WebP\u00a0?<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">En clair, les images WebP offrent souvent une meilleure compression que les autres formats et sont plus l\u00e9g\u00e8res tout en conservant la m\u00eame qualit\u00e9. Par cons\u00e9quent, utiliser des images WebP sur votre site web am\u00e9liorera ses performances et r\u00e9duira l&#039;espace de stockage n\u00e9cessaire.<\/p>","protected":false},"excerpt":{"rendered":"<p>Free Convert Images To WebP Format Instantly Choose files How To Convert JPEG Images To WebP You can easily convert JPEG images to WebP using the above tool FAQs What Is WebP? Google created the WebP image format, which is intended to offer superior compression over other well-known formats like JPEG and PNG while preserving [&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-1527","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages\/1527","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=1527"}],"version-history":[{"count":1,"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages\/1527\/revisions"}],"predecessor-version":[{"id":2326,"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/pages\/1527\/revisions\/2326"}],"wp:attachment":[{"href":"https:\/\/universomotero.com\/fr\/wp-json\/wp\/v2\/media?parent=1527"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}