Модернизация системы обработки и отображения изображений (Tamaranga v2)
Стек: Rocky Linux 8, Nginx 1.28, PHP 8.x, ImageMagick (Imagick).
1. Цель работ
Перевести систему на формат WebP, внедрить поддержку всех современных форматов (HEIC, AVIF и др.), увеличить четкость изображений, увеличить область просмотра на 30% и обеспечить корректное отображение разноформатных фото без обрезки.
2. Прием и чтение файлов (Input)
Система должна корректно принимать, считывать и обрабатывать для последующей генерации превью следующие форматы:
- Стандартные: JPG, PNG, GIF, BMP.
- Современные: WEBP, HEIC (с iPhone), AVIF.
- Требование: Для HEIC и AVIF необходимо убедиться, что на сервере установлены соответствующие библиотеки (libheif, libavif) и ImageMagick их поддерживает.
3. Серверная обработка и Ultra-Sharp качество (Backend)
Необходимо модифицировать класс обработки изображений, внедрив цепочку фильтров для максимальной четкости:
3.1. Конвертация
- Original: Сохранять в JPEG (сжатие 90%, макс. ширина 1920px).
- Превью (Все размеры): Конвертировать в WebP (quality 82%,
method=6). - EXIF Fix: Автоматический поворот на основе данных ориентации.
3.2. Алгоритмы четкости (ImageMagick)
Для исключения эффекта «мыла» при уменьшении фото использовать:
- Фильтр Lanczos: Ресэмплинг при
resize должен идти через высококачественный фильтр -filter Lanczos. - Unsharp Mask: После ресайза применять
-unsharp 0x0.7+0.7+0.008 для микроконтраста деталей. - Цветокоррекция: Принудительный
-colorspace sRGB и легкое повышение контраста -sigmoidal-contrast 3,50%.
3.3. Очистка
-trim: Авто-удаление лишних пустых полей по краям фото (чтобы товар был крупнее).-strip: Полное удаление метаданных (GPS, данные камер) для облегчения файла.
3.4. Новая сетка размеров (по длинной стороне)
- szSmall: 200 px | szMedium (Список): 640 px | szView (Карточка): 1024 px | szZoom: 1600 px.
4. Frontend: Визуальная сетка и пропорции (CSS)
Задача: сделать карточки на 30% крупнее, сохранив индивидуальные пропорции фото.
- Увеличение: Увеличить размер плитки объявления на ПК на 30%.
- Фиксированная рамка: Создать контейнер для фото с жестко заданной высотой (например, 300px) и фоном
#ffffff. - Логика пропорций:
- Использовать
object-fit: contain;. - Вертикальные, горизонтальные и квадратные фото должны быть полностью видны без обрезки.
- Все фото должны быть отцентрованы внутри рамки.
- Выравнивание: Цены и названия под фото должны быть выстроены строго в одну линию во всем ряду, независимо от формы изображения выше.
5. Скрипт миграции (Backlog)
Разработать PHP CLI скрипт для фоновой переработки текущих 5700 объявлений:
- Чтение старых оригиналов -> Применение фильтров четкости -> Конвертация в WebP -> Удаление старых JPEG-превью.
6. Настройка Nginx
- Настройка MIME-типов для WebP, AVIF, HEIC.
- Кэширование статики
expires 30d. - Распределение нагрузки обработки на все 8 потоков CPU