Веб-додаток для оптимізації зображень у форматах PNG та JPG та конвертації їх у формат WebP. Працює повністю в браузері, без необхідності завантаження файлів на сервер.
- 🖼️ Підтримка форматів PNG та JPG
- 🚀 Конвертація в WebP з налаштуванням якості
- 📦 Batch обробка декількох файлів одночасно
- 🎨 Сучасний та зручний інтерфейс
- 📊 Порівняння розмірів файлів до та після обробки
- 💾 Завантаження окремих файлів або ZIP архіву
- ⚙️ Налаштування якості та рівня оптимізації
- 🔒 Всі операції виконуються локально в браузері
- Nuxt 3 - Vue.js фреймворк
- Vue 3 - реактивний UI
- SCSS - препроцесор CSS
- Canvas API - обробка зображень
- JSZip - створення ZIP архівів
# Встановити залежності
npm install
# Запустити dev сервер
npm run dev
# Зібрати для production
npm run build
# Згенерувати статичний сайт
npm run generate- Відкрийте додаток у браузері
- Налаштуйте якість WebP та рівень оптимізації
- Перетягніть файли в зону завантаження або натисніть для вибору
- Дочекайтесь завершення обробки
- Завантажте результати окремо або всі разом у ZIP архіві
Проєкт налаштований для автоматичного деплою на GitLab Pages. Після push в гілку main або master, GitLab CI автоматично:
- Встановить залежності
- Згенерує статичний сайт
- Опублікує його на GitLab Pages
Для налаштування:
- Перейдіть в Settings → Pages вашого GitLab репозиторію
- Переконайтесь, що pipeline успішно виконався
- Ваш сайт буде доступний за адресою:
https://<username>.gitlab.io/<project-name>
ImgConvertor/
├── pages/
│ └── index.vue # Головна сторінка
├── components/
│ ├── ImageUploader.vue # Компонент завантаження
│ ├── SettingsPanel.vue # Панель налаштувань
│ ├── ResultsList.vue # Список результатів
│ └── ProgressBar.vue # Прогрес-бар
├── composables/
│ ├── useImageProcessor.ts # Логіка обробки зображень
│ └── useFileHandler.ts # Обробка файлів
├── assets/
│ └── styles/ # SCSS стилі
└── nuxt.config.ts # Конфігурація Nuxt
MIT