Перевести систему на формат WebP, внедрить поддержку всех современных форматов (HEIC, AVIF и др.), увеличить четкость изображений, увеличить область просмотра на 30% и обеспечить корректное отображение разноформатных фото без обрезки.
| Параметр | Значение |
|---|
| Макс. вес файла | 15 МБ |
| Мин. разрешение | 600 px (по любой стороне) |
| Макс. разрешение | 8000 px (защита сервера) |
| PHP Memory Limit | 1024 MB |
| Хранение оригинала | 1920 px (JPEG 90%, скрытая папка |
Логика обработки изображений (через папку custom/):
- Поддержка форматов: Реализовать прием и чтение файлов
JPG, PNG, GIF, WEBP, HEIC, AVIF.
. Прием и чтение файлов (Input) JPG, PNG, GIF, WEBP, HEIC, AVIF,BMP
- Максимальный размер «Оригинала» после загрузки — 1900px по длинной стороне (высота — пропорционально).
- Этот сжатый файл сохраняется как основной источник.
- «Важное условие ресайза: Реализовать логику downscale only. Уменьшать только те изображения, размер которых превышает 1200px по длинной стороне. Изображения меньшего размера сохранять без изменения разрешения (не растягивать), выполняя только конвертацию в формат WebP».
Система должна корректно принимать, считывать и обрабатывать для последующей генерации превью следующие форматы:
Добавил пункт про EXIF-поворот (чтобы фото с телефонов не ложились на бок) и деликатную очистку от визуального шума.
Важное уточнение: «удаление ненужных деталей» на автомате (через нейросети) для 5700+ фото — задача сложная и может «покривить» сам товар. Поэтому в ТЗ мы пропишем авто-очистку через ImageMagick (удаление лишних полей, цветокоррекцию и повышение резкости)
КАТЕГОРИЧЕСКИЕ ИСКЛЮЧЕНИЯ (НЕ КОНВЕРТИРОВАТЬ)
Оставлять в оригинале (PNG/SVG/JPG), чтобы не испортить интерфейс:
Дизайн: Логотипы сайта, системные иконки, фавиконы./admin/
находится в админке " можем показать пути ,если нужно
Профили: Аватарки пользователей (/uploads/avatars/).
Реклама: Все баннеры
НЕ нужно конвертировать: Изображения, относящиеся к категориям (Недвижимость, Услуги, Транспорт и т.д.), которые отображаются на главной странице сайта,не трогать тему Nelson /themes/
Интеграция с CMS Tamaranga:
- База данных: Реализовать автоматическую подмену расширения файла на
.webp при записи путей в таблицы БД (например, в модуле объявлений bbs). - Чистота кода: Все правки PHP-логики должны быть выполнены путем переопределения классов в директории
custom/. Прямая правка ядра (app/biff/) запрещена. - Совместимость: Обеспечить корректное отображение старых изображений в формате
.jpg, которые уже есть на сервере.
- Стандартные: 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: Автоматический поворот на основе данных ориентации.
Логика обработки (Image Processing Pipeline)
Все превью должны генерироваться напрямую из загруженного исходника в памяти, а не последовательно друг из друга.
Параметры ресайза для всех размеров:
Примечание: Соотношение сторон должно сохраняться согласно оригиналу (aspect ratio), указанные H (высота) являются максимально допустимыми.
Примечание: Параметры Sharpen подобрать так, чтобы не появлялось «лесенок» и белых ореолов на границах
Минимизировать нагрузку на CPU при загрузке фото (использовать штатные средства PHP
Cделатйте уведомление для пользователя при подаче обьявлений :
. Если он грузит фото 400х400, сайт должен выдать: "limit 600x600 px -как делает Тамаранга
3.2. Алгоритмы четкости (ImageMagick)
Для исключения эффекта «мыла» при уменьшении фото использовать:
- Фильтр Lanczos: Ресэмплинг при
resize должен идти через высококачественный фильтр -filter Lanczos. - Unsharp Mask: После ресайза применять
-unsharp 0x0.7+0.7+0.008 для микроконтраста деталей. - Цветокоррекция: Принудительный
-colorspace sRGB и легкое повышение контраста -sigmoidal-contrast 3,50%.
- Контраст:
-sigmoidal-contrast 3,50% (для визуальной сочности). - Метаданные: Полное удаление (Strip EXIF/ICC).
- Качество WebP (Subsampling):
При конвертации в WebP использовать параметр -define webp:method=6 (самый медленный, но самый качественный метод сжатия) и отключить хроматическую субдискретизацию (-define webp:lossless=false), если это позволяет бюджет нагрузки на CPU - 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, данные камер) для облегчения файла.
Интеллектуальный фон (для рамки):
- Для контейнеров в списке объявлений настроить заливку пустот цветом
#ffffff (белый) или использовать эффект «размытого фона» из этого же фото (по согласованию), чтобы скрыть границы разных форматов
3.3. Очистка
-trim: Авто-удаление лишних пустых полей по краям фото (чтобы товар был крупнее).-strip: Полное удаление метаданных (GPS, данные камер) для облегчения файла.
3.4. Новая сетка размеров (по длинной стороне)
- szSmall: 200 px | szMedium (Список): 640 px | szView (Карточка): 10280px | szZoom: 1600 px./
| original | 1920 (width) | JPEG | 90% | Архивный оригинал |
Система хранения и безопасность
- Скрытый архив: После обработки исходник 15-25МБ удаляется. Вместо него в «скрытую» папку (например,
/uploads/_hidden_storage/) сохраняется созданный original (JPEG, 1920px, 90%). - Защита:
- В папку с оригиналами положить
.htaccess с Deny from all. - В конфиге Nginx прописать
internal для этой папки. - Добавить папку в
Disallow файла robots.txt.
5. Frontend (Отображение)
В шаблонах вывода изображений (.tpl) реализовать поддержку тега <picture> для корректной работы WebP с фолбеком на JPEG (оригинал) для старых браузеров:
html
<picture>
<source srcset="image.webp" type="image/webp">
<img src="original.jpg" alt="title">
</picture>
Используйте код с осторожностью.
.
4. Frontend: Визуальная сетка и пропорции (CSS)
Задача: сделать карточки на 30% крупнее, сохранив индивидуальные пропорции фото.
- Увеличение: Увеличить размер плитки объявления на ПК на 30%.
- Фиксированная рамка: Создать контейнер для фото с жестко заданной высотой (например, 300px) и фоном
#ffffff. - Логика пропорций:
- Использовать
object-fit: contain;. - Вертикальные, горизонтальные и квадратные фото должны быть полностью видны без обрезки.
- Все фото должны быть отцентрованы внутри рамки.
- Логика пропорций:
Использовать object-fit: contain;.
Вертикальные, горизонтальные и квадратные фото должны быть полностью видны без обрезки.
Все фото должны быть отцентрованы внутри рамки.
- Выравнивание: Цены и названия под фото должны быть выстроены строго в одну линию во всем ряду, независимо от формы изображения выше.
Логика вывода в списках (Frontend)
Необходимо внедрить адаптивную верстку через тег <picture> во всех шаблонах (.tpl):
Мобильная версия (Смартфоны):
- Контейнер: В списке объявлений на смартфоне использовать строго одинаковые (фиксированные) размеры контейнеров для фото.
- Масштабирование: Запретить автоматическое увеличение (upscale) изображений на 30% (как это реализовано на ПК). Фото должно вписываться в контейнер «как есть», сохраняя четкость пиксель-в-пиксель.
ПК версия:
- Оставить стандартную логику отображения с учетом высокого разрешения (использовать WebP из пресета zoom/1920px для премиум-блоков).
5. Конфигурация и открытость кода
- Доступ: Код плагина должен быть полностью открытым (без IonCube).
- Конфиг: Вынести в отдельный открытый файл (или массив в начале кода) все ключевые параметры:
- Ширину всех префиксов (1280, 1920 и т.д.).
- Качество WebP и JPEG.
- Все коэффициенты Unsharp Mask (
0.5, 0.5, 0.008) и Sigmoidal Contrast (3).
Список объявлений (Лента/Плитка)
- Увеличение: Увеличить контейнеры объявлений на 30% относительно текущих на ПК.
- Фиксированная рамка: Создать жесткий контейнер для фото с фиксированной высотой (например, 280-300px).
- Сохранение пропорций: Использовать
object-fit: contain;внутри рамки.- Результат: Вертикальные фото (платья) стоят в полный рост, горизонтальные (авто) видны во всю длину. Никакой обрезки краев.
- Центрирование: Фото должно быть отцентровано по вертикали и горизонтали внутри рамки.
- Выравнивание сетки: Цены, названия и кнопки под фото должны начинаться строго на одной горизонтальной линии, независимо от формы фото над ними.
3.2. Карточка товара