JPG\/JPEG to PNG Converter<\/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 Upload JPG\/JPEG Image\r\n <\/label>\r\n <div class=\"jpg-upload-hint\">\r\n <span class=\"main-hint\">\u0430\u0431\u043e \u0441\u043a\u0438\u043d\u044c\u0442\u0435 \u0444\u0430\u0439\u043b \u0441\u044e\u0434\u0438<\/span>\r\n <span class=\"sub-hint\">(Converts JPG\/JPEG files to PNG by default)<\/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 \u0420\u043e\u0437\u0448\u0438\u0440\u0435\u043d\u0456 \u043d\u0430\u043b\u0430\u0448\u0442\u0443\u0432\u0430\u043d\u043d\u044f \u25bc\r\n <\/span>\r\n <div class=\"jpg-settings-content\" id=\"settingsContent\">\r\n \r\n <div class=\"setting-group\">\r\n <h4>\u0424\u043e\u0440\u043c\u0430\u0442 \u0456 \u044f\u043a\u0456\u0441\u0442\u044c \u0432\u0438\u0432\u043e\u0434\u0443<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">\u0424\u043e\u0440\u043c\u0430\u0442:<\/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\">\u044f\u043a\u0456\u0441\u0442\u044c:<\/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>\u041f\u0440\u0438\u043c\u0456\u0442\u043a\u0430. PNG \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442, \u043f\u043e\u0432\u0437\u0443\u043d\u043e\u043a \u044f\u043a\u043e\u0441\u0442\u0456 \u0432\u043f\u043b\u0438\u0432\u0430\u0454 \u043b\u0438\u0448\u0435 \u043d\u0430 JPEG\/WebP.<\/small>\r\n <small>Note: EXIF data from JPG will be lost during conversion.<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>\u0417\u043c\u0456\u043d\u0438\u0442\u0438 \u0440\u043e\u0437\u043c\u0456\u0440<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">\u0428\u0438\u0440\u0438\u043d\u0430:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"\u0430\u0432\u0442\u043e\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">\u0412\u0438\u0441\u043e\u0442\u0430:<\/label>\r\n <input type=\"number\" id=\"outputHeight\" placeholder=\"\u0430\u0432\u0442\u043e\" 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\">\u0417\u0431\u0435\u0440\u0456\u0433\u0430\u0439\u0442\u0435 \u0441\u043f\u0456\u0432\u0432\u0456\u0434\u043d\u043e\u0448\u0435\u043d\u043d\u044f \u0441\u0442\u043e\u0440\u0456\u043d<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>\u0424\u043e\u043d<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">\u0414\u043e\u0434\u0430\u0439\u0442\u0435 \u043a\u043e\u043b\u0456\u0440 \u0444\u043e\u043d\u0443:<\/label> \r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(Useful if you want a specific background on the output PNG)<\/small> \r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>\u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0443\u0432\u0430\u0442\u0438<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"\u041f\u043e\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u043d\u0430 90\u00b0 \u0437\u0430 \u0433\u043e\u0434\u0438\u043d\u043d\u0438\u043a\u043e\u0432\u043e\u044e \u0441\u0442\u0440\u0456\u043b\u043a\u043e\u044e\">\u041f\u043e\u0432\u0435\u0440\u043d\u0456\u0442\u044c \u043d\u0430 90\u00b0 CW<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"\u041f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0456\">\u041f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043f\u043e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u0456<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"\u041f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0456\">\u041f\u0435\u0440\u0435\u0432\u0435\u0440\u043d\u0443\u0442\u0438 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0456<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"\u0421\u043a\u0438\u043d\u0443\u0442\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457\">\u0421\u043a\u0438\u043d\u0443\u0442\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0456\u0457<\/button>\r\n <\/div>\r\n <small>(\u041e\u0431\u0435\u0440\u0442\u0430\u043d\u043d\u044f \u043c\u043e\u0436\u0435 \u0432\u043f\u043b\u0438\u043d\u0443\u0442\u0438 \u043d\u0430 \u0440\u043e\u0437\u043c\u0456\u0440\u0438, \u044f\u043a\u0449\u043e \u0441\u043f\u0456\u0432\u0432\u0456\u0434\u043d\u043e\u0448\u0435\u043d\u043d\u044f \u0441\u0442\u043e\u0440\u0456\u043d \u043d\u0435 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f)<\/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>\u0406\u043d\u0448\u0456 \u0444\u043e\u0440\u043c\u0430\u0442\u0438: <a href=\"https:\/\/pngate.com\/uk\/avif-to-png\/\">Avif \u0432 PNG<\/a>, <a href=\"https:\/\/pngate.com\/uk\/webp-to-png\/\">Webp \u0432 PNG<\/a>, <a href=\"https:\/\/pngate.com\/uk\/gif-to-png\/\">Gif \u0432 PNG<\/a>, <a href=\"https:\/\/pngate.com\/uk\/svg-to-png\/\">SVG \u0432 PNG<\/a>, <a href=\"https:\/\/pngate.com\/uk\/heic-to-png\/\">HEIC \u0432 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>\u0417\u043d\u0430\u0439\u0448\u043b\u0438 \u0446\u0435 \u043a\u043e\u0440\u0438\u0441\u043d\u0438\u043c? \u041f\u043e\u0434\u0456\u043b\u0456\u0442\u044c\u0441\u044f \u0446\u0438\u043c!<\/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\t\u0422\u0435\u043b\u0435\u0433\u0440\u0430\u043c\u0430\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>Need a fast and free way to convert JPG or JPEG to PNG? Our online JPG to PNG converter gives you high-quality image results in seconds \u2014 no registration, no software, no hassle.<\/p>\n\n <h2>What is the Difference Between JPG and PNG?<\/h2>\n <p>JPG (or JPEG) is a popular image format that uses lossy compression to reduce file size. It’s great for photographs and web use but not ideal when you need full image quality or transparency.<\/p>\n <p>PNG, on the other hand, is a lossless format that preserves every pixel. It also supports transparency, making it ideal for design, editing, and professional use.<\/p>\n\n <h2>Why Convert JPG to PNG?<\/h2>\n <p>Here are the most common reasons to use a JPG to PNG converter:<\/p>\n <ul>\n <li><strong>Preserve quality:<\/strong> PNG keeps your image sharp with no compression loss.<\/li>\n <li><strong>Add transparency:<\/strong> Convert to PNG to make background areas transparent.<\/li>\n <li><strong>Better editing:<\/strong> PNG files are more reliable in photo editing and design tools.<\/li>\n <li><strong>Use in design:<\/strong> PNGs are perfect for logos, icons, mockups, and UI elements.<\/li>\n <\/ul>\n\n <h2>How to Convert JPG or JPEG to PNG Online<\/h2>\n <p>Our free online JPG to PNG converter makes the process simple:<\/p>\n <ol>\n <li><strong>Upload your JPG or JPEG<\/strong> \u2013 Drag and drop or click to select your image file.<\/li>\n <li><strong>Automatic conversion<\/strong> \u2013 The tool instantly converts it to PNG in your browser.<\/li>\n <li><strong>Download the PNG<\/strong> \u2013 Click once to download your new image in PNG format.<\/li>\n <\/ol>\n <p>No installations, no watermarks, and no sign-up required \u2014 convert images without losing quality on any device.<\/p>\n\n <h2>Benefits of Our Online JPG to PNG Converter<\/h2>\n <ul>\n <li><strong>100% \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e<\/strong> \u2013 No fees, trials, or limits.<\/li>\n <li><strong>Fast & easy<\/strong> \u2013 Convert JPEG to PNG in seconds.<\/li>\n <li><strong>No downloads<\/strong> \u2013 All conversion happens in your browser.<\/li>\n <li><strong>Safe & private<\/strong> \u2013 \u0412\u0430\u0448\u0456 \u0444\u0430\u0439\u043b\u0438 \u043d\u0456\u043a\u043e\u043b\u0438 \u043d\u0435 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u044e\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440.<\/li>\n <li><strong>\u0412\u0438\u0441\u043e\u043a\u043e\u044f\u043a\u0456\u0441\u043d\u0438\u0439 \u0432\u0438\u0445\u0456\u0434<\/strong> \u2013 Get crisp, clear PNG images every time.<\/li>\n <li><strong>\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u0440\u0456\u0437\u043d\u0438\u0445 \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457\u0432<\/strong> \u2013 Use it on Windows, macOS, Android, iOS, and more.<\/li>\n <\/ul>\n\n <h2>JPG vs PNG: Quick Comparison<\/h2>\n <table border=\"1\" cellpadding=\"8\" cellspacing=\"0\">\n <thead>\n <tr>\n <th>\u041e\u0441\u043e\u0431\u043b\u0438\u0432\u0456\u0441\u0442\u044c<\/th>\n <th>JPG \/ JPEG<\/th>\n <th>PNG<\/th>\n <\/tr>\n <\/thead>\n <tbody>\n <tr>\n <td>\u041a\u043e\u043c\u043f\u0440\u0435\u0441\u0456\u044f<\/td>\n <td>Lossy<\/td>\n <td>\u0411\u0435\u0437 \u0432\u0442\u0440\u0430\u0442<\/td>\n <\/tr>\n <tr>\n <td>\u041f\u0440\u043e\u0437\u043e\u0440\u0456\u0441\u0442\u044c<\/td>\n <td>\u041d\u0435 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f<\/td>\n <td>\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f<\/td>\n <\/tr>\n <tr>\n <td>\u0420\u043e\u0437\u043c\u0456\u0440 \u0444\u0430\u0439\u043b\u0443<\/td>\n <td>\u041c\u0435\u043d\u0448\u0438\u0439<\/td>\n <td>\u0411\u0456\u043b\u044c\u0448\u0438\u0439<\/td>\n <\/tr>\n <tr>\n <td>\u041d\u0430\u0439\u043a\u0440\u0430\u0449\u0435 \u0434\u043b\u044f<\/td>\n <td>Photos, web content<\/td>\n <td>Design, editing, transparency<\/td>\n <\/tr>\n <tr>\n <td>Editing Flexibility<\/td>\n <td>\u041e\u0431\u043c\u0435\u0436\u0435\u043d\u0438\u0439<\/td>\n <td>High<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n\n <h2>\u0427\u0430\u0441\u0442\u0456 \u0437\u0430\u043f\u0438\u0442\u0430\u043d\u043d\u044f<\/h2>\n\n <h3>Will converting JPG to PNG increase file size?<\/h3>\n <p>Yes, PNG files are usually larger because they use lossless compression and preserve full image data.<\/p>\n\n <h3>Can I convert JPEGs taken from a phone or camera?<\/h3>\n <p>Absolutely. Our converter supports all standard JPG and JPEG files from any device.<\/p>\n\n <h3>Is it really free to use?<\/h3>\n <p>Yes. This is a 100% free JPG to PNG converter with no ads, no limits, and no registration required.<\/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>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 JPG\/JPEG \u0443 PNG. \u0411\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0443\u0439\u0442\u0435 JPG \u0430\u0431\u043e JPEG \u0443 PNG \u043e\u043d\u043b\u0430\u0439\u043d. \u041f\u0440\u043e\u0441\u0442\u043e \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0442\u0435 \u0441\u0432\u043e\u0457 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f JPG\/JPEG \u043d\u0438\u0436\u0447\u0435 \u0442\u0430 \u043e\u0442\u0440\u0438\u043c\u0430\u0439\u0442\u0435 \u0432\u0438\u0441\u043e\u043a\u043e\u044f\u043a\u0456\u0441\u043d\u0456 \u0444\u0430\u0439\u043b\u0438 PNG \u0437\u0430 \u043b\u0456\u0447\u0435\u043d\u0456 \u0441\u0435\u043a\u0443\u043d\u0434\u0438.<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\/uk\/wp-json\/wp\/v2\/pages\/4721","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/comments?post=4721"}],"version-history":[{"count":26,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/pages\/4721\/revisions"}],"predecessor-version":[{"id":4968,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/pages\/4721\/revisions\/4968"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/media\/4890"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/media?parent=4721"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}