Перевести систему на формат WebP, внедрить поддержку всех современных форматов (HEIC, AVIF и др.), у

Замовник: AI | Опубліковано: 26.04.2026
Бюджет: 150 $

Перевести систему на формат WebP, внедрить поддержку всех современных форматов (HEIC, AVIF и др.), увеличить четкость изображений, увеличить область просмотра на 30% и обеспечить корректное отображение разноформатных фото без обрезки.ПараметрЗначениеМакс. вес файла15 МБМин. разрешение600 px (по любой стороне)Макс. разрешение8000 px (защита сервера)PHP Memory Limit1024 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) Все превью должны генерироваться напрямую из загруженного исходника в памяти, а не последовательно друг из друга. Параметры ресайза для всех размеров: Filter: Lanczos (обязательно для сохранения деталей). Sharpening (Unsharp Mask): 0x0.7 + 0.7 + 0.008 (радиус 0, сигма 0.7, количество 0.7, порог 0.008). Цветовой профиль: Принудительная конвертация в sRGB. Контраст: -sigmoidal-contrast 3,50% (для визуальной сочности). Метаданные: Полное удаление (Strip EXIF/ICC,ICO). Colorspace: sRGB. Filter: Lanczos. Четкость (Unsharp Mask): 0x0.5 + 0.5 + 0.008. Сочность: -sigmoidal-contrast 3,50%. Очистка: Удаление всех метаданных (Strip). Сетка размеров и форматы Перенастроить генерацию превью Tamaranga под следующие стандарты: ПрефиксРазмер (px)ФорматQualityНазначениеs200x200 (crop)WebP75%Иконкиm640x640(fit)WebP80%Списки / Поискview1280(width)WebP80%Карточка объявленияzoom1920 (width)WebP82%Увеличение (Premium)original1920 (width)JPEG90%Архивный оригинал Примечание: Соотношение сторон должно сохраняться согласно оригиналу (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./original1920 (width)JPEG90%Архивный оригинал Система хранения и безопасность Скрытый архив: После обработки исходник 15-25МБ удаляется. Вместо него в «скрытую» папку (например, /uploads/_hidden_storage/) сохраняется созданный original (JPEG, 1920px, 90%). Защита: В папку с оригиналами положить .htaccess с Deny from all. В конфиге Nginx прописать internal для этой папки. Добавить папку в Disallow файла robots.txt. 5. Frontend (Отображение) В шаблонах вывода изображений (.tpl) реализовать поддержку тега для корректной работы WebP с фолбеком на JPEG (оригинал) для старых браузеров: html Используйте код с осторожностью. . 4. Frontend: Визуальная сетка и пропорции (CSS) Задача: сделать карточки на 30% крупнее, сохранив индивидуальные пропорции фото. Увеличение: Увеличить размер плитки объявления на ПК на 30%. Фиксированная рамка: Создать контейнер для фото с жестко заданной высотой (например, 300px) и фоном #ffffff. Логика пропорций: Использовать object-fit: contain;. Вертикальные, горизонтальные и квадратные фото должны быть полностью видны без обрезки. Все фото должны быть отцентрованы внутри рамки. Логика пропорций: Использоватьobject-fit: contain;. Вертикальные, горизонтальные и квадратные фото должны быть полностью видны без обрезки. Все фото должны быть отцентрованы внутри рамки. Выравнивание: Цены и названия под фото должны быть выстроены строго в одну линию во всем ряду, независимо от формы изображения выше. Логика вывода в списках (Frontend) Необходимо внедрить адаптивную верстку через тег во всех шаблонах (.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. Карточка товара Использовать object-fit: contain; для основного фото. Обеспечить корректную работу галереи с WebP форматом Раздел: Логика отображения (Плавающие пропорции) Отказ от жесткого квадрата: Запрещено обрезать изображения через object-fit: cover. Все фото в списке должны быть видны полностью (object-fit: contain или обычный display: block). Группировка по типу: Все горизонтальные фото должны иметь