AVIF-zu-PNG-Konverter<\/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 AVIF-Bild hochladen\r\n <\/label>\r\n <div class=\"avif-upload-hint\"> \r\n <span class=\"main-hint\">oder legen Sie eine Datei hier ab<\/span>\r\n <span class=\"sub-hint\">(Konvertiert AVIF-Dateien standardm\u00e4\u00dfig in PNG. Animiertes AVIF konvertiert das erste Bild.)<\/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 Erweiterte Einstellungen \u25bc\r\n <\/span>\r\n <div class=\"avif-settings-content\" id=\"settingsContent\"> \r\n \r\n <div class=\"setting-group\">\r\n <h4>Ausgabeformat und -qualit\u00e4t<\/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\u00e4t:<\/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>Hinweis: PNG ist verlustfrei, der Qualit\u00e4tsregler wirkt sich nur auf JPEG\/WebP aus.<\/small>\r\n <small>Hinweis: Metadaten von AVIF k\u00f6nnen w\u00e4hrend der Konvertierung verloren gehen.<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Gr\u00f6\u00dfe \u00e4ndern<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Breite:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"Auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">H\u00f6he:<\/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\">Seitenverh\u00e4ltnis beibehalten<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Hintergrund<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Hintergrundfarbe hinzuf\u00fcgen:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(N\u00fctzlich zum Entfernen von Transparenz oder bei der Ausgabe im JPEG-Format)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Verwandeln<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"90\u00b0 im Uhrzeigersinn drehen\">90\u00b0 im Uhrzeigersinn drehen<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Horizontal spiegeln\">Horizontal spiegeln<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Vertikal spiegeln\">Vertikal spiegeln<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Transformationen zur\u00fccksetzen\">Transformationen zur\u00fccksetzen<\/button>\r\n <\/div>\r\n <small>(Die Drehung kann sich auf die Abmessungen auswirken, wenn das Seitenverh\u00e4ltnis nicht beibehalten wird.)<\/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>Andere Formate: <a href=\"https:\/\/pngate.com\/de\/webp-zu-png\/\">Webp zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/gif-to-png\/\">Gif zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/jpeg-to-png\/\">JPEG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/svg-to-png\/\">SVG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/heic-to-png\/\">HEIC zu 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>Fanden Sie dies n\u00fctzlich? Teilen Sie es!<\/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\tTelegramm\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\tTwitter\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>Suchen Sie nach einer schnellen und einfachen M\u00f6glichkeit, AVIF-Bilder kostenlos online in PNG zu konvertieren? Dann sind Sie hier richtig. Unser Online-AVIF-zu-PNG-Konverter hilft Ihnen, AVIF-Bilder der n\u00e4chsten Generation in weit verbreitete PNG-Dateien umzuwandeln \u2013 ohne Installation, ohne Qualit\u00e4tsverlust und 100%-frei.<\/p><h2>Was ist AVIF?<\/h2><p>AVIF (AV1 Image File Format) ist ein modernes Bildformat f\u00fcr hohe Komprimierung bei hervorragender Bildqualit\u00e4t. Es basiert auf dem AV1-Videocodec und erfreut sich aufgrund seiner geringen Dateigr\u00f6\u00dfe und effizienten Leistung zunehmender Beliebtheit.<\/p><p>AVIF-Bilder eignen sich ideal f\u00fcr Websites und Apps, da sie schneller laden und die Bandbreitennutzung reduzieren. Allerdings unterst\u00fctzen noch nicht alle Programme, Browser oder Bearbeitungstools AVIF. Daher k\u00f6nnen beim \u00d6ffnen oder Verwenden einer AVIF-Datei Probleme auftreten.<\/p><h2>Warum AVIF in PNG konvertieren?<\/h2><p>Obwohl AVIF eine bessere Komprimierung bietet, bleibt PNG eines der am weitesten verbreiteten Bildformate auf allen Plattformen. Hier sind die wichtigsten Gr\u00fcnde f\u00fcr die Konvertierung von AVIF in PNG:<\/p><ul><li><strong>Kompatibilit\u00e4t<\/strong>: PNG-Dateien werden von fast jedem Browser, Ger\u00e4t und Bildeditor unterst\u00fctzt.<\/li><li><strong>Kein Qualit\u00e4tsverlust<\/strong>: PNG ist ein verlustfreies Format, d. h. alle Bilddetails bleiben erhalten.<\/li><li><strong>Einfachere Bearbeitung<\/strong>: Viele Bildbearbeitungsprogramme unterst\u00fctzen AVIF noch nicht, aber alle unterst\u00fctzen PNG.<\/li><li><strong>Schnelles Teilen<\/strong>: PNG-Dateien lassen sich einfacher hochladen oder \u00fcber Plattformen wie soziale Medien, Messaging-Apps und Cloud-Laufwerke teilen.<\/li><\/ul><p>Wenn Sie ein universelles Bildformat ben\u00f6tigen, ist unser kostenloser Online-Konverter von AVIF zu PNG die schnellste L\u00f6sung.<\/p><h2>So konvertieren Sie AVIF online in PNG (kostenlos)<\/h2><p>Die Konvertierung von AVIF in PNG war noch nie so einfach. Mit unserem kostenlosen AVIF-Bildkonverter m\u00fcssen Sie weder Software installieren noch technische Kenntnisse erwerben. Folgen Sie einfach diesen einfachen Schritten:<\/p><ol><li><strong>Laden Sie Ihre AVIF-Datei hoch<\/strong> \u2013 W\u00e4hlen Sie Ihr Bild per Drag & Drop oder per Klick aus.<\/li><li><strong>Konvertierung starten<\/strong> \u2013 Unser Tool konvertiert es in Sekunden automatisch in PNG.<\/li><li><strong>Laden Sie die PNG-Datei herunter<\/strong> \u2013 Ein Klick und Ihr neues Bild ist einsatzbereit.<\/li><\/ol><p>Dieser Online-AVIF-Konverter funktioniert direkt in Ihrem Browser, sodass Ihre Dateien sicher und vertraulich bleiben. Egal, ob Sie am Desktop, Tablet oder Mobilger\u00e4t arbeiten, Sie k\u00f6nnen Bilder jederzeit und \u00fcberall ohne Qualit\u00e4tsverlust konvertieren.<\/p><h2>Vorteile der Verwendung unseres Online-AVIF-zu-PNG-Konverters<\/h2><ul><li><strong>100% Kostenlos<\/strong> \u2013 Keine versteckten Geb\u00fchren, keine Beschr\u00e4nkungen.<\/li><li><strong>Schnell und einfach<\/strong> \u2013 Konvertierung mit einem Klick und ohne Lernkurve.<\/li><li><strong>Keine Installation<\/strong> \u2013 Verwenden Sie es direkt in Ihrem Browser.<\/li><li><strong>Sicher<\/strong> \u2013 Ihre Dateien werden niemals gespeichert oder weitergegeben.<\/li><li><strong>Erh\u00e4lt die Qualit\u00e4t<\/strong> \u2013 Konvertiert Bilder ohne Komprimierungsverlust.<\/li><li><strong>Multiplattform<\/strong> \u2013 Funktioniert unter Windows, macOS, Android, iOS und mehr.<\/li><\/ul><p>Egal, ob Sie Designer oder Entwickler sind oder einfach nur schnell das Format \u00e4ndern m\u00fcssen, unser kostenloser AVIF-Bildkonverter ist die beste Wahl f\u00fcr Sie.<\/p><h2>AVIF vs. PNG: Schneller Vergleich<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Besonderheit<\/th><th>AVIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Kompression<\/td><td>Hoch (kleinere Dateigr\u00f6\u00dfen)<\/td><td>Verlustfrei (gr\u00f6\u00dfere Dateien)<\/td><\/tr><tr><td>Transparenz<\/td><td>Unterst\u00fctzt<\/td><td>Unterst\u00fctzt<\/td><\/tr><tr><td>Browserunterst\u00fctzung<\/td><td>Beschr\u00e4nkt<\/td><td>Universal<\/td><\/tr><tr><td>Bearbeitungssoftware<\/td><td>Eingeschr\u00e4nkter Support<\/td><td>Breite Unterst\u00fctzung<\/td><\/tr><tr><td>Anwendungsfall<\/td><td>Weboptimierung<\/td><td>Allgemeine Nutzung, Bearbeitung, Weitergabe<\/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>AVIF to PNG Converter Convert AVIF to PNG for Free Online. Just upload your Avif images below and get high-quality PNG files in seconds. AVIF to<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\/de\/wp-json\/wp\/v2\/pages\/4727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/comments?post=4727"}],"version-history":[{"count":44,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4727\/revisions"}],"predecessor-version":[{"id":4977,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4727\/revisions\/4977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media\/4888"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media?parent=4727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}