Convertidor de AVIF a 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 Subir imagen AVIF\r\n <\/label>\r\n <div class=\"avif-upload-hint\"> \r\n <span class=\"main-hint\">o suelta un archivo aqu\u00ed<\/span>\r\n <span class=\"sub-hint\">(Convierte archivos AVIF a PNG de forma predeterminada. El AVIF animado convierte el primer fotograma).<\/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 Configuraci\u00f3n avanzada \u25bc\r\n <\/span>\r\n <div class=\"avif-settings-content\" id=\"settingsContent\"> \r\n \r\n <div class=\"setting-group\">\r\n <h4>Formato y calidad de salida<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Formato:<\/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\">Calidad:<\/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>Nota: PNG no tiene p\u00e9rdida, el control deslizante de calidad afecta solo a JPEG\/WebP.<\/small>\r\n <small>Nota: Los metadatos de AVIF podr\u00edan perderse durante la conversi\u00f3n.<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Cambiar el tama\u00f1o<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Ancho:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Altura:<\/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\">Mantener la relaci\u00f3n de aspecto<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Fondo<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">A\u00f1adir color de fondo:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(\u00datil para eliminar transparencias o si se imprime en formato JPEG)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformar<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Girar 90\u00b0 en el sentido de las agujas del reloj\">Girar 90\u00b0 en sentido horario<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Voltear horizontalmente\">Voltear horizontalmente<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Voltear verticalmente\">Voltear verticalmente<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Restablecer transformaciones\">Restablecer transformaciones<\/button>\r\n <\/div>\r\n <small>(La rotaci\u00f3n podr\u00eda afectar las dimensiones si no se mantiene la relaci\u00f3n de aspecto)<\/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>Otros formatos: <a href=\"https:\/\/pngate.com\/es\/webp-a-png\/\">Webp a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/gif-to-png\/\">GIF a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/jpeg-to-png\/\">JPEG a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/svg-to-png\/\">SVG a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/heic-to-png\/\">HEIC a 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>\u00bfTe result\u00f3 \u00fatil? \u00a1Comp\u00e1rtelo!<\/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\tTelegrama\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\tGorjeo\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>\u00bfBuscas una forma r\u00e1pida y sencilla de convertir AVIF a PNG online gratis? Est\u00e1s en el lugar indicado. Nuestro conversor de AVIF a PNG online te ayuda a convertir im\u00e1genes AVIF de \u00faltima generaci\u00f3n en archivos PNG con amplia compatibilidad, sin necesidad de instalar nada, sin p\u00e9rdida de calidad y sin coste adicional.<\/p><h2>\u00bfQu\u00e9 es AVIF?<\/h2><p>AVIF (Formato de Archivo de Imagen AV1) es un formato de imagen moderno dise\u00f1ado para alta compresi\u00f3n con excelente calidad visual. Se basa en el c\u00f3dec de video AV1 y est\u00e1 ganando popularidad gracias a su peque\u00f1o tama\u00f1o de archivo y su eficiente rendimiento.<\/p><p>Las im\u00e1genes AVIF son ideales para sitios web y aplicaciones porque cargan m\u00e1s r\u00e1pido y reducen el consumo de ancho de banda. Sin embargo, a\u00fan no todos los programas, navegadores ni herramientas de edici\u00f3n son compatibles con AVIF. Por eso, podr\u00edas tener problemas al intentar abrir o usar un archivo AVIF.<\/p><h2>\u00bfPor qu\u00e9 convertir AVIF a PNG?<\/h2><p>Aunque AVIF ofrece una mejor compresi\u00f3n, PNG sigue siendo uno de los formatos de imagen m\u00e1s compatibles en todas las plataformas. Estas son las principales razones para convertir AVIF a PNG:<\/p><ul><li><strong>Compatibilidad<\/strong>Los archivos PNG son compatibles con casi todos los navegadores, dispositivos y editores de im\u00e1genes.<\/li><li><strong>Sin p\u00e9rdida de calidad<\/strong>:PNG es un formato sin p\u00e9rdida, lo que significa que mantiene intactos todos los detalles de la imagen.<\/li><li><strong>Edici\u00f3n m\u00e1s f\u00e1cil<\/strong>Muchos programas de edici\u00f3n de im\u00e1genes a\u00fan no admiten AVIF, pero todos admiten PNG.<\/li><li><strong>Compartir r\u00e1pidamente<\/strong>:Los archivos PNG son m\u00e1s f\u00e1ciles de cargar o compartir en plataformas como redes sociales, aplicaciones de mensajer\u00eda y unidades en la nube.<\/li><\/ul><p>Si necesita un formato de imagen universal, nuestro convertidor gratuito de AVIF a PNG en l\u00ednea es la soluci\u00f3n m\u00e1s r\u00e1pida.<\/p><h2>C\u00f3mo convertir AVIF a PNG en l\u00ednea (gratis)<\/h2><p>Convertir AVIF a PNG nunca ha sido tan f\u00e1cil. Con nuestro convertidor de im\u00e1genes AVIF gratuito, no necesita instalar software ni preocuparse por conocimientos t\u00e9cnicos. Simplemente siga estos sencillos pasos:<\/p><ol><li><strong>Sube tu archivo AVIF<\/strong> \u2013 Arrastre y suelte o haga clic para seleccionar su imagen.<\/li><li><strong>Iniciar conversi\u00f3n<\/strong> \u2013 Nuestra herramienta lo convierte autom\u00e1ticamente a PNG en segundos.<\/li><li><strong>Descargar el archivo PNG<\/strong> \u2013 Un clic y tu nueva imagen estar\u00e1 lista para usar.<\/li><\/ol><p>Este convertidor de AVIF en l\u00ednea funciona directamente en tu navegador, para que tus archivos permanezcan seguros y privados. Ya sea que uses una computadora, una tableta o un dispositivo m\u00f3vil, puedes convertir im\u00e1genes sin perder calidad, en cualquier momento y lugar.<\/p><h2>Beneficios de usar nuestro convertidor de AVIF a PNG en l\u00ednea<\/h2><ul><li><strong>100% Gratis<\/strong> \u2013 Sin cargos ocultos, sin l\u00edmites.<\/li><li><strong>R\u00e1pido y f\u00e1cil<\/strong> \u2013 Conversi\u00f3n con un solo clic y sin curva de aprendizaje.<\/li><li><strong>Sin instalaci\u00f3n<\/strong> \u2013 \u00dasalo directamente en tu navegador.<\/li><li><strong>Seguro<\/strong> \u2013 Sus archivos nunca se almacenan ni se comparten.<\/li><li><strong>Conserva la calidad<\/strong> \u2013 Convierte im\u00e1genes sin p\u00e9rdida de compresi\u00f3n.<\/li><li><strong>Multiplataforma<\/strong> \u2013 Funciona en Windows, macOS, Android, iOS y m\u00e1s.<\/li><\/ul><p>Ya sea que sea dise\u00f1ador, desarrollador o simplemente necesite un cambio de formato r\u00e1pido, nuestro convertidor de im\u00e1genes AVIF gratuito es su mejor opci\u00f3n.<\/p><h2>AVIF vs PNG: Comparaci\u00f3n r\u00e1pida<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Caracter\u00edstica<\/th><th>AVIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Compresi\u00f3n<\/td><td>Alto (tama\u00f1os de archivos m\u00e1s peque\u00f1os)<\/td><td>Sin p\u00e9rdida (archivos m\u00e1s grandes)<\/td><\/tr><tr><td>Transparencia<\/td><td>Apoyado<\/td><td>Apoyado<\/td><\/tr><tr><td>Compatibilidad con navegadores<\/td><td>Limitado<\/td><td>Universal<\/td><\/tr><tr><td>Software de edici\u00f3n<\/td><td>Soporte limitado<\/td><td>Amplio apoyo<\/td><\/tr><tr><td>Caso de uso<\/td><td>Optimizaci\u00f3n web<\/td><td>Uso general, edici\u00f3n, uso compartido<\/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>Convertidor de AVIF a PNG. Convierte AVIF a PNG gratis en l\u00ednea. Simplemente sube tus im\u00e1genes Avif a continuaci\u00f3n y obt\u00e9n archivos PNG de alta calidad en segundos.<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\/es\/wp-json\/wp\/v2\/pages\/4727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/comments?post=4727"}],"version-history":[{"count":44,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4727\/revisions"}],"predecessor-version":[{"id":4977,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4727\/revisions\/4977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media\/4888"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media?parent=4727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}