PNG to WEBP Converter<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n <style>\r\n }\r\n .container {\r\n margin: auto;\r\n background-color: #ffffff;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n padding: 30px;\r\n width: 100%;\r\n max-width: 800px;\r\n text-align: center;\r\n }\r\n .file-input-area {\r\n border: 2px dashed #cbd5e0; \/* Gray-300 *\/\r\n border-radius: 12px;\r\n padding: 40px 20px;\r\n cursor: pointer;\r\n transition: border-color 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .file-input-area.drag-over {\r\n border-color: #38b2ac; \/* Teal-500 *\/\r\n background-color: #e6fffa; \/* Light teal background *\/\r\n }\r\n .file-input-area input[type=\"file\"] {\r\n display: none; \/* Hide default file input *\/\r\n }\r\n .btn-primary {\r\n background-color: #0E1540; \/* Teal-500 *\/\r\n color: white;\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n }\r\n .btn-primary:hover {\r\n background-color: #319795; \/* Teal-600 *\/\r\n }\r\n .btn-disabled {\r\n background-color: #a0aec0; \/* Gray-400 *\/\r\n cursor: not-allowed;\r\n }\r\n .loading-spinner {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n border-top: 4px solid #38b2ac;\r\n border-radius: 50%;\r\n width: 30px;\r\n height: 30px;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 15px;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n .converted-image-card {\r\n background-color: #f9fafb;\r\n border: 1px solid #e2e8f0; \/* Gray-200 *\/\r\n border-radius: 10px;\r\n padding: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n }\r\n .converted-image-card img {\r\n max-width: 100%;\r\n height: auto;\r\n border-radius: 8px;\r\n border: 1px solid #cbd5e0;\r\n }\r\n .quality-slider-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 20px;\r\n margin-bottom: 20px;\r\n }\r\n .quality-slider-container input[type=\"range\"] {\r\n flex-grow: 1;\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 8px;\r\n background: #e2e8f0;\r\n border-radius: 5px;\r\n outline: none;\r\n opacity: 0.7;\r\n transition: opacity .2s;\r\n }\r\n .quality-slider-container input[type=\"range\"]:hover {\r\n opacity: 1;\r\n }\r\n .quality-slider-container input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #0E1540;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n .quality-slider-container input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #38b2ac;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n .selected-files-info {\r\n margin-top: 15px;\r\n font-size: 0.9rem;\r\n color: #4a5568; \/* Gray-700 *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\r\n <div class=\"container\">\r\n <h1 class=\"text-3xl font-bold text-gray-800 mb-6\">PNG to WEBP Converter<\/h1>\r\n\r\n <div class=\"file-input-area mb-4\" id=\"dropArea\">\r\n <input type=\"file\" id=\"pngFileInput\" accept=\"image\/png\" multiple>\r\n <p class=\"text-lg text-gray-600 mb-2\">Drag & Drop PNGs here or<\/p>\r\n <button class=\"btn-primary\" onclick=\"document.getElementById('pngFileInput').click()\">\r\n Select PNG Files\r\n <\/button>\r\n <p class=\"text-sm text-gray-500 mt-2\">Only PNG images are supported. Max 10 files.<\/p>\r\n <\/div>\r\n\r\n <div id=\"selectedFilesInfo\" class=\"selected-files-info mb-4 hidden\">\r\n <p>Selected <span id=\"numSelectedFiles\">0<\/span> PNG file(s).<\/p>\r\n <ul id=\"selectedFilesList\" class=\"list-disc list-inside text-left mt-2 max-h-24 overflow-y-auto mx-auto w-fit\"><\/ul>\r\n <\/div>\r\n\r\n <div id=\"qualitySettings\" class=\"quality-slider-container\">\r\n <label for=\"webpQuality\" class=\"text-gray-700 font-medium\">WEBP Quality:<\/label>\r\n <input type=\"range\" id=\"webpQuality\" min=\"1\" max=\"100\" value=\"80\">\r\n <span id=\"qualityValue\" class=\"text-gray-700 font-bold\">80%<\/span>\r\n <\/div>\r\n\r\n <button id=\"convertButton\" class=\"btn-primary mt-4 mb-8 w-full md:w-auto px-8 py-3 disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\r\n Convert Files\r\n <\/button>\r\n\r\n <div id=\"loadingIndicator\" class=\"hidden\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <p class=\"text-gray-600\">Converting images...<\/p>\r\n <\/div>\r\n\r\n <div id=\"convertedImagesOutput\" class=\"mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n \r\n <\/div>\r\n\r\n <div id=\"messageBox\" class=\"mt-6 p-4 rounded-lg text-sm hidden\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const pngFileInput = document.getElementById('pngFileInput');\r\n const dropArea = document.getElementById('dropArea');\r\n const loadingIndicator = document.getElementById('loadingIndicator');\r\n const convertedImagesOutput = document.getElementById('convertedImagesOutput');\r\n const messageBox = document.getElementById('messageBox');\r\n const webpQualitySlider = document.getElementById('webpQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const qualitySettings = document.getElementById('qualitySettings');\r\n const convertButton = document.getElementById('convertButton');\r\n const selectedFilesInfo = document.getElementById('selectedFilesInfo');\r\n const numSelectedFilesSpan = document.getElementById('numSelectedFiles');\r\n const selectedFilesList = document.getElementById('selectedFilesList');\r\n\r\n const MAX_FILES = 10; \/\/ Limit for file conversion per action\r\n let filesToConvert = [];\r\n let conversionQuality = parseInt(webpQualitySlider.value) \/ 100; \/\/ Initialize with slider's default value\r\n\r\n \/\/ --- Drag and Drop Handlers ---\r\n ['dragenter', 'dragover'].forEach(eventName => {\r\n dropArea.addEventListener(eventName, () => dropArea.classList.add('drag-over'), false);\r\n });\r\n\r\n ['dragleave', 'drop'].forEach(eventName => {\r\n dropArea.addEventListener(eventName, () => dropArea.classList.remove('drag-over'), false);\r\n });\r\n\r\n dropArea.addEventListener('drop', handleDrop, false);\r\n\r\n function handleDrop(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const dt = e.dataTransfer;\r\n const files = dt.files;\r\n processFiles(files);\r\n }\r\n\r\n \/\/ Prevent default dragover behavior for the entire document to avoid opening files\r\n document.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n document.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n\r\n \/\/ --- File Input Change Handler ---\r\n pngFileInput.addEventListener('change', (event) => {\r\n processFiles(event.target.files);\r\n \/\/ Clear the file input value to allow selecting the same files again\r\n event.target.value = '';\r\n });\r\n\r\n \/\/ --- Quality Slider Handler ---\r\n webpQualitySlider.addEventListener('input', (event) => {\r\n conversionQuality = parseInt(event.target.value) \/ 100;\r\n qualityValueSpan.textContent = `${event.target.value}%`;\r\n \/\/ If files are already selected, re-enable convert button\r\n if (filesToConvert.length > 0) {\r\n convertButton.disabled = false;\r\n }\r\n });\r\n\r\n \/\/ --- Convert Button Handler ---\r\n convertButton.addEventListener('click', () => {\r\n if (filesToConvert.length > 0 && !loadingIndicator.classList.contains('hidden')) {\r\n \/\/ Prevent multiple clicks while converting\r\n return;\r\n }\r\n convertAndDisplayImages(filesToConvert);\r\n });\r\n\r\n \/\/ --- Core Logic ---\r\n function showMessage(message, type = 'info') {\r\n messageBox.textContent = message;\r\n messageBox.classList.remove('hidden', 'bg-red-100', 'text-red-700', 'bg-green-100', 'text-green-700', 'bg-blue-100', 'text-blue-700');\r\n if (type === 'error') {\r\n messageBox.classList.add('bg-red-100', 'text-red-700');\r\n } else if (type === 'success') {\r\n messageBox.classList.add('bg-green-100', 'text-green-700');\r\n } else {\r\n messageBox.classList.add('bg-blue-100', 'text-blue-700');\r\n }\r\n }\r\n\r\n function hideMessage() {\r\n messageBox.classList.add('hidden');\r\n }\r\n\r\n function updateSelectedFilesInfo() {\r\n if (filesToConvert.length > 0) {\r\n selectedFilesInfo.classList.remove('hidden');\r\n numSelectedFilesSpan.textContent = filesToConvert.length;\r\n selectedFilesList.innerHTML = '';\r\n filesToConvert.forEach(file => {\r\n const li = document.createElement('li');\r\n li.textContent = file.name;\r\n selectedFilesList.appendChild(li);\r\n });\r\n convertButton.disabled = false; \/\/ Enable convert button if files are selected\r\n } else {\r\n selectedFilesInfo.classList.add('hidden');\r\n numSelectedFilesSpan.textContent = '0';\r\n selectedFilesList.innerHTML = '';\r\n convertButton.disabled = true; \/\/ Disable convert button if no files\r\n }\r\n }\r\n\r\n async function processFiles(files) {\r\n hideMessage();\r\n convertedImagesOutput.innerHTML = ''; \/\/ Clear previous results\r\n filesToConvert = []; \/\/ Reset files to convert\r\n\r\n if (files.length === 0) {\r\n showMessage(\"No files selected.\", 'info');\r\n updateSelectedFilesInfo();\r\n return;\r\n }\r\n\r\n \/\/ Filter for PNG files and apply limit\r\n const pngFiles = Array.from(files).filter(file => file.type === 'image\/png').slice(0, MAX_FILES);\r\n\r\n if (pngFiles.length === 0) {\r\n showMessage(\"Please select valid PNG image files.\", 'error');\r\n updateSelectedFilesInfo();\r\n return;\r\n }\r\n\r\n if (files.length > MAX_FILES) {\r\n showMessage(`Only the first ${MAX_FILES} PNG files will be converted.`, 'info');\r\n }\r\n\r\n filesToConvert = pngFiles;\r\n updateSelectedFilesInfo(); \/\/ Update UI with selected files\r\n }\r\n\r\n async function convertAndDisplayImages(files) {\r\n if (files.length === 0) {\r\n showMessage(\"No files to convert. Please select PNG files first.\", 'info');\r\n return;\r\n }\r\n\r\n loadingIndicator.classList.remove('hidden');\r\n convertedImagesOutput.innerHTML = ''; \/\/ Clear previous results\r\n convertButton.disabled = true; \/\/ Disable button during conversion\r\n\r\n const conversionPromises = Array.from(files).map(file => convertPngToWebp(file));\r\n\r\n try {\r\n const convertedResults = await Promise.all(conversionPromises);\r\n convertedResults.forEach(result => {\r\n if (result.success) {\r\n displayConvertedImage(result.originalFileName, result.webpDataUrl);\r\n } else {\r\n showMessage(`Failed to convert ${result.originalFileName}: ${result.error}`, 'error');\r\n }\r\n });\r\n if (convertedResults.some(res => res.success)) {\r\n showMessage(\"Conversion complete! Click on images to download.\", 'success');\r\n }\r\n } catch (error) {\r\n showMessage(`An unexpected error occurred during conversion: ${error.message}`, 'error');\r\n } finally {\r\n loadingIndicator.classList.add('hidden');\r\n \/\/ Re-enable convert button if there are still files selected\r\n if (filesToConvert.length > 0) {\r\n convertButton.disabled = false;\r\n }\r\n }\r\n }\r\n\r\n function convertPngToWebp(file) {\r\n return new Promise((resolve) => {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const img = new Image();\r\n img.onload = () => {\r\n const canvas = document.createElement('canvas');\r\n canvas.width = img.width;\r\n canvas.height = img.height;\r\n const ctx = canvas.getContext('2d');\r\n ctx.drawImage(img, 0, 0);\r\n\r\n try {\r\n \/\/ Convert to WEBP with specified quality\r\n const webpDataUrl = canvas.toDataURL('image\/webp', conversionQuality);\r\n resolve({ success: true, originalFileName: file.name, webpDataUrl: webpDataUrl });\r\n } catch (error) {\r\n resolve({ success: false, originalFileName: file.name, error: \"Canvas conversion failed. Image might be corrupted or too large.\" });\r\n }\r\n };\r\n img.onerror = () => {\r\n resolve({ success: false, originalFileName: file.name, error: \"Failed to load image. It might be corrupted.\" });\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.onerror = () => {\r\n resolve({ success: false, originalFileName: file.name, error: \"Failed to read file.\" });\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n function displayConvertedImage(originalFileName, webpDataUrl) {\r\n const card = document.createElement('div');\r\n card.className = 'converted-image-card';\r\n\r\n const img = document.createElement('img');\r\n img.src = webpDataUrl;\r\n img.alt = `Converted ${originalFileName}`;\r\n img.title = `Click to download ${originalFileName.replace(\/\\.png$\/i, '.webp')}`;\r\n\r\n const fileNameSpan = document.createElement('span');\r\n fileNameSpan.textContent = originalFileName.replace(\/\\.png$\/i, '.webp');\r\n fileNameSpan.className = 'text-gray-800 font-medium text-sm break-all';\r\n\r\n const downloadLink = document.createElement('a');\r\n downloadLink.href = webpDataUrl;\r\n downloadLink.download = originalFileName.replace(\/\\.png$\/i, '.webp');\r\n downloadLink.className = 'btn-primary text-sm py-2 px-4 mt-2';\r\n downloadLink.textContent = 'Download';\r\n\r\n \/\/ Add click event to the image itself for download\r\n img.addEventListener('click', () => {\r\n downloadLink.click(); \/\/ Trigger the hidden download link\r\n });\r\n\r\n card.appendChild(img);\r\n card.appendChild(fileNameSpan);\r\n card.appendChild(downloadLink); \/\/ Keep a visible download button as well\r\n convertedImagesOutput.appendChild(card);\r\n }\r\n\r\n \/\/ Initial setup on load\r\n window.onload = function() {\r\n \/\/ Initialize the quality value display\r\n qualityValueSpan.textContent = `${webpQualitySlider.value}%`;\r\n \/\/ Ensure convert button is disabled initially\r\n convertButton.disabled = true;\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0649087 elementor-widget elementor-widget-spacer\" data-id=\"0649087\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PNG to WEBP Converter PNG to WEBP Converter Drag & Drop PNGs here or Select PNG Files Only PNG images […]<\/p>\n","protected":false},"author":1,"featured_media":772,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-748","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Png to Webp converter | H Web Dev.<\/title>\n<meta name=\"description\" content=\"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Png to Webp converter | H Web Dev.\" \/>\n<meta property=\"og:description\" content=\"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/\" \/>\n<meta property=\"og:site_name\" content=\"H Web Dev.\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-19T13:32:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"525\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/\",\"name\":\"Png to Webp converter | H Web Dev.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"datePublished\":\"2025-07-27T00:19:29+00:00\",\"dateModified\":\"2026-01-19T13:32:20+00:00\",\"description\":\"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"width\":525,\"height\":525,\"caption\":\"site logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/h-webdev.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Png to Webp converter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/\",\"name\":\"H Web Dev.\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\",\"name\":\"servinhugor@gmail.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"width\":525,\"height\":525,\"caption\":\"servinhugor@gmail.com\"},\"logo\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\"},\"sameAs\":[\"https:\\\/\\\/h-webdev.com\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Png to Webp converter | H Web Dev.","description":"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/","og_locale":"fr_CA","og_type":"article","og_title":"Png to Webp converter | H Web Dev.","og_description":"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.","og_url":"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/","og_site_name":"H Web Dev.","article_modified_time":"2026-01-19T13:32:20+00:00","og_image":[{"width":525,"height":525,"url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/","url":"https:\/\/h-webdev.com\/png-to-webp-converter\/","name":"Png to Webp converter | H Web Dev.","isPartOf":{"@id":"https:\/\/h-webdev.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#primaryimage"},"image":{"@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#primaryimage"},"thumbnailUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","datePublished":"2025-07-27T00:19:29+00:00","dateModified":"2026-01-19T13:32:20+00:00","description":"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.","breadcrumb":{"@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/h-webdev.com\/png-to-webp-converter\/"]}]},{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#primaryimage","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","width":525,"height":525,"caption":"site logo"},{"@type":"BreadcrumbList","@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/h-webdev.com\/"},{"@type":"ListItem","position":2,"name":"Png to Webp converter"}]},{"@type":"WebSite","@id":"https:\/\/h-webdev.com\/en\/#website","url":"https:\/\/h-webdev.com\/en\/","name":"H Web Dev.","description":"","publisher":{"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/h-webdev.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":["Person","Organization"],"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90","name":"servinhugor@gmail.com","image":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","width":525,"height":525,"caption":"servinhugor@gmail.com"},"logo":{"@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp"},"sameAs":["https:\/\/h-webdev.com\/"]}]}},"uagb_featured_image_src":{"full":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"thumbnail":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-150x150.png",150,150,true],"medium":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-300x300.png",300,300,true],"medium_large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"1536x1536":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"2048x2048":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"trp-custom-language-flag":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-12x12.png",12,12,true]},"uagb_author_info":{"display_name":"servinhugor@gmail.com","author_link":"https:\/\/h-webdev.com\/fr\/author\/servinhugorgmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"PNG to WEBP Converter PNG to WEBP Converter Drag & Drop PNGs here or Select PNG Files Only PNG images […]","_links":{"self":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":45,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/748\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/748\/revisions\/953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media\/772"}],"wp:attachment":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media?parent=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n PNG to WEBP Converter<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n\r\n <style>\r\n }\r\n .container {\r\n margin: auto;\r\n background-color: #ffffff;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);\r\n padding: 30px;\r\n width: 100%;\r\n max-width: 800px;\r\n text-align: center;\r\n }\r\n .file-input-area {\r\n border: 2px dashed #cbd5e0; \/* Gray-300 *\/\r\n border-radius: 12px;\r\n padding: 40px 20px;\r\n cursor: pointer;\r\n transition: border-color 0.3s ease;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n .file-input-area.drag-over {\r\n border-color: #38b2ac; \/* Teal-500 *\/\r\n background-color: #e6fffa; \/* Light teal background *\/\r\n }\r\n .file-input-area input[type=\"file\"] {\r\n display: none; \/* Hide default file input *\/\r\n }\r\n .btn-primary {\r\n background-color: #0E1540; \/* Teal-500 *\/\r\n color: white;\r\n padding: 12px 24px;\r\n border-radius: 8px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n transition: background-color 0.2s;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 8px;\r\n }\r\n .btn-primary:hover {\r\n background-color: #319795; \/* Teal-600 *\/\r\n }\r\n .btn-disabled {\r\n background-color: #a0aec0; \/* Gray-400 *\/\r\n cursor: not-allowed;\r\n }\r\n .loading-spinner {\r\n border: 4px solid rgba(0, 0, 0, 0.1);\r\n border-top: 4px solid #38b2ac;\r\n border-radius: 50%;\r\n width: 30px;\r\n height: 30px;\r\n animation: spin 1s linear infinite;\r\n margin: 0 auto 15px;\r\n }\r\n @keyframes spin {\r\n 0% { transform: rotate(0deg); }\r\n 100% { transform: rotate(360deg); }\r\n }\r\n .converted-image-card {\r\n background-color: #f9fafb;\r\n border: 1px solid #e2e8f0; \/* Gray-200 *\/\r\n border-radius: 10px;\r\n padding: 15px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 10px;\r\n margin-bottom: 15px;\r\n box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);\r\n }\r\n .converted-image-card img {\r\n max-width: 100%;\r\n height: auto;\r\n border-radius: 8px;\r\n border: 1px solid #cbd5e0;\r\n }\r\n .quality-slider-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n margin-top: 20px;\r\n margin-bottom: 20px;\r\n }\r\n .quality-slider-container input[type=\"range\"] {\r\n flex-grow: 1;\r\n -webkit-appearance: none;\r\n width: 100%;\r\n height: 8px;\r\n background: #e2e8f0;\r\n border-radius: 5px;\r\n outline: none;\r\n opacity: 0.7;\r\n transition: opacity .2s;\r\n }\r\n .quality-slider-container input[type=\"range\"]:hover {\r\n opacity: 1;\r\n }\r\n .quality-slider-container input[type=\"range\"]::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n appearance: none;\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #0E1540;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n .quality-slider-container input[type=\"range\"]::-moz-range-thumb {\r\n width: 20px;\r\n height: 20px;\r\n border-radius: 50%;\r\n background: #38b2ac;\r\n cursor: pointer;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.2);\r\n }\r\n .selected-files-info {\r\n margin-top: 15px;\r\n font-size: 0.9rem;\r\n color: #4a5568; \/* Gray-700 *\/\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 flex items-center justify-center min-h-screen p-4\">\r\n <div class=\"container\">\r\n <h1 class=\"text-3xl font-bold text-gray-800 mb-6\">PNG to WEBP Converter<\/h1>\r\n\r\n <div class=\"file-input-area mb-4\" id=\"dropArea\">\r\n <input type=\"file\" id=\"pngFileInput\" accept=\"image\/png\" multiple>\r\n <p class=\"text-lg text-gray-600 mb-2\">Drag & Drop PNGs here or<\/p>\r\n <button class=\"btn-primary\" onclick=\"document.getElementById('pngFileInput').click()\">\r\n Select PNG Files\r\n <\/button>\r\n <p class=\"text-sm text-gray-500 mt-2\">Only PNG images are supported. Max 10 files.<\/p>\r\n <\/div>\r\n\r\n <div id=\"selectedFilesInfo\" class=\"selected-files-info mb-4 hidden\">\r\n <p>Selected <span id=\"numSelectedFiles\">0<\/span> PNG file(s).<\/p>\r\n <ul id=\"selectedFilesList\" class=\"list-disc list-inside text-left mt-2 max-h-24 overflow-y-auto mx-auto w-fit\"><\/ul>\r\n <\/div>\r\n\r\n <div id=\"qualitySettings\" class=\"quality-slider-container\">\r\n <label for=\"webpQuality\" class=\"text-gray-700 font-medium\">WEBP Quality:<\/label>\r\n <input type=\"range\" id=\"webpQuality\" min=\"1\" max=\"100\" value=\"80\">\r\n <span id=\"qualityValue\" class=\"text-gray-700 font-bold\">80%<\/span>\r\n <\/div>\r\n\r\n <button id=\"convertButton\" class=\"btn-primary mt-4 mb-8 w-full md:w-auto px-8 py-3 disabled:opacity-50 disabled:cursor-not-allowed\" disabled>\r\n Convert Files\r\n <\/button>\r\n\r\n <div id=\"loadingIndicator\" class=\"hidden\">\r\n <div class=\"loading-spinner\"><\/div>\r\n <p class=\"text-gray-600\">Converting images...<\/p>\r\n <\/div>\r\n\r\n <div id=\"convertedImagesOutput\" class=\"mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\r\n \r\n <\/div>\r\n\r\n <div id=\"messageBox\" class=\"mt-6 p-4 rounded-lg text-sm hidden\"><\/div>\r\n <\/div>\r\n\r\n <script>\r\n const pngFileInput = document.getElementById('pngFileInput');\r\n const dropArea = document.getElementById('dropArea');\r\n const loadingIndicator = document.getElementById('loadingIndicator');\r\n const convertedImagesOutput = document.getElementById('convertedImagesOutput');\r\n const messageBox = document.getElementById('messageBox');\r\n const webpQualitySlider = document.getElementById('webpQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const qualitySettings = document.getElementById('qualitySettings');\r\n const convertButton = document.getElementById('convertButton');\r\n const selectedFilesInfo = document.getElementById('selectedFilesInfo');\r\n const numSelectedFilesSpan = document.getElementById('numSelectedFiles');\r\n const selectedFilesList = document.getElementById('selectedFilesList');\r\n\r\n const MAX_FILES = 10; \/\/ Limit for file conversion per action\r\n let filesToConvert = [];\r\n let conversionQuality = parseInt(webpQualitySlider.value) \/ 100; \/\/ Initialize with slider's default value\r\n\r\n \/\/ --- Drag and Drop Handlers ---\r\n ['dragenter', 'dragover'].forEach(eventName => {\r\n dropArea.addEventListener(eventName, () => dropArea.classList.add('drag-over'), false);\r\n });\r\n\r\n ['dragleave', 'drop'].forEach(eventName => {\r\n dropArea.addEventListener(eventName, () => dropArea.classList.remove('drag-over'), false);\r\n });\r\n\r\n dropArea.addEventListener('drop', handleDrop, false);\r\n\r\n function handleDrop(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n const dt = e.dataTransfer;\r\n const files = dt.files;\r\n processFiles(files);\r\n }\r\n\r\n \/\/ Prevent default dragover behavior for the entire document to avoid opening files\r\n document.addEventListener('dragover', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n document.addEventListener('drop', (e) => {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n });\r\n\r\n\r\n \/\/ --- File Input Change Handler ---\r\n pngFileInput.addEventListener('change', (event) => {\r\n processFiles(event.target.files);\r\n \/\/ Clear the file input value to allow selecting the same files again\r\n event.target.value = '';\r\n });\r\n\r\n \/\/ --- Quality Slider Handler ---\r\n webpQualitySlider.addEventListener('input', (event) => {\r\n conversionQuality = parseInt(event.target.value) \/ 100;\r\n qualityValueSpan.textContent = `${event.target.value}%`;\r\n \/\/ If files are already selected, re-enable convert button\r\n if (filesToConvert.length > 0) {\r\n convertButton.disabled = false;\r\n }\r\n });\r\n\r\n \/\/ --- Convert Button Handler ---\r\n convertButton.addEventListener('click', () => {\r\n if (filesToConvert.length > 0 && !loadingIndicator.classList.contains('hidden')) {\r\n \/\/ Prevent multiple clicks while converting\r\n return;\r\n }\r\n convertAndDisplayImages(filesToConvert);\r\n });\r\n\r\n \/\/ --- Core Logic ---\r\n function showMessage(message, type = 'info') {\r\n messageBox.textContent = message;\r\n messageBox.classList.remove('hidden', 'bg-red-100', 'text-red-700', 'bg-green-100', 'text-green-700', 'bg-blue-100', 'text-blue-700');\r\n if (type === 'error') {\r\n messageBox.classList.add('bg-red-100', 'text-red-700');\r\n } else if (type === 'success') {\r\n messageBox.classList.add('bg-green-100', 'text-green-700');\r\n } else {\r\n messageBox.classList.add('bg-blue-100', 'text-blue-700');\r\n }\r\n }\r\n\r\n function hideMessage() {\r\n messageBox.classList.add('hidden');\r\n }\r\n\r\n function updateSelectedFilesInfo() {\r\n if (filesToConvert.length > 0) {\r\n selectedFilesInfo.classList.remove('hidden');\r\n numSelectedFilesSpan.textContent = filesToConvert.length;\r\n selectedFilesList.innerHTML = '';\r\n filesToConvert.forEach(file => {\r\n const li = document.createElement('li');\r\n li.textContent = file.name;\r\n selectedFilesList.appendChild(li);\r\n });\r\n convertButton.disabled = false; \/\/ Enable convert button if files are selected\r\n } else {\r\n selectedFilesInfo.classList.add('hidden');\r\n numSelectedFilesSpan.textContent = '0';\r\n selectedFilesList.innerHTML = '';\r\n convertButton.disabled = true; \/\/ Disable convert button if no files\r\n }\r\n }\r\n\r\n async function processFiles(files) {\r\n hideMessage();\r\n convertedImagesOutput.innerHTML = ''; \/\/ Clear previous results\r\n filesToConvert = []; \/\/ Reset files to convert\r\n\r\n if (files.length === 0) {\r\n showMessage(\"No files selected.\", 'info');\r\n updateSelectedFilesInfo();\r\n return;\r\n }\r\n\r\n \/\/ Filter for PNG files and apply limit\r\n const pngFiles = Array.from(files).filter(file => file.type === 'image\/png').slice(0, MAX_FILES);\r\n\r\n if (pngFiles.length === 0) {\r\n showMessage(\"Please select valid PNG image files.\", 'error');\r\n updateSelectedFilesInfo();\r\n return;\r\n }\r\n\r\n if (files.length > MAX_FILES) {\r\n showMessage(`Only the first ${MAX_FILES} PNG files will be converted.`, 'info');\r\n }\r\n\r\n filesToConvert = pngFiles;\r\n updateSelectedFilesInfo(); \/\/ Update UI with selected files\r\n }\r\n\r\n async function convertAndDisplayImages(files) {\r\n if (files.length === 0) {\r\n showMessage(\"No files to convert. Please select PNG files first.\", 'info');\r\n return;\r\n }\r\n\r\n loadingIndicator.classList.remove('hidden');\r\n convertedImagesOutput.innerHTML = ''; \/\/ Clear previous results\r\n convertButton.disabled = true; \/\/ Disable button during conversion\r\n\r\n const conversionPromises = Array.from(files).map(file => convertPngToWebp(file));\r\n\r\n try {\r\n const convertedResults = await Promise.all(conversionPromises);\r\n convertedResults.forEach(result => {\r\n if (result.success) {\r\n displayConvertedImage(result.originalFileName, result.webpDataUrl);\r\n } else {\r\n showMessage(`Failed to convert ${result.originalFileName}: ${result.error}`, 'error');\r\n }\r\n });\r\n if (convertedResults.some(res => res.success)) {\r\n showMessage(\"Conversion complete! Click on images to download.\", 'success');\r\n }\r\n } catch (error) {\r\n showMessage(`An unexpected error occurred during conversion: ${error.message}`, 'error');\r\n } finally {\r\n loadingIndicator.classList.add('hidden');\r\n \/\/ Re-enable convert button if there are still files selected\r\n if (filesToConvert.length > 0) {\r\n convertButton.disabled = false;\r\n }\r\n }\r\n }\r\n\r\n function convertPngToWebp(file) {\r\n return new Promise((resolve) => {\r\n const reader = new FileReader();\r\n reader.onload = (e) => {\r\n const img = new Image();\r\n img.onload = () => {\r\n const canvas = document.createElement('canvas');\r\n canvas.width = img.width;\r\n canvas.height = img.height;\r\n const ctx = canvas.getContext('2d');\r\n ctx.drawImage(img, 0, 0);\r\n\r\n try {\r\n \/\/ Convert to WEBP with specified quality\r\n const webpDataUrl = canvas.toDataURL('image\/webp', conversionQuality);\r\n resolve({ success: true, originalFileName: file.name, webpDataUrl: webpDataUrl });\r\n } catch (error) {\r\n resolve({ success: false, originalFileName: file.name, error: \"Canvas conversion failed. Image might be corrupted or too large.\" });\r\n }\r\n };\r\n img.onerror = () => {\r\n resolve({ success: false, originalFileName: file.name, error: \"Failed to load image. It might be corrupted.\" });\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.onerror = () => {\r\n resolve({ success: false, originalFileName: file.name, error: \"Failed to read file.\" });\r\n };\r\n reader.readAsDataURL(file);\r\n });\r\n }\r\n\r\n function displayConvertedImage(originalFileName, webpDataUrl) {\r\n const card = document.createElement('div');\r\n card.className = 'converted-image-card';\r\n\r\n const img = document.createElement('img');\r\n img.src = webpDataUrl;\r\n img.alt = `Converted ${originalFileName}`;\r\n img.title = `Click to download ${originalFileName.replace(\/\\.png$\/i, '.webp')}`;\r\n\r\n const fileNameSpan = document.createElement('span');\r\n fileNameSpan.textContent = originalFileName.replace(\/\\.png$\/i, '.webp');\r\n fileNameSpan.className = 'text-gray-800 font-medium text-sm break-all';\r\n\r\n const downloadLink = document.createElement('a');\r\n downloadLink.href = webpDataUrl;\r\n downloadLink.download = originalFileName.replace(\/\\.png$\/i, '.webp');\r\n downloadLink.className = 'btn-primary text-sm py-2 px-4 mt-2';\r\n downloadLink.textContent = 'Download';\r\n\r\n \/\/ Add click event to the image itself for download\r\n img.addEventListener('click', () => {\r\n downloadLink.click(); \/\/ Trigger the hidden download link\r\n });\r\n\r\n card.appendChild(img);\r\n card.appendChild(fileNameSpan);\r\n card.appendChild(downloadLink); \/\/ Keep a visible download button as well\r\n convertedImagesOutput.appendChild(card);\r\n }\r\n\r\n \/\/ Initial setup on load\r\n window.onload = function() {\r\n \/\/ Initialize the quality value display\r\n qualityValueSpan.textContent = `${webpQualitySlider.value}%`;\r\n \/\/ Ensure convert button is disabled initially\r\n convertButton.disabled = true;\r\n };\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0649087 elementor-widget elementor-widget-spacer\" data-id=\"0649087\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>PNG to WEBP Converter PNG to WEBP Converter Drag & Drop PNGs here or Select PNG Files Only PNG images […]<\/p>\n","protected":false},"author":1,"featured_media":772,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-748","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"\n<title>Png to Webp converter | H Web Dev.<\/title>\n<meta name=\"description\" content=\"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Png to Webp converter | H Web Dev.\" \/>\n<meta property=\"og:description\" content=\"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/\" \/>\n<meta property=\"og:site_name\" content=\"H Web Dev.\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-19T13:32:20+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png\" \/>\n\t<meta property=\"og:image:width\" content=\"525\" \/>\n\t<meta property=\"og:image:height\" content=\"525\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Estimation du temps de lecture\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/\",\"name\":\"Png to Webp converter | H Web Dev.\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"datePublished\":\"2025-07-27T00:19:29+00:00\",\"dateModified\":\"2026-01-19T13:32:20+00:00\",\"description\":\"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#primaryimage\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.png\",\"width\":525,\"height\":525,\"caption\":\"site logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/png-to-webp-converter\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/h-webdev.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Png to Webp converter\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/\",\"name\":\"H Web Dev.\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/h-webdev.com\\\/en\\\/#\\\/schema\\\/person\\\/f61edc8649dfc6bdf57926a9b5328a90\",\"name\":\"servinhugor@gmail.com\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"url\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"contentUrl\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\",\"width\":525,\"height\":525,\"caption\":\"servinhugor@gmail.com\"},\"logo\":{\"@id\":\"https:\\\/\\\/h-webdev.com\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/h-webdev-logo.webp\"},\"sameAs\":[\"https:\\\/\\\/h-webdev.com\\\/\"]}]}<\/script>\n","yoast_head_json":{"title":"Png to Webp converter | H Web Dev.","description":"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/","og_locale":"fr_CA","og_type":"article","og_title":"Png to Webp converter | H Web Dev.","og_description":"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.","og_url":"https:\/\/h-webdev.com\/fr\/png-to-webp-converter\/","og_site_name":"H Web Dev.","article_modified_time":"2026-01-19T13:32:20+00:00","og_image":[{"width":525,"height":525,"url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_misc":{"Estimation du temps de lecture":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/","url":"https:\/\/h-webdev.com\/png-to-webp-converter\/","name":"Png to Webp converter | H Web Dev.","isPartOf":{"@id":"https:\/\/h-webdev.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#primaryimage"},"image":{"@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#primaryimage"},"thumbnailUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","datePublished":"2025-07-27T00:19:29+00:00","dateModified":"2026-01-19T13:32:20+00:00","description":"Convert PNG to WebP instantly with this free online tool. Optimize images for the web without losing quality. No signup or software needed.","breadcrumb":{"@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/h-webdev.com\/png-to-webp-converter\/"]}]},{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#primaryimage","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png","width":525,"height":525,"caption":"site logo"},{"@type":"BreadcrumbList","@id":"https:\/\/h-webdev.com\/png-to-webp-converter\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/h-webdev.com\/"},{"@type":"ListItem","position":2,"name":"Png to Webp converter"}]},{"@type":"WebSite","@id":"https:\/\/h-webdev.com\/en\/#website","url":"https:\/\/h-webdev.com\/en\/","name":"H Web Dev.","description":"","publisher":{"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/h-webdev.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":["Person","Organization"],"@id":"https:\/\/h-webdev.com\/en\/#\/schema\/person\/f61edc8649dfc6bdf57926a9b5328a90","name":"servinhugor@gmail.com","image":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","url":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","contentUrl":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp","width":525,"height":525,"caption":"servinhugor@gmail.com"},"logo":{"@id":"https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.webp"},"sameAs":["https:\/\/h-webdev.com\/"]}]}},"uagb_featured_image_src":{"full":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"thumbnail":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-150x150.png",150,150,true],"medium":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-300x300.png",300,300,true],"medium_large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"large":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"1536x1536":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"2048x2048":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo.png",525,525,false],"trp-custom-language-flag":["https:\/\/h-webdev.com\/wp-content\/uploads\/2025\/07\/h-webdev-logo-12x12.png",12,12,true]},"uagb_author_info":{"display_name":"servinhugor@gmail.com","author_link":"https:\/\/h-webdev.com\/fr\/author\/servinhugorgmail-com\/"},"uagb_comment_info":0,"uagb_excerpt":"PNG to WEBP Converter PNG to WEBP Converter Drag & Drop PNGs here or Select PNG Files Only PNG images […]","_links":{"self":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/748","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/comments?post=748"}],"version-history":[{"count":45,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/748\/revisions"}],"predecessor-version":[{"id":953,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/pages\/748\/revisions\/953"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media\/772"}],"wp:attachment":[{"href":"https:\/\/h-webdev.com\/fr\/wp-json\/wp\/v2\/media?parent=748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}