Convertisseur AVIF en PNG<\/title>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b, \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c avif-) --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n .avif-converter-wrapper { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n max-width: 550px;\r\n margin: 0px auto 30px auto;\r\n font-family: sans-serif;\r\n font-size: 16px;\r\n }\r\n\r\n \/* --- \u0417\u043e\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .avif-upload-area { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n padding: 80px 60px 60px 60px;\r\n text-align: center;\r\n border: 2px dashed #d0d4dc;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 200px;\r\n }\r\n .avif-upload-area.drag-over { border-color: #007bff; background-color: #f8f9fa; }\r\n .avif-upload-area.upload-error { border-color: #dc3545 !important; }\r\n .avif-upload-area input[type=\"file\"] { display: none; }\r\n .avif-upload-button { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: inline-block;\r\n background-color: #007bff;\r\n color: #ffffff;\r\n padding: 12px 30px;\r\n border-radius: 50px;\r\n font-size: 1em;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n margin-bottom: 15px;\r\n border: none; outline: none;\r\n }\r\n .avif-upload-button:hover { background-color: #0056b3; }\r\n .avif-upload-button:active { transform: scale(0.98); }\r\n .avif-upload-hint { color: #6c757d; margin: 0; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .avif-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .avif-upload-hint .main-hint { font-size: 1.0em; }\r\n .avif-upload-hint .sub-hint { font-size: 0.85em; }\r\n\r\n \/* --- \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a --- *\/\r\n .avif-converter-settings { margin-top: 15px; text-align: center; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .avif-settings-toggle { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n cursor: pointer; color: #007bff; text-decoration: none; border: 1px solid #007bff;\r\n padding: 8px 15px; border-radius: 20px; display: inline-block; margin-bottom: 15px;\r\n font-size: 0.9em; transition: background-color 0.3s, color 0.3s;\r\n }\r\n .avif-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .avif-settings-content { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: none;\r\n padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #fdfdfd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n text-align: left; font-size: 0.9em;\r\n }\r\n .avif-settings-content.is-visible { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: block !important;\r\n }\r\n .setting-group { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\r\n .setting-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }\r\n .setting-group h4 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: #333; }\r\n .avif-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .avif-settings-content .inline-label { display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n small { color: #6c757d; display: block; margin-top: 8px; line-height: 1.4; }\r\n .hidden { display: none !important; }\r\n\r\n \/* === \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c avif-) === *\/\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"] { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 80px; margin-right: 10px; display: inline-block; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: auto; min-width: 110px; display: inline-block; cursor: pointer; background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px; }\r\n .avif-converter-wrapper .avif-settings-content select::-ms-expand { display: none; }\r\n .avif-converter-wrapper .avif-settings-content select option { background-color: #f0f0f0; color: #333; padding: 5px 10px; }\r\n .avif-converter-wrapper .avif-settings-content select:focus,\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }\r\n \/* === \u041a\u041e\u041d\u0415\u0426 \u0421\u0422\u0418\u041b\u0415\u0419 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER === *\/\r\n\r\n \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u043f\u0443\u0442\u044b *\/\r\n .avif-settings-content input[type=\"color\"], .avif-settings-content input[type=\"range\"] { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }\r\n .avif-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .avif-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .avif-settings-content input[type=\"checkbox\"] { margin-right: 5px; vertical-align: middle; width: 16px; height: 16px; }\r\n .aspect-ratio-label, .bg-color-label { font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer; }\r\n .quality-setting { display: flex; align-items: center; gap: 10px; margin-top: 10px; }\r\n .quality-setting label { margin-bottom: 0; }\r\n .quality-setting input[type=\"range\"] { flex-grow: 1; margin-bottom: 0; }\r\n .quality-setting span { min-width: 30px; text-align: right; font-weight: bold; }\r\n .transform-buttons { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .transform-buttons button { padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; background-color: #fff; color: #333; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }\r\n .transform-buttons button:hover { border-color: #999; background-color: #f0f0f0; color: #333; }\r\n .transform-buttons button:active { background-color: #e0e0e0; }\r\n .transform-buttons button:disabled { color: #999; cursor: not-allowed; background-color: #f8f8f8; border-color: #ddd; }\r\n\r\n \/* --- \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f --- *\/\r\n .avif-converter-status-area { margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); }\r\n .avif-converter-status { font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em; line-height: 1.5; word-wrap: break-word; }\r\n .avif-converter-status.success { color: #155724; font-weight: bold; }\r\n .avif-converter-status.error { color: #721c24; font-weight: bold; }\r\n .avif-converter-download-area a { display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em; transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer; }\r\n .avif-converter-download-area a:hover { background-color: #218838; }\r\n .avif-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"avif-converter-wrapper\"> \r\n\r\n \r\n <div class=\"avif-upload-area\" id=\"avifUploadArea\"> \r\n \r\n <input type=\"file\" id=\"avifFileInput\" accept=\".avif, image\/avif\" \/>\r\n \r\n <label for=\"avifFileInput\" class=\"avif-upload-button\" role=\"button\" tabindex=\"0\">\r\n T\u00e9l\u00e9charger une image AVIF\r\n <\/label>\r\n <div class=\"avif-upload-hint\"> \r\n <span class=\"main-hint\">ou d\u00e9posez un fichier ici<\/span>\r\n <span class=\"sub-hint\">(Convertit les fichiers AVIF en PNG par d\u00e9faut. AVIF anim\u00e9 convertit la premi\u00e8re image.)<\/span> \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"avif-converter-settings\"> \r\n <span class=\"avif-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\"> \r\n Param\u00e8tres avanc\u00e9s \u25bc\r\n <\/span>\r\n <div class=\"avif-settings-content\" id=\"settingsContent\"> \r\n \r\n <div class=\"setting-group\">\r\n <h4>Format et qualit\u00e9 de sortie<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Format:<\/label>\r\n <select id=\"outputFormat\">\r\n <option value=\"image\/png\" selected>PNG<\/option>\r\n <option value=\"image\/jpeg\">JPEG<\/option>\r\n <option value=\"image\/webp\">WebP<\/option>\r\n <\/select>\r\n <div class=\"quality-setting hidden\" id=\"qualityControl\">\r\n <label for=\"outputQuality\" class=\"inline-label\">Qualit\u00e9:<\/label>\r\n <input type=\"range\" id=\"outputQuality\" min=\"0.1\" max=\"1.0\" step=\"0.05\" value=\"0.9\">\r\n <span id=\"qualityValue\">0.90<\/span>\r\n <\/div>\r\n <small>Remarque\u00a0: le format PNG est sans perte, le curseur de qualit\u00e9 affecte uniquement JPEG\/WebP.<\/small>\r\n <small>Remarque\u00a0: les m\u00e9tadonn\u00e9es d'AVIF peuvent \u00eatre perdues lors de la conversion.<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Redimensionner<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Largeur:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Hauteur:<\/label>\r\n <input type=\"number\" id=\"outputHeight\" placeholder=\"auto\" min=\"1\">\r\n <\/div>\r\n <div style=\"margin-top: 10px;\">\r\n <input type=\"checkbox\" id=\"maintainAspectRatio\" checked>\r\n <label for=\"maintainAspectRatio\" class=\"aspect-ratio-label\">Maintenir le rapport hauteur\/largeur<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Arri\u00e8re-plan<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Ajouter une couleur d'arri\u00e8re-plan\u00a0:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(Utile pour supprimer la transparence ou pour la sortie au format JPEG)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformer<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Rotation de 90\u00b0 dans le sens des aiguilles d'une montre\">Rotation de 90\u00b0 dans le sens des aiguilles d'une montre<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Retourner horizontalement\">Retourner horizontalement<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Retourner verticalement\">Retourner verticalement<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"R\u00e9initialiser les transformations\">R\u00e9initialiser les transformations<\/button>\r\n <\/div>\r\n <small>(La rotation peut affecter les dimensions si le rapport hauteur\/largeur n'est pas maintenu)<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n\r\n \r\n <div class=\"avif-converter-status-area\" id=\"statusArea\" style=\"display: none;\"> \r\n <div class=\"avif-converter-status\" id=\"converterStatus\"><\/div> \r\n <div class=\"avif-converter-download-area\" id=\"downloadLinkContainer\"><\/div> \r\n <\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ --- \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM ---\r\n const uploadArea = document.getElementById('avifUploadArea'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const fileInput = document.getElementById('avifFileInput'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const statusArea = document.getElementById('statusArea');\r\n const statusMessage = document.getElementById('converterStatus');\r\n const downloadLinkContainer = document.getElementById('downloadLinkContainer');\r\n const toggleSettingsBtn = document.getElementById('toggleSettingsBtn');\r\n const settingsContent = document.getElementById('settingsContent');\r\n const outputFormatSelect = document.getElementById('outputFormat');\r\n const qualityControlDiv = document.getElementById('qualityControl');\r\n const outputQualitySlider = document.getElementById('outputQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const outputWidthInput = document.getElementById('outputWidth');\r\n const outputHeightInput = document.getElementById('outputHeight');\r\n const maintainAspectRatioCheckbox = document.getElementById('maintainAspectRatio');\r\n const useBackgroundColorCheckbox = document.getElementById('useBackgroundColor');\r\n const backgroundColorPicker = document.getElementById('backgroundColor');\r\n const rotateBtn = document.getElementById('rotateBtn');\r\n const flipHorizontalBtn = document.getElementById('flipHorizontalBtn');\r\n const flipVerticalBtn = document.getElementById('flipVerticalBtn');\r\n const resetTransformBtn = document.getElementById('resetTransformBtn');\r\n\r\n \/\/ --- \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 ---\r\n const elements = { uploadArea, fileInput, statusArea, statusMessage, downloadLinkContainer, toggleSettingsBtn, settingsContent, outputFormatSelect, qualityControlDiv, outputQualitySlider, qualityValueSpan, outputWidthInput, outputHeightInput, maintainAspectRatioCheckbox, useBackgroundColorCheckbox, backgroundColorPicker, rotateBtn, flipHorizontalBtn, flipVerticalBtn, resetTransformBtn };\r\n for (const key in elements) {\r\n if (!elements[key]) {\r\n console.error(`Converter init error: Element with ID or reference \"${key}\" not found.`);\r\n if (uploadArea) uploadArea.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n else document.body.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n return;\r\n }\r\n }\r\n\r\n \/\/ --- \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n let currentRotation = 0;\r\n let isFlippedHorizontal = false;\r\n let isFlippedVertical = false;\r\n let originalImageDimensions = { width: 0, height: 0 };\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 ---\r\n function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'avif-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n downloadLinkContainer.innerHTML = '';\r\n statusArea.style.display = 'none';\r\n fileInput.value = '';\r\n uploadArea.classList.remove('upload-error');\r\n resetTransformations();\r\n updateTransformButtonStates();\r\n }\r\n\r\n function showStatus(message, type = 'info') {\r\n const prefix = type === 'error' ? '\u274c ' : (type === 'success' ? '\u2705 ' : '\u23f3 ');\r\n statusMessage.textContent = prefix + message;\r\n statusMessage.className = 'avif-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n uploadArea.classList.remove('upload-error');\r\n if (type === 'success') { statusMessage.classList.add('success'); }\r\n else if (type === 'error') { statusMessage.classList.add('error'); uploadArea.classList.add('upload-error'); }\r\n if (type !== 'success') { if (type === 'error') downloadLinkContainer.innerHTML = ''; }\r\n statusArea.style.display = 'block';\r\n }\r\n\r\n function toggleSettings() { \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e \u0441 classList\r\n const isCurrentlyVisible = settingsContent.classList.contains('is-visible');\r\n if (isCurrentlyVisible) {\r\n settingsContent.classList.remove('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n } else {\r\n settingsContent.classList.add('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25b2';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'true');\r\n settingsContent.setAttribute('aria-hidden', 'false');\r\n }\r\n }\r\n function updateQualityControlVisibility() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function updateQualityValueDisplay() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function toggleBackgroundColorPicker() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function resetTransformations() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function updateTransformButtonStates() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n\r\n \/\/ --- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 ---\r\n function handleFile(file) {\r\n resetInterface();\r\n if (!file) return;\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e AVIF)\r\n const fileName = file.name;\r\n const fileMimeType = file.type || '';\r\n const isAvif = \/\\.avif$\/i.test(fileName) || fileMimeType === 'image\/avif'; \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 .avif \u0438\u043b\u0438 image\/avif\r\n\r\n if (!isAvif) {\r\n showStatus(`Incorrect file format. Please upload an AVIF file (received: ${fileName}, type: ${fileMimeType || 'unknown'}).`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Reading file.`, 'info');\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n showStatus(`Processing \"${fileName}\"... Decoding image.`, 'info');\r\n const img = new Image();\r\n img.onload = function() {\r\n \/\/ ... \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u0430 JPG\/WebP ...\r\n originalImageDimensions.width = img.naturalWidth; originalImageDimensions.height = img.naturalHeight;\r\n if (originalImageDimensions.width === 0 || originalImageDimensions.height === 0) { \/*...*\/ return; }\r\n showStatus(`Processing \"${fileName}\"... Applying settings.`, 'info');\r\n const mimeType = outputFormatSelect.value; const quality = parseFloat(outputQualitySlider.value);\r\n const maintainRatio = maintainAspectRatioCheckbox.checked; const useBG = useBackgroundColorCheckbox.checked; const bgColor = backgroundColorPicker.value;\r\n let desiredWidth = parseInt(outputWidthInput.value, 10) || 0; let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n let targetWidth = originalImageDimensions.width; let targetHeight = originalImageDimensions.height;\r\n if (desiredWidth > 0 || desiredHeight > 0) { if (maintainRatio) { \/*...*\/ } else { \/*...*\/ } }\r\n targetWidth = Math.max(1, targetWidth); targetHeight = Math.max(1, targetHeight);\r\n const canvas = document.createElement('canvas'); const requiresSwap = currentRotation === 90 || currentRotation === 270;\r\n canvas.width = requiresSwap ? targetHeight : targetWidth; canvas.height = requiresSwap ? targetWidth : targetHeight;\r\n const MAX_CANVAS_AREA = 16384 * 16384; const MAX_CANVAS_DIM = 32767;\r\n if (canvas.width <= 0 || canvas.height <= 0 || canvas.width > MAX_CANVAS_DIM || canvas.height > MAX_CANVAS_DIM || (canvas.width * canvas.height > MAX_CANVAS_AREA)) { \/*...*\/ return; }\r\n const ctx = canvas.getContext('2d'); if (!ctx) { \/*...*\/ return; }\r\n try {\r\n ctx.save();\r\n if (useBG || mimeType === 'image\/jpeg') { ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); }\r\n const centerX = canvas.width \/ 2; const centerY = canvas.height \/ 2; ctx.translate(centerX, centerY);\r\n if (currentRotation !== 0) ctx.rotate(currentRotation * Math.PI \/ 180);\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n const drawX = -targetWidth \/ 2; const drawY = -targetHeight \/ 2;\r\n ctx.drawImage(img, 0, 0, originalImageDimensions.width, originalImageDimensions.height, drawX, drawY, targetWidth, targetHeight);\r\n ctx.restore();\r\n showStatus(`Processing \"${fileName}\"... Encoding final image.`, 'info');\r\n let exportQuality = quality; if (mimeType === 'image\/webp' && quality === 1.0) { console.log(\"Attempting near-lossless WebP (quality 1.0)\"); }\r\n const dataUrl = canvas.toDataURL(mimeType, (mimeType === 'image\/jpeg' || mimeType === 'image\/webp') ? exportQuality : undefined);\r\n if (!dataUrl || dataUrl === 'data:,') { throw new Error(\"Failed to encode image.\"); }\r\n const link = document.createElement('a'); link.href = dataUrl;\r\n const originalName = fileName.replace(\/\\.avif$\/i, ''); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c .avif\r\n let extension = mimeType.split('\/')[1]; if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted.${extension}`; \/\/ \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n link.textContent = `Download ${link.download}`; downloadLinkContainer.innerHTML = ''; downloadLinkContainer.appendChild(link);\r\n link.click(); \/\/ \u0410\u0432\u0442\u043e-\u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n } catch (error) { \/* \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a *\/ }\r\n };\r\n img.onerror = function(err) {\r\n console.error(\"AVIF loading error:\", err);\r\n \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c AVIF\r\n showStatus(`Error loading AVIF image \"${fileName}\". Your browser might not support AVIF decoding, or the file is corrupted.`, 'error');\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.onerror = function(err) { \/*...*\/ showStatus(`Error reading file \"${fileName}\".`, 'error'); };\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n \/\/ --- \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 ---\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\r\n toggleSettingsBtn.addEventListener('click', toggleSettings);\r\n toggleSettingsBtn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSettings(); } });\r\n outputFormatSelect.addEventListener('change', updateQualityControlVisibility);\r\n outputQualitySlider.addEventListener('input', updateQualityValueDisplay);\r\n outputWidthInput.addEventListener('input', () => { if (maintainAspectRatioCheckbox.checked && outputWidthInput.value) outputHeightInput.value = ''; });\r\n outputHeightInput.addEventListener('input', () => { if (maintainAspectRatioCheckbox.checked && outputHeightInput.value) outputWidthInput.value = ''; });\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n useBackgroundColorCheckbox.addEventListener('change', toggleBackgroundColorPicker);\r\n function applyTransformation(transformFunc) { \/*...*\/ } \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430 \u0436\u0435\r\n rotateBtn.addEventListener('click', () => applyTransformation(() => { currentRotation = (currentRotation + 90) % 360; }));\r\n flipHorizontalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedHorizontal = !isFlippedHorizontal; }));\r\n flipVerticalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedVertical = !isFlippedVertical; }));\r\n resetTransformBtn.addEventListener('click', () => applyTransformation(() => { resetTransformations(); }));\r\n\r\n \/\/ \u0412\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID avifFileInput)\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files.length > 0) { handleFile(event.target.files[0]); }\r\n else { resetInterface(); }\r\n });\r\n\r\n \/\/ Drag and Drop (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID avifUploadArea)\r\n uploadArea.addEventListener('dragover', (event) => { \/*...*\/ });\r\n uploadArea.addEventListener('dragleave', (event) => { \/*...*\/ });\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault(); uploadArea.classList.remove('drag-over');\r\n if (event.dataTransfer.files.length > 0) {\r\n const droppedFile = event.dataTransfer.files[0];\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0440\u0438 Drop (\u0442\u043e\u043b\u044c\u043a\u043e AVIF)\r\n const fileNameDrop = droppedFile.name; const fileMimeTypeDrop = droppedFile.type || '';\r\n const isAvifDrop = \/\\.avif$\/i.test(fileNameDrop) || fileMimeTypeDrop === 'image\/avif';\r\n if (isAvifDrop) {\r\n fileInput.files = event.dataTransfer.files; handleFile(droppedFile);\r\n } else {\r\n showStatus(`Incorrect file format dropped. Please drop an AVIF file (received: ${fileNameDrop}, type: ${fileMimeTypeDrop || 'unknown'}).`, 'error');\r\n fileInput.value = '';\r\n }\r\n } else { resetInterface(); }\r\n });\r\n\r\n \/\/ --- \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates();\r\n\r\n}); \/\/ \u041a\u043e\u043d\u0435\u0446 'DOMContentLoaded'\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-575d0c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"575d0c1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f3365e0\" data-id=\"f3365e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c4ab0e7 elementor-widget elementor-widget-text-editor\" data-id=\"c4ab0e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Autres formats : <a href=\"https:\/\/pngate.com\/fr\/webp-vers-png\/\">Webp vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/gif-to-png\/\">Gif en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/jpeg-to-png\/\">JPEG en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/svg-to-png\/\">SVG en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/heic-to-png\/\">HEIC vers PNG<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-78fa69d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78fa69d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-83e295d\" data-id=\"83e295d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7befef0 elementor-widget elementor-widget-text-editor\" data-id=\"7befef0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5>Vous avez trouv\u00e9 cela utile\u00a0? Partagez-le\u00a0!<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3e8b238 elementor-share-buttons--shape-rounded elementor-share-buttons--align-center elementor-share-buttons--view-icon-text elementor-share-buttons--skin-gradient elementor-grid-0 elementor-share-buttons--color-official elementor-widget elementor-widget-share-buttons\" data-id=\"3e8b238\" data-element_type=\"widget\" data-widget_type=\"share-buttons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-grid\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_pinterest\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on pinterest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-pinterest\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tPinterest\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_telegram\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on telegram\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-telegram\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tT\u00e9l\u00e9gramme\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_facebook\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on facebook\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-facebook\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tFacebook\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_twitter\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on twitter\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-twitter\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tGazouillement\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_reddit\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on reddit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-reddit\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tReddit\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-53d46b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53d46b4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5df0925\" data-id=\"5df0925\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e819237\" data-id=\"e819237\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2d2fa93 elementor-widget elementor-widget-text-editor\" data-id=\"2d2fa93\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vous cherchez un moyen simple et rapide de convertir gratuitement des fichiers AVIF en PNG en ligne\u00a0? Vous \u00eates au bon endroit. Notre convertisseur AVIF en PNG en ligne vous permet de convertir des images AVIF nouvelle g\u00e9n\u00e9ration en fichiers PNG largement pris en charge, sans aucune installation, sans perte de qualit\u00e9 et sans 100%.<\/p><h2>Qu'est-ce que l'AVIF ?<\/h2><p>AVIF (AV1 Image File Format) est un format d'image moderne con\u00e7u pour une compression \u00e9lev\u00e9e et une excellente qualit\u00e9 visuelle. Bas\u00e9 sur le codec vid\u00e9o AV1, il gagne en popularit\u00e9 gr\u00e2ce \u00e0 sa taille de fichier r\u00e9duite et \u00e0 ses performances \u00e9lev\u00e9es.<\/p><p>Les images AVIF sont id\u00e9ales pour les sites web et les applications, car elles se chargent plus rapidement et consomment moins de bande passante. Cependant, tous les logiciels, navigateurs et outils de montage ne prennent pas encore en charge le format AVIF. C'est pourquoi vous pourriez rencontrer des probl\u00e8mes lors de l'ouverture ou de l'utilisation d'un fichier AVIF.<\/p><h2>Pourquoi convertir AVIF en PNG\u00a0?<\/h2><p>Bien que l'AVIF offre une meilleure compression, le PNG reste l'un des formats d'image les plus largement pris en charge, toutes plateformes confondues. Voici les principales raisons de convertir l'AVIF en PNG\u00a0:<\/p><ul><li><strong>Compatibilit\u00e9<\/strong>:Les fichiers PNG sont pris en charge par presque tous les navigateurs, appareils et \u00e9diteurs d'images.<\/li><li><strong>Aucune perte de qualit\u00e9<\/strong>:PNG est un format sans perte, ce qui signifie qu'il conserve tous les d\u00e9tails de l'image intacts.<\/li><li><strong>Montage plus facile<\/strong>:De nombreux programmes d'\u00e9dition d'images ne prennent pas encore en charge AVIF, mais tous prennent en charge PNG.<\/li><li><strong>Partage rapide<\/strong>:Les fichiers PNG sont plus faciles \u00e0 t\u00e9l\u00e9charger ou \u00e0 partager sur des plateformes telles que les r\u00e9seaux sociaux, les applications de messagerie et les lecteurs cloud.<\/li><\/ul><p>Si vous avez besoin d'un format d'image universel, notre convertisseur AVIF en PNG gratuit en ligne est la solution la plus rapide.<\/p><h2>Comment convertir un fichier AVIF en PNG en ligne (gratuitement)<\/h2><p>Convertir des fichiers AVIF en PNG n'a jamais \u00e9t\u00e9 aussi simple. Avec notre convertisseur d'images AVIF gratuit, nul besoin d'installer de logiciel ni de vous soucier des comp\u00e9tences techniques. Suivez simplement ces \u00e9tapes simples\u00a0:<\/p><ol><li><strong>T\u00e9l\u00e9chargez votre fichier AVIF<\/strong> \u2013 Faites glisser et d\u00e9posez ou cliquez pour s\u00e9lectionner votre image.<\/li><li><strong>D\u00e9marrer la conversion<\/strong> \u2013 Notre outil le convertit automatiquement en PNG en quelques secondes.<\/li><li><strong>T\u00e9l\u00e9charger le fichier PNG<\/strong> \u2013 Un clic et votre nouvelle image est pr\u00eate \u00e0 \u00eatre utilis\u00e9e.<\/li><\/ol><p>Ce convertisseur AVIF en ligne fonctionne directement dans votre navigateur, garantissant la s\u00e9curit\u00e9 et la confidentialit\u00e9 de vos fichiers. Que vous utilisiez un ordinateur, une tablette ou un appareil mobile, vous pouvez convertir des images sans perte de qualit\u00e9, \u00e0 tout moment et en tout lieu.<\/p><h2>Avantages de l'utilisation de notre convertisseur AVIF en PNG en ligne<\/h2><ul><li><strong>100% Gratuit<\/strong> \u2013 Pas de frais cach\u00e9s, pas de limites.<\/li><li><strong>Rapide et facile<\/strong> \u2013 Conversion en un clic sans courbe d\u2019apprentissage.<\/li><li><strong>Aucune installation<\/strong> \u2013 Utilisez-le directement dans votre navigateur.<\/li><li><strong>S\u00e9curis\u00e9<\/strong> \u2013 Vos fichiers ne sont jamais stock\u00e9s ni partag\u00e9s.<\/li><li><strong>Pr\u00e9serve la qualit\u00e9<\/strong> \u2013 Convertit les images sans perte de compression.<\/li><li><strong>Multi-plateforme<\/strong> \u2013 Fonctionne sur Windows, macOS, Android, iOS et plus encore.<\/li><\/ul><p>Que vous soyez concepteur, d\u00e9veloppeur ou que vous ayez simplement besoin d'un changement de format rapide, notre convertisseur d'images AVIF gratuit est votre meilleur choix.<\/p><h2>AVIF vs PNG\u00a0: comparaison rapide<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Fonctionnalit\u00e9<\/th><th>AVIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Compression<\/td><td>\u00c9lev\u00e9 (tailles de fichiers plus petites)<\/td><td>Sans perte (fichiers plus volumineux)<\/td><\/tr><tr><td>Transparence<\/td><td>Soutenu<\/td><td>Soutenu<\/td><\/tr><tr><td>Prise en charge du navigateur<\/td><td>Limit\u00e9<\/td><td>Universel<\/td><\/tr><tr><td>Logiciel de montage<\/td><td>Support limit\u00e9<\/td><td>Largement soutenu<\/td><\/tr><tr><td>Cas d'utilisation<\/td><td>Optimisation Web<\/td><td>Utilisation g\u00e9n\u00e9rale, \u00e9dition, partage<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-33f395e\" data-id=\"33f395e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Convertisseur AVIF en PNG\u00a0: convertissez gratuitement vos images AVIF en PNG en ligne. T\u00e9l\u00e9chargez simplement vos images AVIF ci-dessous et obtenez des fichiers PNG de haute qualit\u00e9 en quelques secondes.<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4888,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-4727","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/comments?post=4727"}],"version-history":[{"count":44,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4727\/revisions"}],"predecessor-version":[{"id":4977,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4727\/revisions\/4977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media\/4888"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media?parent=4727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}