JPG\/JPEG-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 GIF \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0443, \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b) --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n \/* \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043f\u0440\u0435\u0444\u0438\u043a\u0441 jpg- \u0434\u043b\u044f \u0443\u043d\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 *\/\r\n .jpg-converter-wrapper {\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 .jpg-upload-area {\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 .jpg-upload-area.drag-over {\r\n border-color: #007bff;\r\n background-color: #f8f9fa;\r\n }\r\n .jpg-upload-area.upload-error {\r\n border-color: #dc3545 !important;\r\n }\r\n .jpg-upload-area input[type=\"file\"] { display: none; }\r\n .jpg-upload-button {\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 .jpg-upload-button:hover { background-color: #0056b3; }\r\n .jpg-upload-button:active { transform: scale(0.98); }\r\n .jpg-upload-hint { color: #6c757d; margin: 0; }\r\n .jpg-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .jpg-upload-hint .main-hint { font-size: 1.0em; }\r\n .jpg-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 (\u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b) --- *\/\r\n .jpg-converter-settings { margin-top: 15px; text-align: center; }\r\n .jpg-settings-toggle {\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 .jpg-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .jpg-settings-content {\r\n display: none; 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 .setting-group {\r\n margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee;\r\n }\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 .jpg-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }\r\n .jpg-settings-content .inline-label {\r\n display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px;\r\n }\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 jpg-) === *\/\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"] {\r\n background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px;\r\n padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle;\r\n font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n width: 80px; margin-right: 10px; display: inline-block;\r\n }\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n\r\n .jpg-converter-wrapper .jpg-settings-content select {\r\n appearance: none; -webkit-appearance: none; -moz-appearance: none;\r\n background-color: #f0f0f0 !important; color: #333 !important;\r\n border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px;\r\n margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit;\r\n line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n width: auto; min-width: 110px; display: inline-block; cursor: pointer;\r\n 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');\r\n background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px;\r\n }\r\n .jpg-converter-wrapper .jpg-settings-content select::-ms-expand { display: none; }\r\n .jpg-converter-wrapper .jpg-settings-content select option {\r\n background-color: #f0f0f0; color: #333; padding: 5px 10px;\r\n }\r\n .jpg-converter-wrapper .jpg-settings-content select:focus,\r\n .jpg-converter-wrapper .jpg-settings-content input[type=\"number\"]:focus {\r\n outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);\r\n }\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 (\u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b) *\/\r\n .jpg-settings-content input[type=\"color\"],\r\n .jpg-settings-content input[type=\"range\"] {\r\n margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;\r\n width: 100%; box-sizing: border-box;\r\n }\r\n .jpg-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .jpg-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .jpg-settings-content input[type=\"checkbox\"] {\r\n margin-right: 5px; vertical-align: middle; width: 16px; height: 16px;\r\n }\r\n .aspect-ratio-label, .bg-color-label { \/* \u042d\u0442\u0438 \u043a\u043b\u0430\u0441\u0441\u044b \u043c\u043e\u0436\u043d\u043e \u043e\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u043e\u0431\u0449\u0438\u043c\u0438 *\/\r\n font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer;\r\n }\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 {\r\n padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc;\r\n background-color: #fff; color: #333; border-radius: 4px;\r\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\r\n }\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 (\u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b) --- *\/\r\n .jpg-converter-status-area {\r\n margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n }\r\n .jpg-converter-status {\r\n font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em;\r\n line-height: 1.5; word-wrap: break-word;\r\n }\r\n .jpg-converter-status.success { color: #155724; font-weight: bold; }\r\n .jpg-converter-status.error { color: #721c24; font-weight: bold; }\r\n .jpg-converter-download-area a {\r\n display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff;\r\n text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em;\r\n transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer;\r\n }\r\n .jpg-converter-download-area a:hover { background-color: #218838; }\r\n .jpg-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"jpg-converter-wrapper\"> \r\n\r\n \r\n <div class=\"jpg-upload-area\" id=\"jpgUploadArea\"> \r\n \r\n <input type=\"file\" id=\"jpgFileInput\" accept=\".jpg, .jpeg, image\/jpeg\" \/>\r\n \r\n <label for=\"jpgFileInput\" class=\"jpg-upload-button\" role=\"button\" tabindex=\"0\">\r\n JPG\/JPEG-Bild hochladen\r\n <\/label>\r\n <div class=\"jpg-upload-hint\">\r\n <span class=\"main-hint\">oder legen Sie eine Datei hier ab<\/span>\r\n <span class=\"sub-hint\">(Konvertiert JPG\/JPEG-Dateien standardm\u00e4\u00dfig in PNG)<\/span> \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"jpg-converter-settings\">\r\n <span class=\"jpg-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\">\r\n Erweiterte Einstellungen \u25bc\r\n <\/span>\r\n <div class=\"jpg-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 \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: EXIF-Daten aus JPG gehen bei der Konvertierung verloren.<\/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, wenn Sie einen bestimmten Hintergrund f\u00fcr das Ausgabe-PNG w\u00fcnschen)<\/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=\"jpg-converter-status-area\" id=\"statusArea\" style=\"display: none;\">\r\n <div class=\"jpg-converter-status\" id=\"converterStatus\"><\/div>\r\n <div class=\"jpg-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 (\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b) ---\r\n const uploadArea = document.getElementById('jpgUploadArea'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const fileInput = document.getElementById('jpgFileInput'); \/\/ \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 = 'jpg-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 = 'jpg-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') {\r\n statusMessage.classList.add('success');\r\n } else if (type === 'error') {\r\n statusMessage.classList.add('error');\r\n uploadArea.classList.add('upload-error');\r\n }\r\n\r\n if (type !== 'success' && type !== 'info') {\r\n downloadLinkContainer.innerHTML = '';\r\n }\r\n statusArea.style.display = 'block';\r\n }\r\n\r\n function toggleSettings() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/\r\n const isHidden = settingsContent.style.display === 'none' || settingsContent.style.display === '';\r\n settingsContent.style.display = isHidden ? 'block' : 'none';\r\n toggleSettingsBtn.textContent = isHidden ? 'Advanced Settings \u25b2' : 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');\r\n settingsContent.setAttribute('aria-hidden', isHidden ? 'false' : 'true');\r\n }\r\n function updateQualityControlVisibility() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/\r\n const selectedFormat = outputFormatSelect.value;\r\n const isQualityApplicable = selectedFormat === 'image\/jpeg' || selectedFormat === 'image\/webp';\r\n qualityControlDiv.classList.toggle('hidden', !isQualityApplicable);\r\n qualityControlDiv.setAttribute('aria-hidden', String(!isQualityApplicable));\r\n }\r\n function updateQualityValueDisplay() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/\r\n qualityValueSpan.textContent = parseFloat(outputQualitySlider.value).toFixed(2);\r\n }\r\n function toggleBackgroundColorPicker() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/\r\n backgroundColorPicker.disabled = !useBackgroundColorCheckbox.checked;\r\n }\r\n function resetTransformations() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/\r\n currentRotation = 0;\r\n isFlippedHorizontal = false;\r\n isFlippedVertical = false;\r\n }\r\n function updateTransformButtonStates() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/\r\n resetTransformBtn.disabled = (currentRotation === 0 && !isFlippedHorizontal && !isFlippedVertical);\r\n }\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\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 JPG\/JPEG)\r\n const fileName = file.name;\r\n const fileMimeType = file.type || '';\r\n const isJpg = \/\\.(jpe?g)$\/i.test(fileName) || fileMimeType === 'image\/jpeg'; \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0438 MIME\r\n\r\n if (!isJpg) {\r\n showStatus(`Incorrect file format. Please upload a JPG or JPEG file (received: ${fileName}, type: ${fileMimeType || 'unknown'}).`, 'error');\r\n return; \/\/ \u041f\u0440\u0435\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Reading file.`, 'info');\r\n\r\n const reader = new FileReader();\r\n\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 originalImageDimensions.width = img.naturalWidth;\r\n originalImageDimensions.height = img.naturalHeight;\r\n if (originalImageDimensions.width === 0 || originalImageDimensions.height === 0) {\r\n showStatus(`Failed to decode image \"${fileName}\". It might be corrupted or have zero dimensions.`, 'error');\r\n return;\r\n }\r\n showStatus(`Processing \"${fileName}\"... Applying settings.`, 'info');\r\n const mimeType = outputFormatSelect.value; \/\/ \u0424\u043e\u0440\u043c\u0430\u0442 \u0412\u042b\u0412\u041e\u0414\u0410\r\n const quality = parseFloat(outputQualitySlider.value);\r\n const maintainRatio = maintainAspectRatioCheckbox.checked;\r\n const useBG = useBackgroundColorCheckbox.checked;\r\n const bgColor = backgroundColorPicker.value;\r\n let desiredWidth = parseInt(outputWidthInput.value, 10) || 0;\r\n let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n let targetWidth = originalImageDimensions.width;\r\n let targetHeight = originalImageDimensions.height;\r\n if (desiredWidth > 0 || desiredHeight > 0) { \/* \u0420\u0430\u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 *\/\r\n if (maintainRatio) { \/*...*\/ } else { \/*...*\/ }\r\n }\r\n targetWidth = Math.max(1, targetWidth);\r\n targetHeight = Math.max(1, targetHeight);\r\n const canvas = document.createElement('canvas');\r\n const requiresSwap = currentRotation === 90 || currentRotation === 270;\r\n canvas.width = requiresSwap ? targetHeight : targetWidth;\r\n 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');\r\n if (!ctx) { \/*...*\/ return; }\r\n try {\r\n ctx.save();\r\n \/\/ \u041f\u0440\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0438\u0438 JPG \u0432 PNG \u0444\u043e\u043d \u043d\u0435 \u043d\u0443\u0436\u0435\u043d \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e,\r\n \/\/ \u043d\u043e \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u0431\u0440\u0430\u043b \u0446\u0432\u0435\u0442, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0435\u0433\u043e.\r\n \/\/ \u0415\u0441\u043b\u0438 \u0432\u044b\u0432\u043e\u0434 \u043d\u0435 PNG\/WebP (\u0442.\u0435. JPEG), \u0444\u043e\u043d \u043d\u0443\u0436\u0435\u043d \u0432\u0441\u0435\u0433\u0434\u0430.\r\n if (useBG || mimeType === 'image\/jpeg') {\r\n ctx.fillStyle = bgColor;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n } else {\r\n \/\/ \u0414\u043b\u044f PNG\/WebP \u0431\u0435\u0437 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u043e\u043d\u0430 - \u043e\u0447\u0438\u0449\u0430\u0435\u043c\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n \/\/ \u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n const centerX = canvas.width \/ 2; const centerY = canvas.height \/ 2;\r\n 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 \/\/ \u0420\u0438\u0441\u043e\u0432\u0430\u043d\u0438\u0435\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 \/\/ \u042d\u043a\u0441\u043f\u043e\u0440\u0442\r\n showStatus(`Processing \"${fileName}\"... Encoding final image.`, 'info');\r\n let exportQuality = quality;\r\n 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 \/\/ \u0410\u0432\u0442\u043e-\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n const link = document.createElement('a');\r\n link.href = dataUrl;\r\n const originalName = fileName.replace(\/\\.jpe?g$\/i, ''); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c .jpg \u0438\u043b\u0438 .jpeg\r\n let extension = mimeType.split('\/')[1]; if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted_to_${extension}.${extension}`; \/\/ \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n link.textContent = `Download ${link.download}`;\r\n downloadLinkContainer.innerHTML = ''; downloadLinkContainer.appendChild(link);\r\n link.click();\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n } catch (error) {\r\n console.error(\"Conversion Error:\", error);\r\n let errorMessage = `Error during conversion: ${error.message || 'Unknown error'}.`;\r\n if (error instanceof DOMException) { \/*...*\/ } else if (error.message.includes(\"encode\")) { \/*...*\/ }\r\n showStatus(errorMessage, 'error');\r\n }\r\n };\r\n img.onerror = function(err) { \/*...*\/ showStatus(`Error loading image \"${fileName}\".`, 'error'); };\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 jpgFileInput)\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files.length > 0) {\r\n handleFile(event.target.files[0]);\r\n } else {\r\n resetInterface();\r\n }\r\n });\r\n\r\n \/\/ Drag and Drop (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID jpgUploadArea)\r\n uploadArea.addEventListener('dragover', (event) => {\r\n event.preventDefault(); event.dataTransfer.dropEffect = 'copy';\r\n uploadArea.classList.add('drag-over'); uploadArea.classList.remove('upload-error');\r\n });\r\n uploadArea.addEventListener('dragleave', (event) => {\r\n if (!uploadArea.contains(event.relatedTarget) || event.relatedTarget === null) {\r\n uploadArea.classList.remove('drag-over');\r\n }\r\n });\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 JPG\/JPEG)\r\n const fileNameDrop = droppedFile.name;\r\n const fileMimeTypeDrop = droppedFile.type || '';\r\n const isJpgDrop = \/\\.(jpe?g)$\/i.test(fileNameDrop) || fileMimeTypeDrop === 'image\/jpeg';\r\n if (isJpgDrop) {\r\n fileInput.files = event.dataTransfer.files; \/\/ \u0421\u0438\u043d\u0445\u0440\u043e\u043d\u0438\u0437\u0438\u0440\u0443\u0435\u043c \u0441 input\r\n handleFile(droppedFile); \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b\r\n } else {\r\n showStatus(`Incorrect file format dropped. Please drop a JPG\/JPEG file (received: ${fileNameDrop}, type: ${fileMimeTypeDrop || 'unknown'}).`, 'error');\r\n fileInput.value = '';\r\n }\r\n } else {\r\n resetInterface();\r\n }\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-1aab887 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"1aab887\" 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-a1ff6ee\" data-id=\"a1ff6ee\" 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-be0b500 elementor-widget elementor-widget-text-editor\" data-id=\"be0b500\" 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\/avif-to-png\/\">Avif zu PNG<\/a>, <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\/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-76f9a2f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"76f9a2f\" 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-d17e760\" data-id=\"d17e760\" 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-51f41be elementor-widget elementor-widget-text-editor\" data-id=\"51f41be\" 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-ccbd4e9 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=\"ccbd4e9\" 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-63b3d17 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"63b3d17\" 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-202960e\" data-id=\"202960e\" 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-b7a599e\" data-id=\"b7a599e\" 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-cd0a0cb elementor-widget elementor-widget-text-editor\" data-id=\"cd0a0cb\" 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>Ben\u00f6tigen Sie eine schnelle und kostenlose M\u00f6glichkeit, JPG oder JPEG in PNG zu konvertieren? Unser Online-JPG-zu-PNG-Konverter liefert Ihnen in Sekundenschnelle hochwertige Bildergebnisse \u2013 ohne Registrierung, ohne Software, ohne Aufwand.<\/p>\n\n <h2>Was ist der Unterschied zwischen JPG und PNG?<\/h2>\n <p>JPG (oder JPEG) ist ein beliebtes Bildformat, das verlustbehaftete Komprimierung zur Reduzierung der Dateigr\u00f6\u00dfe verwendet. Es eignet sich hervorragend f\u00fcr Fotos und die Nutzung im Internet, ist jedoch nicht ideal, wenn Sie volle Bildqualit\u00e4t oder Transparenz ben\u00f6tigen.<\/p>\n <p>PNG hingegen ist ein verlustfreies Format, bei dem jedes Pixel erhalten bleibt. Es unterst\u00fctzt auch Transparenz und eignet sich daher ideal f\u00fcr Design, Bearbeitung und den professionellen Einsatz.<\/p>\n\n <h2>Warum JPG in PNG konvertieren?<\/h2>\n <p>Hier sind die h\u00e4ufigsten Gr\u00fcnde f\u00fcr die Verwendung eines JPG-zu-PNG-Konverters:<\/p>\n <ul>\n <li><strong>Qualit\u00e4t bewahren:<\/strong> PNG h\u00e4lt Ihr Bild scharf und ohne Komprimierungsverlust.<\/li>\n <li><strong>Transparenz hinzuf\u00fcgen:<\/strong> Konvertieren Sie in PNG, um Hintergrundbereiche transparent zu machen.<\/li>\n <li><strong>Bessere Bearbeitung:<\/strong> PNG-Dateien sind in Fotobearbeitungs- und Designtools zuverl\u00e4ssiger.<\/li>\n <li><strong>Verwendung im Design:<\/strong> PNGs eignen sich perfekt f\u00fcr Logos, Symbole, Mockups und UI-Elemente.<\/li>\n <\/ul>\n\n <h2>So konvertieren Sie JPG oder JPEG online in PNG<\/h2>\n <p>Unser kostenloser Online-Konverter von JPG zu PNG vereinfacht den Vorgang:<\/p>\n <ol>\n <li><strong>Laden Sie Ihr JPG oder JPEG hoch<\/strong> \u2013 W\u00e4hlen Sie Ihre Bilddatei per Drag & Drop oder per Klick aus.<\/li>\n <li><strong>Automatische Konvertierung<\/strong> \u2013 Das Tool konvertiert es in Ihrem Browser sofort in PNG.<\/li>\n <li><strong>Laden Sie das PNG herunter<\/strong> \u2013 Klicken Sie einmal, um Ihr neues Bild im PNG-Format herunterzuladen.<\/li>\n <\/ol>\n <p>Keine Installation, keine Wasserzeichen und keine Anmeldung erforderlich \u2013 konvertieren Sie Bilder ohne Qualit\u00e4tsverlust auf jedem Ger\u00e4t.<\/p>\n\n <h2>Vorteile unseres Online-JPG-zu-PNG-Konverters<\/h2>\n <ul>\n <li><strong>100% Kostenlos<\/strong> \u2013 Keine Geb\u00fchren, Testversionen oder Beschr\u00e4nkungen.<\/li>\n <li><strong>Schnell und einfach<\/strong> \u2013 Konvertieren Sie JPEG in Sekunden in PNG.<\/li>\n <li><strong>Keine Downloads<\/strong> \u2013 Die gesamte Konvertierung erfolgt in Ihrem Browser.<\/li>\n <li><strong>Sicher und privat<\/strong> \u2013 Ihre Dateien werden niemals auf einen Server hochgeladen.<\/li>\n <li><strong>Hochwertige Ausgabe<\/strong> \u2013 Erhalten Sie jedes Mal gestochen scharfe, klare PNG-Bilder.<\/li>\n <li><strong>Ger\u00e4te\u00fcbergreifende Unterst\u00fctzung<\/strong> \u2013 Verwenden Sie es unter Windows, macOS, Android, iOS und mehr.<\/li>\n <\/ul>\n\n <h2>JPG vs. PNG: Schneller Vergleich<\/h2>\n <table border=\"1\" cellpadding=\"8\" cellspacing=\"0\">\n <thead>\n <tr>\n <th>Besonderheit<\/th>\n <th>JPG \/ JPEG<\/th>\n <th>PNG<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>Kompression<\/td>\n <td>Verlustbehaftet<\/td>\n <td>Verlustfrei<\/td>\n <\/tr>\n <tr>\n <td>Transparenz<\/td>\n <td>Nicht unterst\u00fctzt<\/td>\n <td>Unterst\u00fctzt<\/td>\n <\/tr>\n <tr>\n <td>Dateigr\u00f6\u00dfe<\/td>\n <td>Kleiner<\/td>\n <td>Gr\u00f6\u00dfer<\/td>\n <\/tr>\n <tr>\n <td>Am besten f\u00fcr<\/td>\n <td>Fotos, Webinhalte<\/td>\n <td>Design, Redaktion, Transparenz<\/td>\n <\/tr>\n <tr>\n <td>Bearbeitungsflexibilit\u00e4t<\/td>\n <td>Beschr\u00e4nkt<\/td>\n <td>Hoch<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <h2>H\u00e4ufig gestellte Fragen<\/h2>\n\n <h3>Erh\u00f6ht sich die Dateigr\u00f6\u00dfe durch die Konvertierung von JPG in PNG?<\/h3>\n <p>Ja, PNG-Dateien sind normalerweise gr\u00f6\u00dfer, da sie eine verlustfreie Komprimierung verwenden und die vollst\u00e4ndigen Bilddaten erhalten bleiben.<\/p>\n\n <h3>Kann ich mit einem Telefon oder einer Kamera aufgenommene JPEGs konvertieren?<\/h3>\n <p>Absolut. Unser Konverter unterst\u00fctzt alle Standard-JPG- und JPEG-Dateien von jedem Ger\u00e4t.<\/p>\n\n <h3>Ist die Nutzung wirklich kostenlos?<\/h3>\n <p>Ja. Dies ist ein kostenloser JPG-zu-PNG-Konverter von 100% ohne Werbung, ohne Einschr\u00e4nkungen und ohne Registrierung.<\/p>\n\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-628b503\" data-id=\"628b503\" 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>JPG\/JPEG to PNG Converter Convert JPG or JPEG to PNG for Free Online. Just upload your JPG\/JPEG images below and get high-quality PNG files in seconds.<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4890,"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-4721","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4721","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=4721"}],"version-history":[{"count":26,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4721\/revisions"}],"predecessor-version":[{"id":4968,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4721\/revisions\/4968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media\/4890"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media?parent=4721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}