«Конвертер изображений в WebP»

Общее описание:
Проект представляет собой вебприложение для массовой конвертации изображений из форматов JPG, PNG и GIF в современный формат WebP. Цель — оптимизировать размер файлов при сохранении качества, что особенно актуально для вебсайтов (ускорение загрузки страниц, экономия трафика).
Состав проекта.
Проект включает 5 ключевых файлов:
index.php — главная страница с пользовательским интерфейсом (форма настроек, кнопки, зоны вывода статуса).
convert.php — серверная логика конвертации (обработка файлов, вызов библиотек, отправка событий).
i18n.js — механизм многоязычности (поддержка русского и английского языков).
script.js — клиентская логика (отправка формы, потоковое получение статусов, обновление интерфейса).
style.css — стилизация интерфейса (адаптивный дизайн, прогрессбар, кнопки).
Ключевые функции.
Выбор директории:
Пользователь указывает путь к папке с изображениями (по умолчанию — текущая директория скрипта).
Настройка качества:
Для JPG: 1–100% (по умолчанию 80%).
Для PNG: 1–100% (по умолчанию 90%).
Управление исходниками:
Опция удаления оригинальных файлов после конвертации.
Загрузка файлов:
Возможность загрузить файлы через интерфейс (с проверкой типа и размера).
Максимальный размер файла: 20 МБ.
Массовая обработка:
Автоматическое нахождение всех JPG/PNG/GIF в указанной папке.
Пропуск уже конвертированных файлов (если WebP новее оригинала).
Поддержка GIF:
Использование Imagick (если доступно) или утилиты gif2webp для конвертации анимированных GIF.
Потоковая передача статусов:
Progress-бар в реальном времени.
Логирование действий (конвертировано, пропущено, ошибка, удалено).
Многоязычность:
Переключение между русским и английским интерфейсами.
Сохранение выбора языка в localStorage.
Обработка ошибок:
Проверка прав доступа к директории.
Валидация типов файлов.
Отчёт об ошибках конвертации.
Технологический стек.
Серверная часть: PHP 7+/8+ (работа с файловой системой, ImageMagick, imagewebp).
Клиентская часть: HTML5, CSS3, JavaScript (Fetch API, Streams API для SSE).
Форматы: WebP (целевой), JPG, PNG, GIF (исходные).
Дополнительно: SSE (Server-Sent Events) для потоковой передачи статусов.
Особенности реализации.
Безопасность:
Предупреждения о рисках в комментариях.
Проверка прав записи в директорию.
Ограничение размера загружаемых файлов.
Производительность:
Постепенная обработка файлов с обновлением прогресса.
Оптимизация для больших объёмов (проверка дат модификации).
UX/UI
Адаптивный дизайн (поддержка мобильных устройств).
Интуитивная форма.
Визуальный прогресс-бар.
Детализированный лог операций.
Лицензирование.
Проприетарное ПО (запрет копирования/модификации без согласия правообладателя).
Чёткие условия использования и отказ от ответственности.
Сценарий работы:
Пользователь открывает index.php, настраивает параметры.
Нажимает «Запустить конвертацию» — файлы отправляются на сервер.
Сервер обрабатывает файлы поочерёдно, отправляя события (SSE).
Клиент обновляет интерфейс: прогресс-бар, лог, финальный статус.
По завершении — сообщение об успехе/ошибке, список действий.
Требования к окружению:
PHP с включёнными расширениями: gd (для JPG/PNG), imagick (опционально для GIF).
Утилита gif2webp (если Imagick не доступен).
Права записи в указанную директорию.
Поддержка SSE в браузере (современные версии Chrome, Firefox, Safari).
Целевая аудитория:
Вебразработчики и администраторы, оптимизирующие ресурсы.
Дизайнеры, работающие с большими объёмами изображений.
Хостингпровайдеры, предлагающие инструменты оптимизации.
Особенности конвертации файлов на сервере (без загрузки извне).
В рассматриваемом проекте конвертация может выполняться без явной загрузки файлов через интерфейс — достаточно указать путь к директории с изображениями. Ниже — ключевые аспекты этого сценария.
1. Источник данных
Директория на сервере ($sourceDir).
Пользователь задаёт путь к папке (по умолчанию — текущая директория скрипта).
Пример: /var/www/html/images/.
Автоматическое обнаружение.
Скрипт рекурсивно находит все файлы с расширениями:
.jpg, .jpeg (JPG);
.png (PNG);
.gif (GIF).
Используется функция glob() с маской $sourceDir/*.{jpg,jpeg,png,gif}.
2. Механизм обработки
Проверка актуальности.
Для каждого файла:
Сравнивается дата модификации исходного файла и его WebP версии (если она уже есть).
Если WebP новее — файл пропускается (logEvent(‘skipped’)).
Конвертация по типам.
В зависимости от MIME типа изображения вызывается соответствующий метод:
JPG: imagecreatefromjpeg() → imagewebp().
PNG: imagecreatefrompng() → оптимизация прозрачности → imagewebp().
GIF:
Через Imagick (если доступно);
Или через утилиту gif2webp (команда в exec()).
Удаление оригиналов (если включена опция):
После успешной конвертации исходный файл удаляется через unlink().
3. Контроль процесса
Потоковая передача статусов (SSE).
Сервер отправляет события в реальном времени:
progress — процент выполнения (на основе количества обработанных файлов).
log — детали операций (конвертировано, пропущено, ошибка).
status — финальный результат (успех/ошибка).
Логирование.
Каждое действие фиксируется:
Успешная конвертация (logConverted);
Пропуск из-за наличия WebP (logSkipped);
Ошибки (например, недоступность Imagick для GIF).
4. Безопасность и валидация
Права доступа.
Перед обработкой проверяется:
Существует ли директория (is_dir());
Доступна ли для записи (is_writable()).
Фильтрация типов.
Используются getimagesize() и проверка MIME типа (image/jpeg, image/png, image/gif).
Неподдерживаемые форматы отмечаются как unsupported.
Ограничение рекурсии.
Обработка только файлов в указанной директории (без глубокого сканирования подпапок, если не задано иное).
5. Оптимизация производительности
Последовательная обработка.
Файлы конвертируются один за другим, чтобы не перегружать сервер.
Кеширование WebP.
Повторная конвертация одного и того же файла не выполняется, если WebP уже актуален.
Использование системных утилит.
Для GIF применяется gif2webp, что эффективнее PHP библиотек при больших объёмах.
6. Примеры сценариев
Обновление существующей галереи.
Администратор указывает путь к папке с JPG/PNG, запускает конвертацию — все файлы заменяются на WebP с сохранением структуры.
Очистка дискового пространства.
После конвертации оригиналы удаляются (если выбрана опция), освобождая место.
Миграция на WebP.
Массовая обработка архивов изображений без необходимости вручную загружать каждый файл.
7. Ограничения
Зависимость от серверных библиотек.
Требуется gd (для JPG/PNG) и imagick или gif2webp (для GIF).
Отсутствие поддержки анимации в PNG.
WebP поддерживает анимацию только для GIF.
Риск потери данных.
При удалении оригиналов важно иметь резервные копии (предупреждение в документации).
8. Рекомендации
Тестирование на копии данных.
Перед запуском на продакшене проверить работу на дубликате директории.
Контроль прав доступа.
Убедиться, что у PHP процесса есть права на чтение/запись в целевой папке.
Мониторинг ресурсов.
При обработке тысяч файлов следить за нагрузкой на CPU/память.
Резервное копирование.
Всегда сохранять оригиналы до подтверждения корректности конвертации.

Установка и использование конвертера.
Распакуйте скачанный архив.
Загрузите папку converter в корень своего сайта.
Откройте в браузере https://ваш_сайт/converter/index.php
Откроется интерфейс конвертера:

В поле «Папка с изображениями» будет прописан полный путь к конвертеру (опр.автоматически).
В папку converter добавьте новую папку, например img.
Эта папка будет служить как тестовая.
Измените путь в поле «Папка с изображениями» добавив после /converter/ имя папки img.
Загрузите несколько изображений с ПК нажав «кнопку» «Выбрать файлы».
Нажмите «кнопку» «Запустить конвертацию».

Проверьте папку …/converter/img
В ней появились файлы такие же как исходные, но конвертированные в WebP.
Повторите операцию, но уже с отмеченным чек-боксом «Удалить исходные файлы после конвертации».

В папке img останутся только WebP файлы.

Обновите страницу в браузере нажав F5 или Ctrl+F5.

Для того чтобы конвертировать файлы, непосредственно расположенные в папках сайта в поле «Папка с изображениями» пропишите пути к этим папкам. Предположим, что папка сайта с файлами изображений находится так же в корне сайта и называется img. Тогда правильный путь к ней будет иметь вид: /home/s834069/domains/ваш_сайт/public_html/img
Обратите внимание ещё раз как прописан путь. Будьте очень внимательны, чтобы потом не было мучительно больно, делайте бэкапы папок с файлами.
Постольку поскольку скрипт имеет небезопасную форму (<input type=»file»>), а именно поле «Папка с изображениями» не оставляйте его в паблике, после конвертации удалите скрипт. Конечно, можно сделать форму безопасной, но тогда не будет гибкости в использовании, скрипт будет жёстко привязан к какой-либо директории.

Тестирование обработки изображений

Результаты:

• GIF-файлы обрабатываются медленнее.
• JPG и PNG конвертируются быстрее.
• При обработке 1000 JPG-изображений (около 10 минут) приходилось перезапускать конвертацию, так как сервер разрывал соединение примерно после 10% прогресса.

Условия тестирования:
Тестирование проводилось на стандартном хостинге без возможности изменения настроек.

Вывод:
Разбивайте изображения на папки по 50-100 в каждой. После конвертации объедините их в нужную папку.

Почему GIF-файлы обрабатываются дольше?
GIF-анимация требует сложных расчетов: обработка кадров, палитры и прозрачности. Простой 10-кадровый GIF может занять в 5–10 раз больше времени, чем статичный JPG того же размера.

Что происходит после 5–10% прогресса?
Соединение разрывается по нескольким причинам:

• Лимит времени выполнения PHP-скриптов (обычно 30–180 секунд на хостингах).
• Ограничение памяти.
• Таймаут веб-сервера (Apache/Nginx) при долгой передаче данных.
• Защита от перегрузки хостинга.

Практические советы:

Если возможно, увеличьте лимиты:

Для Apache:

apache
php_value max_execution_time 300
php_value memory_limit 512M

Для php.ini (если доступен):

ini
max_execution_time = 300
memory_limit = 512M

Скрипт может работать внутри CMS, но с существенными оговорками и требованиями к настройке. Разберём ключевые аспекты.

Условия для корректной работы

1. Права доступа к файлам
   • Скрипт требует прав на чтение/запись в директории с изображениями. В CMS часто используются защищённые пути (например, /wp-content/uploads/ в WordPress), где могут действовать ограничения.
   • Необходимо проверить, что сервер разрешает unlink() и запись в целевые папки.
2. Конфликт путей
   • В CMS структура папок строго регламентирована. Параметр sourceDir должен точно указывать на нужную директорию (например, ../wp-content/uploads/).
   • Ошибки в пути приведут к тому, что скрипт не найдёт файлы или попытается конвертировать не то, что нужно.
3. Зависимости PHP
   • Для конвертации GIF требуется либо:
     • Библиотека Imagick (предпочтительнее),
     • Утилита gif2webp в командной строке (нужно проверить доступность на сервере).
   • Убедитесь, что в CMS не отключены функции exec() или shell_exec() (часто блокируются для безопасности).
4. Ограничения CMS
   • Некоторые CMS (например, WordPress) используют собственные механизмы работы с медиафайлами. После конвертации:
     • Ссылки на исходные файлы в базе данных останутся старыми.
     • Может потребоваться обновление метаданных изображений в CMS.
   • Если CMS кэширует изображения, конвертированные файлы могут не отобразиться без очистки кэша.
5. Безопасность
   • Загрузка файлов через форму (<input type=»file»>) в CMS может конфликтовать с механизмами защиты от загрузки вредоносных файлов.
   • Рекомендуется запускать скрипт только на тестовом сервере или в изолированной директории.
6. Производительность
   • Массовая конвертация больших объёмов изображений может перегрузить сервер. В CMS это особенно критично, так как:
     • Могут быть ограничения на время выполнения PHP-скриптов (max_execution_time).
     • Высокая нагрузка повлияет на работу других компонентов CMS.
7. Интеграция с интерфейсом CMS
   • Текущий интерфейс (HTML/JS) не вписывается в дизайн CMS. Для бесшовной интеграции потребуется:
     • Адаптация стилей под админ-панель CMS.
     • Встраивание скрипта в административное меню CMS (например, как плагин для WordPress).
8. Резервное копирование
   • Перед запуском обязательно сделайте бэкап:
     • Исходных изображений.
     • Базы данных CMS (на случай повреждения метаданных).
9. Тестирование
   • Запустите скрипт на копии сайта в тестовой среде.
   • Проверьте:
     • Корректность конвертации всех форматов (JPG, PNG, GIF).
     • Сохранение пропорций и качества изображений.
     • Работу опции удаления исходных файлов.
10. Альтернативные решения
    • Работаем над плагином для WordPress

Лицензия

Проприетарное ПО Web-Software.ru.
Запрещено:

• Коммерческое использование.
• Распространение.
• Модификация без письменного согласия.