Стиснути зображення до WebP (100–300 KB)
Завантажте зображення, задайте ім’я (необов’язково) і скачайте результат.
⬇️ Скачати стиснуте зображення
У сучасних статтях і блогах швидкість завантаження сторінки має критичне значення. Одним із способів оптимізації є зменшення ваги зображень без втрати їх якості. Цей блок коду дозволяє відвідувачам сайту легко завантажувати свої зображення, стискати їх у формат WebP і отримувати легку версію готову до використання на сайті.
Як це працює
- Завантаження зображення: користувач обирає будь-яке зображення зі свого комп’ютера через кнопку «Завантажити».
- Стиснення на клієнтській стороні: скрипт JavaScript створює прихований
<canvas>та малює на ньому зображення. - Масштабування: якщо ширина оригіналу більша за 1920 px, воно автоматично зменшується, щоб уникнути великих файлів.
- Підбір якості: цикл JS зменшує якість WebP, поки файл не потрапить у діапазон 100–300 КБ.
- Прогрес та статус: користувач бачить прогрес обробки через анімований прогресбар і повідомлення про готовність.
- Скачування: після завершення з’являється кнопка «Скачати стиснуте зображення», щоб отримати файл у форматі WebP.
Навіщо це потрібно
- Зменшення ваги зображень прискорює завантаження сторінки та покращує SEO.
- WebP формати зазвичай легші за JPEG та PNG при збереженні високої якості.
- Відвідувач може самостійно оптимізувати зображення без додаткових плагінів чи серверної обробки.
Деталі роботи коду
- HTML та CSS формують красивий сучасний блок із кнопками, прогресбаром та статусом.
- JS-скрипт керує завантаженням, обробкою та створенням WebP-файлу.
- Canvas API використовується для масштабування та конвертації зображення в WebP.
- Цикл підбору якості гарантує, що файл потрапить у бажаний діапазон ваги (100–300 КБ).
