\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 AVIF \u0432 PNG<\/title>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b, \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c avif-) --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n .avif-converter-wrapper { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n max-width: 550px;\r\n margin: 0px auto 30px auto;\r\n font-family: sans-serif;\r\n font-size: 16px;\r\n }\r\n\r\n \/* --- \u0417\u043e\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .avif-upload-area { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n padding: 80px 60px 60px 60px;\r\n text-align: center;\r\n border: 2px dashed #d0d4dc;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 200px;\r\n }\r\n .avif-upload-area.drag-over { border-color: #007bff; background-color: #f8f9fa; }\r\n .avif-upload-area.upload-error { border-color: #dc3545 !important; }\r\n .avif-upload-area input[type=\"file\"] { display: none; }\r\n .avif-upload-button { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: inline-block;\r\n background-color: #007bff;\r\n color: #ffffff;\r\n padding: 12px 30px;\r\n border-radius: 50px;\r\n font-size: 1em;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n margin-bottom: 15px;\r\n border: none; outline: none;\r\n }\r\n .avif-upload-button:hover { background-color: #0056b3; }\r\n .avif-upload-button:active { transform: scale(0.98); }\r\n .avif-upload-hint { color: #6c757d; margin: 0; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .avif-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .avif-upload-hint .main-hint { font-size: 1.0em; }\r\n .avif-upload-hint .sub-hint { font-size: 0.85em; }\r\n\r\n \/* --- \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a --- *\/\r\n .avif-converter-settings { margin-top: 15px; text-align: center; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .avif-settings-toggle { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n cursor: pointer; color: #007bff; text-decoration: none; border: 1px solid #007bff;\r\n padding: 8px 15px; border-radius: 20px; display: inline-block; margin-bottom: 15px;\r\n font-size: 0.9em; transition: background-color 0.3s, color 0.3s;\r\n }\r\n .avif-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .avif-settings-content { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: none;\r\n padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #fdfdfd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n text-align: left; font-size: 0.9em;\r\n }\r\n .avif-settings-content.is-visible { \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n display: block !important;\r\n }\r\n .setting-group { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\r\n .setting-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }\r\n .setting-group h4 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: #333; }\r\n .avif-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .avif-settings-content .inline-label { display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px; } \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n small { color: #6c757d; display: block; margin-top: 8px; line-height: 1.4; }\r\n .hidden { display: none !important; }\r\n\r\n \/* === \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c avif-) === *\/\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"] { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 80px; margin-right: 10px; display: inline-block; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .avif-converter-wrapper .avif-settings-content select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: auto; min-width: 110px; display: inline-block; cursor: pointer; background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px; }\r\n .avif-converter-wrapper .avif-settings-content select::-ms-expand { display: none; }\r\n .avif-converter-wrapper .avif-settings-content select option { background-color: #f0f0f0; color: #333; padding: 5px 10px; }\r\n .avif-converter-wrapper .avif-settings-content select:focus,\r\n .avif-converter-wrapper .avif-settings-content input[type=\"number\"]:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }\r\n \/* === \u041a\u041e\u041d\u0415\u0426 \u0421\u0422\u0418\u041b\u0415\u0419 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER === *\/\r\n\r\n \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u043f\u0443\u0442\u044b *\/\r\n .avif-settings-content input[type=\"color\"], .avif-settings-content input[type=\"range\"] { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }\r\n .avif-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .avif-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .avif-settings-content input[type=\"checkbox\"] { margin-right: 5px; vertical-align: middle; width: 16px; height: 16px; }\r\n .aspect-ratio-label, .bg-color-label { font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer; }\r\n .quality-setting { display: flex; align-items: center; gap: 10px; margin-top: 10px; }\r\n .quality-setting label { margin-bottom: 0; }\r\n .quality-setting input[type=\"range\"] { flex-grow: 1; margin-bottom: 0; }\r\n .quality-setting span { min-width: 30px; text-align: right; font-weight: bold; }\r\n .transform-buttons { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .transform-buttons button { padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; background-color: #fff; color: #333; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }\r\n .transform-buttons button:hover { border-color: #999; background-color: #f0f0f0; color: #333; }\r\n .transform-buttons button:active { background-color: #e0e0e0; }\r\n .transform-buttons button:disabled { color: #999; cursor: not-allowed; background-color: #f8f8f8; border-color: #ddd; }\r\n\r\n \/* --- \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f --- *\/\r\n .avif-converter-status-area { margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); }\r\n .avif-converter-status { font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em; line-height: 1.5; word-wrap: break-word; }\r\n .avif-converter-status.success { color: #155724; font-weight: bold; }\r\n .avif-converter-status.error { color: #721c24; font-weight: bold; }\r\n .avif-converter-download-area a { display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em; transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer; }\r\n .avif-converter-download-area a:hover { background-color: #218838; }\r\n .avif-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"avif-converter-wrapper\"> \r\n\r\n \r\n <div class=\"avif-upload-area\" id=\"avifUploadArea\"> \r\n \r\n <input type=\"file\" id=\"avifFileInput\" accept=\".avif, image\/avif\" \/>\r\n \r\n <label for=\"avifFileInput\" class=\"avif-upload-button\" role=\"button\" tabindex=\"0\">\r\n \u0417\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0442\u0435 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f AVIF\r\n <\/label>\r\n <div class=\"avif-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\">(\u0417\u0430 \u0437\u0430\u043c\u043e\u0432\u0447\u0443\u0432\u0430\u043d\u043d\u044f\u043c \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0454 \u0444\u0430\u0439\u043b\u0438 AVIF \u043d\u0430 PNG. \u0410\u043d\u0456\u043c\u043e\u0432\u0430\u043d\u0438\u0439 AVIF \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0454 \u043f\u0435\u0440\u0448\u0438\u0439 \u043a\u0430\u0434\u0440.)<\/span> \r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"avif-converter-settings\"> \r\n <span class=\"avif-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\"> \r\n \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=\"avif-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 <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>\u041f\u0440\u0438\u043c\u0456\u0442\u043a\u0430. \u041c\u0435\u0442\u0430\u0434\u0430\u043d\u0456 \u0437 AVIF \u043c\u043e\u0436\u0443\u0442\u044c \u0431\u0443\u0442\u0438 \u0432\u0442\u0440\u0430\u0447\u0435\u043d\u0456 \u043f\u0456\u0434 \u0447\u0430\u0441 \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f.<\/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>(\u041a\u043e\u0440\u0438\u0441\u043d\u043e \u0434\u043b\u044f \u0432\u0438\u0434\u0430\u043b\u0435\u043d\u043d\u044f \u043f\u0440\u043e\u0437\u043e\u0440\u043e\u0441\u0442\u0456 \u0430\u0431\u043e \u0432\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044f \u0443 JPEG)<\/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=\"avif-converter-status-area\" id=\"statusArea\" style=\"display: none;\"> \r\n <div class=\"avif-converter-status\" id=\"converterStatus\"><\/div> \r\n <div class=\"avif-converter-download-area\" id=\"downloadLinkContainer\"><\/div> \r\n <\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ --- \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM ---\r\n const uploadArea = document.getElementById('avifUploadArea'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const fileInput = document.getElementById('avifFileInput'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const statusArea = document.getElementById('statusArea');\r\n const statusMessage = document.getElementById('converterStatus');\r\n const downloadLinkContainer = document.getElementById('downloadLinkContainer');\r\n const toggleSettingsBtn = document.getElementById('toggleSettingsBtn');\r\n const settingsContent = document.getElementById('settingsContent');\r\n const outputFormatSelect = document.getElementById('outputFormat');\r\n const qualityControlDiv = document.getElementById('qualityControl');\r\n const outputQualitySlider = document.getElementById('outputQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const outputWidthInput = document.getElementById('outputWidth');\r\n const outputHeightInput = document.getElementById('outputHeight');\r\n const maintainAspectRatioCheckbox = document.getElementById('maintainAspectRatio');\r\n const useBackgroundColorCheckbox = document.getElementById('useBackgroundColor');\r\n const backgroundColorPicker = document.getElementById('backgroundColor');\r\n const rotateBtn = document.getElementById('rotateBtn');\r\n const flipHorizontalBtn = document.getElementById('flipHorizontalBtn');\r\n const flipVerticalBtn = document.getElementById('flipVerticalBtn');\r\n const resetTransformBtn = document.getElementById('resetTransformBtn');\r\n\r\n \/\/ --- \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 ---\r\n const elements = { uploadArea, fileInput, statusArea, statusMessage, downloadLinkContainer, toggleSettingsBtn, settingsContent, outputFormatSelect, qualityControlDiv, outputQualitySlider, qualityValueSpan, outputWidthInput, outputHeightInput, maintainAspectRatioCheckbox, useBackgroundColorCheckbox, backgroundColorPicker, rotateBtn, flipHorizontalBtn, flipVerticalBtn, resetTransformBtn };\r\n for (const key in elements) {\r\n if (!elements[key]) {\r\n console.error(`Converter init error: Element with ID or reference \"${key}\" not found.`);\r\n if (uploadArea) uploadArea.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n else document.body.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n return;\r\n }\r\n }\r\n\r\n \/\/ --- \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n let currentRotation = 0;\r\n let isFlippedHorizontal = false;\r\n let isFlippedVertical = false;\r\n let originalImageDimensions = { width: 0, height: 0 };\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 ---\r\n function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'avif-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n downloadLinkContainer.innerHTML = '';\r\n statusArea.style.display = 'none';\r\n fileInput.value = '';\r\n uploadArea.classList.remove('upload-error');\r\n resetTransformations();\r\n updateTransformButtonStates();\r\n }\r\n\r\n function showStatus(message, type = 'info') {\r\n const prefix = type === 'error' ? '\u274c ' : (type === 'success' ? '\u2705 ' : '\u23f3 ');\r\n statusMessage.textContent = prefix + message;\r\n statusMessage.className = 'avif-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n uploadArea.classList.remove('upload-error');\r\n if (type === 'success') { statusMessage.classList.add('success'); }\r\n else if (type === 'error') { statusMessage.classList.add('error'); uploadArea.classList.add('upload-error'); }\r\n if (type !== 'success') { if (type === 'error') downloadLinkContainer.innerHTML = ''; }\r\n statusArea.style.display = 'block';\r\n }\r\n\r\n function toggleSettings() { \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0435\u0440\u0441\u0438\u044e \u0441 classList\r\n const isCurrentlyVisible = settingsContent.classList.contains('is-visible');\r\n if (isCurrentlyVisible) {\r\n settingsContent.classList.remove('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n } else {\r\n settingsContent.classList.add('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25b2';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'true');\r\n settingsContent.setAttribute('aria-hidden', 'false');\r\n }\r\n }\r\n function updateQualityControlVisibility() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function updateQualityValueDisplay() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function toggleBackgroundColorPicker() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function resetTransformations() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n function updateTransformButtonStates() { \/* ... \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 ... *\/ }\r\n\r\n \/\/ --- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 ---\r\n function handleFile(file) {\r\n resetInterface();\r\n if (!file) return;\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e AVIF)\r\n const fileName = file.name;\r\n const fileMimeType = file.type || '';\r\n const isAvif = \/\\.avif$\/i.test(fileName) || fileMimeType === 'image\/avif'; \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430 .avif \u0438\u043b\u0438 image\/avif\r\n\r\n if (!isAvif) {\r\n showStatus(`Incorrect file format. Please upload an AVIF file (received: ${fileName}, type: ${fileMimeType || 'unknown'}).`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Reading file.`, 'info');\r\n const reader = new FileReader();\r\n reader.onload = function(e) {\r\n showStatus(`Processing \"${fileName}\"... Decoding image.`, 'info');\r\n const img = new Image();\r\n img.onload = function() {\r\n \/\/ ... \u0432\u0441\u044f \u043b\u043e\u0433\u0438\u043a\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0438\u0434\u0435\u043d\u0442\u0438\u0447\u043d\u0430 JPG\/WebP ...\r\n originalImageDimensions.width = img.naturalWidth; originalImageDimensions.height = img.naturalHeight;\r\n if (originalImageDimensions.width === 0 || originalImageDimensions.height === 0) { \/*...*\/ return; }\r\n showStatus(`Processing \"${fileName}\"... Applying settings.`, 'info');\r\n const mimeType = outputFormatSelect.value; const quality = parseFloat(outputQualitySlider.value);\r\n const maintainRatio = maintainAspectRatioCheckbox.checked; const useBG = useBackgroundColorCheckbox.checked; const bgColor = backgroundColorPicker.value;\r\n let desiredWidth = parseInt(outputWidthInput.value, 10) || 0; let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n let targetWidth = originalImageDimensions.width; let targetHeight = originalImageDimensions.height;\r\n if (desiredWidth > 0 || desiredHeight > 0) { if (maintainRatio) { \/*...*\/ } else { \/*...*\/ } }\r\n targetWidth = Math.max(1, targetWidth); targetHeight = Math.max(1, targetHeight);\r\n const canvas = document.createElement('canvas'); const requiresSwap = currentRotation === 90 || currentRotation === 270;\r\n canvas.width = requiresSwap ? targetHeight : targetWidth; canvas.height = requiresSwap ? targetWidth : targetHeight;\r\n const MAX_CANVAS_AREA = 16384 * 16384; const MAX_CANVAS_DIM = 32767;\r\n if (canvas.width <= 0 || canvas.height <= 0 || canvas.width > MAX_CANVAS_DIM || canvas.height > MAX_CANVAS_DIM || (canvas.width * canvas.height > MAX_CANVAS_AREA)) { \/*...*\/ return; }\r\n const ctx = canvas.getContext('2d'); if (!ctx) { \/*...*\/ return; }\r\n try {\r\n ctx.save();\r\n if (useBG || mimeType === 'image\/jpeg') { ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); } else { ctx.clearRect(0, 0, canvas.width, canvas.height); }\r\n const centerX = canvas.width \/ 2; const centerY = canvas.height \/ 2; ctx.translate(centerX, centerY);\r\n if (currentRotation !== 0) ctx.rotate(currentRotation * Math.PI \/ 180);\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n const drawX = -targetWidth \/ 2; const drawY = -targetHeight \/ 2;\r\n ctx.drawImage(img, 0, 0, originalImageDimensions.width, originalImageDimensions.height, drawX, drawY, targetWidth, targetHeight);\r\n ctx.restore();\r\n showStatus(`Processing \"${fileName}\"... Encoding final image.`, 'info');\r\n let exportQuality = quality; if (mimeType === 'image\/webp' && quality === 1.0) { console.log(\"Attempting near-lossless WebP (quality 1.0)\"); }\r\n const dataUrl = canvas.toDataURL(mimeType, (mimeType === 'image\/jpeg' || mimeType === 'image\/webp') ? exportQuality : undefined);\r\n if (!dataUrl || dataUrl === 'data:,') { throw new Error(\"Failed to encode image.\"); }\r\n const link = document.createElement('a'); link.href = dataUrl;\r\n const originalName = fileName.replace(\/\\.avif$\/i, ''); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c .avif\r\n let extension = mimeType.split('\/')[1]; if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted.${extension}`; \/\/ \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n link.textContent = `Download ${link.download}`; downloadLinkContainer.innerHTML = ''; downloadLinkContainer.appendChild(link);\r\n link.click(); \/\/ \u0410\u0432\u0442\u043e-\u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n } catch (error) { \/* \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043e\u043a *\/ }\r\n };\r\n img.onerror = function(err) {\r\n console.error(\"AVIF loading error:\", err);\r\n \/\/ \u0423\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c, \u0447\u0442\u043e \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c AVIF\r\n showStatus(`Error loading AVIF image \"${fileName}\". Your browser might not support AVIF decoding, or the file is corrupted.`, 'error');\r\n };\r\n img.src = e.target.result;\r\n };\r\n reader.onerror = function(err) { \/*...*\/ showStatus(`Error reading file \"${fileName}\".`, 'error'); };\r\n reader.readAsDataURL(file);\r\n }\r\n\r\n \/\/ --- \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 ---\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\r\n toggleSettingsBtn.addEventListener('click', toggleSettings);\r\n toggleSettingsBtn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSettings(); } });\r\n outputFormatSelect.addEventListener('change', updateQualityControlVisibility);\r\n outputQualitySlider.addEventListener('input', updateQualityValueDisplay);\r\n outputWidthInput.addEventListener('input', () => { if (maintainAspectRatioCheckbox.checked && outputWidthInput.value) outputHeightInput.value = ''; });\r\n outputHeightInput.addEventListener('input', () => { if (maintainAspectRatioCheckbox.checked && outputHeightInput.value) outputWidthInput.value = ''; });\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n useBackgroundColorCheckbox.addEventListener('change', toggleBackgroundColorPicker);\r\n function applyTransformation(transformFunc) { \/*...*\/ } \/\/ \u041b\u043e\u0433\u0438\u043a\u0430 \u0442\u0430 \u0436\u0435\r\n rotateBtn.addEventListener('click', () => applyTransformation(() => { currentRotation = (currentRotation + 90) % 360; }));\r\n flipHorizontalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedHorizontal = !isFlippedHorizontal; }));\r\n flipVerticalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedVertical = !isFlippedVertical; }));\r\n resetTransformBtn.addEventListener('click', () => applyTransformation(() => { resetTransformations(); }));\r\n\r\n \/\/ \u0412\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID avifFileInput)\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files.length > 0) { handleFile(event.target.files[0]); }\r\n else { resetInterface(); }\r\n });\r\n\r\n \/\/ Drag and Drop (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c ID avifUploadArea)\r\n uploadArea.addEventListener('dragover', (event) => { \/*...*\/ });\r\n uploadArea.addEventListener('dragleave', (event) => { \/*...*\/ });\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault(); uploadArea.classList.remove('drag-over');\r\n if (event.dataTransfer.files.length > 0) {\r\n const droppedFile = event.dataTransfer.files[0];\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0440\u0438 Drop (\u0442\u043e\u043b\u044c\u043a\u043e AVIF)\r\n const fileNameDrop = droppedFile.name; const fileMimeTypeDrop = droppedFile.type || '';\r\n const isAvifDrop = \/\\.avif$\/i.test(fileNameDrop) || fileMimeTypeDrop === 'image\/avif';\r\n if (isAvifDrop) {\r\n fileInput.files = event.dataTransfer.files; handleFile(droppedFile);\r\n } else {\r\n showStatus(`Incorrect file format dropped. Please drop an AVIF file (received: ${fileNameDrop}, type: ${fileMimeTypeDrop || 'unknown'}).`, 'error');\r\n fileInput.value = '';\r\n }\r\n } else { resetInterface(); }\r\n });\r\n\r\n \/\/ --- \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates();\r\n\r\n}); \/\/ \u041a\u043e\u043d\u0435\u0446 'DOMContentLoaded'\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-575d0c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"575d0c1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-f3365e0\" data-id=\"f3365e0\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-c4ab0e7 elementor-widget elementor-widget-text-editor\" data-id=\"c4ab0e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0406\u043d\u0448\u0456 \u0444\u043e\u0440\u043c\u0430\u0442\u0438: <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\/jpeg-to-png\/\">JPEG \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-78fa69d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78fa69d\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-83e295d\" data-id=\"83e295d\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7befef0 elementor-widget elementor-widget-text-editor\" data-id=\"7befef0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5>\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-3e8b238 elementor-share-buttons--shape-rounded elementor-share-buttons--align-center elementor-share-buttons--view-icon-text elementor-share-buttons--skin-gradient elementor-grid-0 elementor-share-buttons--color-official elementor-widget elementor-widget-share-buttons\" data-id=\"3e8b238\" data-element_type=\"widget\" data-widget_type=\"share-buttons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-grid\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_pinterest\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on pinterest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-pinterest\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tPinterest\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_telegram\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on telegram\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-telegram\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\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-53d46b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53d46b4\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-5df0925\" data-id=\"5df0925\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e819237\" data-id=\"e819237\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2d2fa93 elementor-widget elementor-widget-text-editor\" data-id=\"2d2fa93\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u0428\u0443\u043a\u0430\u0454\u0442\u0435 \u0448\u0432\u0438\u0434\u043a\u0438\u0439 \u0456 \u043f\u0440\u043e\u0441\u0442\u0438\u0439 \u0441\u043f\u043e\u0441\u0456\u0431 \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0443\u0432\u0430\u0442\u0438 AVIF \u0443 PNG? \u0412\u0438 \u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c\u0443 \u043c\u0456\u0441\u0446\u0456. \u041d\u0430\u0448 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 AVIF \u0443 PNG \u0434\u043e\u043f\u043e\u043c\u043e\u0436\u0435 \u0432\u0430\u043c \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0438\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f AVIF \u043d\u0430\u0441\u0442\u0443\u043f\u043d\u043e\u0433\u043e \u043f\u043e\u043a\u043e\u043b\u0456\u043d\u043d\u044f \u043d\u0430 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u043d\u0456 \u0444\u0430\u0439\u043b\u0438 PNG \u2014 \u0431\u0435\u0437 \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d\u043d\u044f \u043d\u0456\u0447\u043e\u0433\u043e, \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442\u0438 \u044f\u043a\u043e\u0441\u0442\u0456 \u0442\u0430 \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e 100%.<\/p><h2>\u0429\u043e \u0442\u0430\u043a\u0435 AVIF?<\/h2><p>AVIF (\u0444\u043e\u0440\u043c\u0430\u0442 \u0444\u0430\u0439\u043b\u0443 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f AV1) \u2014 \u0446\u0435 \u0441\u0443\u0447\u0430\u0441\u043d\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u043f\u0440\u0438\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0432\u0438\u0441\u043e\u043a\u043e\u0433\u043e \u0441\u0442\u0438\u0441\u043d\u0435\u043d\u043d\u044f \u0437 \u0432\u0456\u0434\u043c\u0456\u043d\u043d\u043e\u044e \u0432\u0456\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u044e \u044f\u043a\u0456\u0441\u0442\u044e. \u0412\u0456\u043d \u0437\u0430\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0439 \u043d\u0430 \u0432\u0456\u0434\u0435\u043e\u043a\u043e\u0434\u0435\u043a\u0443 AV1 \u0456 \u043d\u0430\u0431\u0438\u0440\u0430\u0454 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u043e\u0441\u0442\u0456 \u0437\u0430\u0432\u0434\u044f\u043a\u0438 \u043c\u0430\u043b\u0438\u043c \u0440\u043e\u0437\u043c\u0456\u0440\u0430\u043c \u0444\u0430\u0439\u043b\u0456\u0432 \u0456 \u0435\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u0456\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0456.<\/p><p>\u0417\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f AVIF \u0456\u0434\u0435\u0430\u043b\u044c\u043d\u043e \u043f\u0456\u0434\u0445\u043e\u0434\u044f\u0442\u044c \u0434\u043b\u044f \u0432\u0435\u0431-\u0441\u0430\u0439\u0442\u0456\u0432 \u0456 \u043f\u0440\u043e\u0433\u0440\u0430\u043c, \u043e\u0441\u043a\u0456\u043b\u044c\u043a\u0438 \u0432\u043e\u043d\u0438 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u044e\u0442\u044c\u0441\u044f \u0448\u0432\u0438\u0434\u0448\u0435 \u0442\u0430 \u0437\u043c\u0435\u043d\u0448\u0443\u044e\u0442\u044c \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043f\u0440\u043e\u043f\u0443\u0441\u043a\u043d\u043e\u0457 \u0437\u0434\u0430\u0442\u043d\u043e\u0441\u0442\u0456. \u041e\u0434\u043d\u0430\u043a \u0449\u0435 \u043d\u0435 \u0432\u0441\u0456 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043d\u0435 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0435\u043d\u043d\u044f, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0438 \u0447\u0438 \u0437\u0430\u0441\u043e\u0431\u0438 \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u043d\u043d\u044f \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c AVIF. \u041e\u0441\u044c \u0447\u043e\u043c\u0443 \u0443 \u0432\u0430\u0441 \u043c\u043e\u0436\u0443\u0442\u044c \u0432\u0438\u043d\u0438\u043a\u043d\u0443\u0442\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0438 \u043f\u0456\u0434 \u0447\u0430\u0441 \u0441\u043f\u0440\u043e\u0431\u0438 \u0432\u0456\u0434\u043a\u0440\u0438\u0442\u0438 \u0430\u0431\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u0442\u0438 \u0444\u0430\u0439\u043b AVIF.<\/p><h2>\u041d\u0430\u0432\u0456\u0449\u043e \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0443\u0432\u0430\u0442\u0438 AVIF \u0443 PNG?<\/h2><p>\u0425\u043e\u0447\u0430 AVIF \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0443\u0454 \u043a\u0440\u0430\u0449\u0435 \u0441\u0442\u0438\u0441\u043d\u0435\u043d\u043d\u044f, PNG \u0437\u0430\u043b\u0438\u0448\u0430\u0454\u0442\u044c\u0441\u044f \u043e\u0434\u043d\u0438\u043c \u0456\u0437 \u043d\u0430\u0439\u0431\u0456\u043b\u044c\u0448 \u0448\u0438\u0440\u043e\u043a\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0432\u0430\u043d\u0438\u0445 \u0444\u043e\u0440\u043c\u0430\u0442\u0456\u0432 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c \u043d\u0430 \u0432\u0441\u0456\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445. \u041e\u0441\u044c \u043e\u0441\u043d\u043e\u0432\u043d\u0456 \u043f\u0440\u0438\u0447\u0438\u043d\u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0430\u0446\u0456\u0457 AVIF \u0443 PNG:<\/p><ul><li><strong>\u0421\u0443\u043c\u0456\u0441\u043d\u0456\u0441\u0442\u044c<\/strong>: \u0444\u0430\u0439\u043b\u0438 PNG \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c \u043c\u0430\u0439\u0436\u0435 \u0432\u0441\u0456 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0438, \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0457 \u0442\u0430 \u0440\u0435\u0434\u0430\u043a\u0442\u043e\u0440\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c.<\/li><li><strong>\u0411\u0435\u0437 \u0432\u0442\u0440\u0430\u0442\u0438 \u044f\u043a\u043e\u0441\u0442\u0456<\/strong>: PNG \u2014 \u0446\u0435 \u0444\u043e\u0440\u043c\u0430\u0442 \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442, \u0442\u043e\u0431\u0442\u043e \u0432\u0456\u043d \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u0432\u0441\u0456 \u0434\u0435\u0442\u0430\u043b\u0456 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u043d\u0435\u0434\u043e\u0442\u043e\u0440\u043a\u0430\u043d\u0438\u043c\u0438.<\/li><li><strong>\u041f\u0440\u043e\u0441\u0442\u0456\u0448\u0435 \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u043d\u043d\u044f<\/strong>: \u0431\u0430\u0433\u0430\u0442\u043e \u043f\u0440\u043e\u0433\u0440\u0430\u043c \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u043d\u043d\u044f \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c \u0449\u0435 \u043d\u0435 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c AVIF, \u0430\u043b\u0435 \u0432\u0441\u0456 \u0432\u043e\u043d\u0438 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u044e\u0442\u044c PNG.<\/li><li><strong>\u0428\u0432\u0438\u0434\u043a\u0438\u0439 \u043e\u0431\u043c\u0456\u043d<\/strong>: \u0444\u0430\u0439\u043b\u0438 PNG \u043b\u0435\u0433\u0448\u0435 \u0437\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0443\u0432\u0430\u0442\u0438 \u0430\u0431\u043e \u0434\u0456\u043b\u0438\u0442\u0438\u0441\u044f \u043d\u0438\u043c\u0438 \u043d\u0430 \u0442\u0430\u043a\u0438\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0430\u0445, \u044f\u043a \u0441\u043e\u0446\u0456\u0430\u043b\u044c\u043d\u0456 \u043c\u0435\u0440\u0435\u0436\u0456, \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u0438 \u043e\u0431\u043c\u0456\u043d\u0443 \u043f\u043e\u0432\u0456\u0434\u043e\u043c\u043b\u0435\u043d\u043d\u044f\u043c\u0438 \u0442\u0430 \u0445\u043c\u0430\u0440\u043d\u0456 \u0434\u0438\u0441\u043a\u0438.<\/li><\/ul><p>\u042f\u043a\u0449\u043e \u0432\u0430\u043c \u043f\u043e\u0442\u0440\u0456\u0431\u0435\u043d \u0443\u043d\u0456\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0438\u0439 \u0444\u043e\u0440\u043c\u0430\u0442 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f, \u043d\u0430\u0448 \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u0438\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 AVIF \u0443 PNG \u2014 \u043d\u0430\u0439\u0448\u0432\u0438\u0434\u0448\u0435 \u0440\u0456\u0448\u0435\u043d\u043d\u044f.<\/p><h2>\u042f\u043a \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0443\u0432\u0430\u0442\u0438 AVIF \u0443 PNG \u043e\u043d\u043b\u0430\u0439\u043d (\u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e)<\/h2><p>\u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f AVIF \u0443 PNG \u043d\u0456\u043a\u043e\u043b\u0438 \u043d\u0435 \u0431\u0443\u043b\u043e \u0442\u0430\u043a\u0438\u043c \u043f\u0440\u043e\u0441\u0442\u0438\u043c. \u0417 \u043d\u0430\u0448\u0438\u043c \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u0438\u043c \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u043e\u043c \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c AVIF \u043d\u0435 \u043f\u043e\u0442\u0440\u0456\u0431\u043d\u043e \u0432\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u044e\u0432\u0430\u0442\u0438 \u043f\u0440\u043e\u0433\u0440\u0430\u043c\u043d\u0435 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0435\u043d\u043d\u044f \u0447\u0438 \u0442\u0443\u0440\u0431\u0443\u0432\u0430\u0442\u0438\u0441\u044f \u043f\u0440\u043e \u0442\u0435\u0445\u043d\u0456\u0447\u043d\u0456 \u043d\u0430\u0432\u0438\u0447\u043a\u0438. \u041f\u0440\u043e\u0441\u0442\u043e \u0432\u0438\u043a\u043e\u043d\u0430\u0439\u0442\u0435 \u0446\u0456 \u043f\u0440\u043e\u0441\u0442\u0456 \u043a\u0440\u043e\u043a\u0438:<\/p><ol><li><strong>\u0417\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0442\u0435 \u0444\u0430\u0439\u043b AVIF<\/strong> \u2013 \u041f\u0435\u0440\u0435\u0442\u044f\u0433\u043d\u0456\u0442\u044c \u0430\u0431\u043e \u043a\u043b\u0430\u0446\u043d\u0456\u0442\u044c, \u0449\u043e\u0431 \u0432\u0438\u0431\u0440\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f.<\/li><li><strong>\u0420\u043e\u0437\u043f\u043e\u0447\u0430\u0442\u0438 \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f<\/strong> \u2013 \u041d\u0430\u0448 \u0456\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u043d\u043e \u043f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0454 \u0439\u043e\u0433\u043e \u0443 PNG \u0437\u0430 \u043b\u0456\u0447\u0435\u043d\u0456 \u0441\u0435\u043a\u0443\u043d\u0434\u0438.<\/li><li><strong>\u0417\u0430\u0432\u0430\u043d\u0442\u0430\u0436\u0442\u0435 \u0444\u0430\u0439\u043b PNG<\/strong> \u2013 \u041e\u0434\u0438\u043d \u043a\u043b\u0456\u043a, \u0456 \u0432\u0430\u0448\u0435 \u043d\u043e\u0432\u0435 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0433\u043e\u0442\u043e\u0432\u0435 \u0434\u043e \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f.<\/li><\/ol><p>\u0426\u0435\u0439 \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 AVIF \u043f\u0440\u0430\u0446\u044e\u0454 \u0431\u0435\u0437\u043f\u043e\u0441\u0435\u0440\u0435\u0434\u043d\u044c\u043e \u0443 \u0432\u0430\u0448\u043e\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456, \u0442\u043e\u0436 \u0432\u0430\u0448\u0456 \u0444\u0430\u0439\u043b\u0438 \u0437\u0430\u043b\u0438\u0448\u0430\u044e\u0442\u044c\u0441\u044f \u0431\u0435\u0437\u043f\u0435\u0447\u043d\u0438\u043c\u0438 \u0442\u0430 \u043a\u043e\u043d\u0444\u0456\u0434\u0435\u043d\u0446\u0456\u0439\u043d\u0438\u043c\u0438. \u041d\u0435\u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u0442\u043e\u0433\u043e, \u043a\u043e\u0440\u0438\u0441\u0442\u0443\u0454\u0442\u0435\u0441\u044f \u0432\u0438 \u043d\u0430\u0441\u0442\u0456\u043b\u044c\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u2019\u044e\u0442\u0435\u0440\u043e\u043c, \u043f\u043b\u0430\u043d\u0448\u0435\u0442\u043e\u043c \u0447\u0438 \u043c\u043e\u0431\u0456\u043b\u044c\u043d\u0438\u043c \u043f\u0440\u0438\u0441\u0442\u0440\u043e\u0454\u043c, \u0432\u0438 \u043c\u043e\u0436\u0435\u0442\u0435 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0443\u0432\u0430\u0442\u0438 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442\u0438 \u044f\u043a\u043e\u0441\u0442\u0456 \u0431\u0443\u0434\u044c-\u043a\u043e\u043b\u0438 \u0442\u0430 \u0431\u0443\u0434\u044c-\u0434\u0435.<\/p><h2>\u041f\u0435\u0440\u0435\u0432\u0430\u0433\u0438 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f \u043d\u0430\u0448\u043e\u0433\u043e \u043e\u043d\u043b\u0430\u0439\u043d-\u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440\u0430 AVIF \u0443 PNG<\/h2><ul><li><strong>100% \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e<\/strong> \u2013 \u0411\u0435\u0437 \u043f\u0440\u0438\u0445\u043e\u0432\u0430\u043d\u0438\u0445 \u043a\u043e\u043c\u0456\u0441\u0456\u0439, \u0431\u0435\u0437 \u043e\u0431\u043c\u0435\u0436\u0435\u043d\u044c.<\/li><li><strong>\u0428\u0432\u0438\u0434\u043a\u043e \u0456 \u043b\u0435\u0433\u043a\u043e<\/strong> \u2013 \u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u0435\u043d\u043d\u044f \u043e\u0434\u043d\u0438\u043c \u043a\u043b\u0430\u0446\u0430\u043d\u043d\u044f\u043c \u043c\u0438\u0448\u0456 \u0431\u0435\u0437 \u043a\u0440\u0438\u0432\u043e\u0457 \u043d\u0430\u0432\u0447\u0430\u043d\u043d\u044f.<\/li><li><strong>\u0411\u0435\u0437 \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438<\/strong> \u2013 \u0412\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u043e\u0432\u0443\u0439\u0442\u0435 \u0439\u043e\u0433\u043e \u0431\u0435\u0437\u043f\u043e\u0441\u0435\u0440\u0435\u0434\u043d\u044c\u043e \u0443 \u0441\u0432\u043e\u0454\u043c\u0443 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0456.<\/li><li><strong>\u0411\u0435\u0437\u043f\u0435\u0447\u043d\u0438\u0439<\/strong> \u2013 \u0412\u0430\u0448\u0456 \u0444\u0430\u0439\u043b\u0438 \u043d\u0456\u043a\u043e\u043b\u0438 \u043d\u0435 \u0437\u0431\u0435\u0440\u0456\u0433\u0430\u044e\u0442\u044c\u0441\u044f \u0442\u0430 \u043d\u0435 \u043f\u043e\u0448\u0438\u0440\u044e\u044e\u0442\u044c\u0441\u044f.<\/li><li><strong>\u0417\u0431\u0435\u0440\u0456\u0433\u0430\u0454 \u044f\u043a\u0456\u0441\u0442\u044c<\/strong> \u2013 \u041f\u0435\u0440\u0435\u0442\u0432\u043e\u0440\u044e\u0454 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u043d\u044f \u0431\u0435\u0437 \u0432\u0442\u0440\u0430\u0442\u0438 \u0441\u0442\u0438\u0441\u043d\u0435\u043d\u043d\u044f.<\/li><li><strong>\u041c\u0443\u043b\u044c\u0442\u0438\u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u0435\u043d\u043d\u0456\u0441\u0442\u044c<\/strong> \u2013 \u041f\u0440\u0430\u0446\u044e\u0454 \u043d\u0430 Windows, macOS, Android, iOS \u0442\u043e\u0449\u043e.<\/li><\/ul><p>\u041d\u0435\u0437\u0430\u043b\u0435\u0436\u043d\u043e \u0432\u0456\u0434 \u0442\u043e\u0433\u043e, \u0447\u0438 \u0432\u0438 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440, \u0440\u043e\u0437\u0440\u043e\u0431\u043d\u0438\u043a \u0430\u0431\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u0442\u0440\u0435\u0431\u0443\u0454\u0442\u0435 \u0448\u0432\u0438\u0434\u043a\u043e\u0457 \u0437\u043c\u0456\u043d\u0438 \u0444\u043e\u0440\u043c\u0430\u0442\u0443, \u043d\u0430\u0448 \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u0438\u0439 \u043a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 \u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u044c AVIF \u0441\u0442\u0430\u043d\u0435 \u0432\u0430\u0448\u0438\u043c \u043d\u0430\u0439\u043a\u0440\u0430\u0449\u0438\u043c \u0432\u0438\u0431\u043e\u0440\u043e\u043c.<\/p><h2>AVIF \u043f\u0440\u043e\u0442\u0438 PNG: \u0448\u0432\u0438\u0434\u043a\u0435 \u043f\u043e\u0440\u0456\u0432\u043d\u044f\u043d\u043d\u044f<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>\u041e\u0441\u043e\u0431\u043b\u0438\u0432\u0456\u0441\u0442\u044c<\/th><th>AVIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>\u041a\u043e\u043c\u043f\u0440\u0435\u0441\u0456\u044f<\/td><td>\u0412\u0438\u0441\u043e\u043a\u0438\u0439 (\u043c\u0435\u043d\u0448\u0438\u0439 \u0440\u043e\u0437\u043c\u0456\u0440 \u0444\u0430\u0439\u043b\u0443)<\/td><td>\u0411\u0435\u0437 \u0432\u0442\u0440\u0430\u0442 (\u0431\u0456\u043b\u044c\u0448\u0456 \u0444\u0430\u0439\u043b\u0438)<\/td><\/tr><tr><td>\u041f\u0440\u043e\u0437\u043e\u0440\u0456\u0441\u0442\u044c<\/td><td>\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f<\/td><td>\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f<\/td><\/tr><tr><td>\u041f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430<\/td><td>\u041e\u0431\u043c\u0435\u0436\u0435\u043d\u0438\u0439<\/td><td>\u0423\u043d\u0456\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u0438\u0439<\/td><\/tr><tr><td>\u041f\u0440\u043e\u0433\u0440\u0430\u043c\u043d\u0435 \u0437\u0430\u0431\u0435\u0437\u043f\u0435\u0447\u0435\u043d\u043d\u044f \u0434\u043b\u044f \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u043d\u043d\u044f<\/td><td>\u041e\u0431\u043c\u0435\u0436\u0435\u043d\u0430 \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u043a\u0430<\/td><td>\u0428\u0438\u0440\u043e\u043a\u043e \u043f\u0456\u0434\u0442\u0440\u0438\u043c\u0443\u0454\u0442\u044c\u0441\u044f<\/td><\/tr><tr><td>\u0412\u0438\u043f\u0430\u0434\u043e\u043a \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f<\/td><td>\u0412\u0435\u0431 \u043e\u043f\u0442\u0438\u043c\u0456\u0437\u0430\u0446\u0456\u044f<\/td><td>\u0417\u0430\u0433\u0430\u043b\u044c\u043d\u0435 \u0432\u0438\u043a\u043e\u0440\u0438\u0441\u0442\u0430\u043d\u043d\u044f, \u0440\u0435\u0434\u0430\u0433\u0443\u0432\u0430\u043d\u043d\u044f, \u0441\u043f\u0456\u043b\u044c\u043d\u0438\u0439 \u0434\u043e\u0441\u0442\u0443\u043f<\/td><\/tr><\/tbody><\/table>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-33f395e\" data-id=\"33f395e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>\u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0435\u0440 AVIF \u0443 PNG \u041a\u043e\u043d\u0432\u0435\u0440\u0442\u0443\u0439\u0442\u0435 AVIF \u0443 PNG \u0431\u0435\u0437\u043a\u043e\u0448\u0442\u043e\u0432\u043d\u043e \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 Aviv \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. AVI \u0443<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4888,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-4727","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/pages\/4727","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=4727"}],"version-history":[{"count":44,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/pages\/4727\/revisions"}],"predecessor-version":[{"id":4977,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/pages\/4727\/revisions\/4977"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/media\/4888"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/uk\/wp-json\/wp\/v2\/media?parent=4727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}