Конвейер обработки изображений: resize, crop, watermark, конвертация

Построение production-ready конвейера обработки изображений

Изображения — самая тяжёлая часть любого сайта. Одна необработанная фотография с камеры может весить 10+ МБ и загружаться секунды. При этом пользователи покидают страницу, если LCP превышает 2.5 секунды. Мы регулярно сталкиваемся с проектами, где картинки не оптимизированы: нет ресайза под разные экраны, нет WebP, водяной знак ставится вручную. Всё это — потеря конверсии и лишние расходы на трафик.

Типичный сценарий: интернет-магазин с тысячами товаров. Фотографии загружаются через админку, но приходится делать превью вручную или через костыли. Мы предлагаем готовую инфраструктуру: при загрузке файл проходит через pipeline, и на выходе — сразу несколько вариантов: thumbnail (150x150), medium (800x600), large (1920x1080), все в WebP и JPEG. Плюс оригинал сохраняется отдельно.

Водяной знак накладывается автоматически, если изображение публичное. Мы используем полупрозрачный логотип в правом нижнем углу — это не мешает просмотру, но защищает контент. Все операции занимают не более 200 мс на одно изображение.

Наш pipeline решает эти проблемы автоматически. Вы загружаете оригинал — система сама генерирует набор превью, конвертирует в современные форматы и накладывает watermark. При этом не нужно переписывать существующую логику: интеграция занимает от 2 до 3 дней.

Какие проблемы решает конвейер?

Медленная загрузка из-за больших оригиналов — первая проблема. Одно фото с камеры может весить 20 МБ. На мобильном интернете это убивает UX. Ресайз до нужных размеров и конвертация в WebP уменьшают объём в 3-5 раз без потери качества.

Отсутствие адаптивных изображений — вторая проблема. Если на десктопе показывать картинку 1920x1080, на телефоне она будет такой же по размеру, но сжатой браузером. Это увеличивает LCP. Наш pipeline генерирует несколько версий под разные разрешения, а мы подключаем srcset — браузер сам выбирает подходящий вариант.

Невозможность автоматически конвертировать форматы — третья. Ручная конвертация в WebP или AVIF — долгий процесс, который часто забывают. Pipeline делает это на лету, сохраняя и оригинал, и производные. Экономия трафика достигает 40%.

Как мы строим pipeline: стек и архитектура

Для синхронной обработки используем Node.js с Sharp. Sharp работает в 3 раза быстрее аналогов на Python. Для асинхронной — Celery + Pillow. Если нагрузка большая, отправляем задачи в очередь Redis — сервер не блокируется. Альтернатива — imgproxy, который трансформирует изображения on-the-fly по URL.

Сравнение подходов:

Какой выбрать? Если у вас до 1000 загрузок в день — хватит синхронного. Для крупных проектов с миллионами изображений — асинхронный с очередью.

Сравнение форматов:

Переход на WebP снижает LCP на 30% и экономит до 40% трафика.

Что входит в работу?

В услугу входит:

• Проектирование архитектуры pipeline (выбор подхода, стек).
• Разработка и интеграция с вашим проектом (API, middleware).
• Настройка CDN и кэширования (Cloudflare, Vercel).
• Документация по использованию и доработке.
• Обучение команды (1 час онлайн).
• Гарантия стабильной работы — 30 дней поддержки.

Опыт нашей команды — 7+ лет в веб-разработке, более 50 реализованных проектов с обработкой изображений.

Процесс работы

1. Аналитика — аудит текущей инфраструктуры, типичные размеры, форматы, нагрузка.
2. Проектирование — выбор подхода (синхронный/асинхронный), определение набора превью.
3. Реализация — написание кода pipeline, интеграция с хранилищем и CDN.
4. Тестирование — нагрузочное тестирование, проверка совместимости с браузерами.
5. Деплой — развёртывание на production, мониторинг.

Сроки и стоимость

Базовая реализация с Sharp или imgproxy занимает от 2 до 5 дней. Стоимость рассчитывается индивидуально после аудита — зависит от сложности, объёмов и необходимости асинхронной обработки. Оценим проект бесплатно в течение дня.

Типичные ошибки при реализации

• Игнорирование EXIF-ориентации — фото с телефона могут быть повёрнуты. В Sharp мы автоматически читаем метаданные и корректируем.
• Потеря прозрачности — при конвертации PNG в JPEG фон становится белым. Наш pipeline сохраняет альфа-канал или заменяет на белый фон.
• Слишком большие превью — генерация 10+ вариантов замедляет обработку. Оптимально 3-4 размера.
• Отсутствие кэширования — каждый запрос к imgproxy тратит ресурсы. Настраиваем Cache-Control на год.

# tasks.py (Celery) from celery import Celery from PIL import Image import io, boto3 app = Celery('image_tasks', broker='redis://redis:6379') @app.task(bind=True, max_retries=3) def process_image(self, image_id: int): try: record = db.get_image(image_id) raw = s3.get_object(Bucket='uploads', Key=record.original_key)['Body'].read() img = Image.open(io.BytesIO(raw)) img = ImageOps.exif_transpose(img) if img.mode == 'RGBA': background = Image.new('RGB', img.size, (255, 255, 255)) background.paste(img, mask=img.split()[3]) img = background variants = {} for name, (w, h) in SIZES.items(): resized = img.copy() resized.thumbnail((w, h), Image.LANCZOS) buf = io.BytesIO() resized.save(buf, 'WEBP', quality=85, method=6) buf.seek(0) key = f"processed/{image_id}/{name}.webp" s3.put_object(Bucket='media', Key=key, Body=buf, ContentType='image/webp', CacheControl='public, max-age=31536000') variants[name] = key db.update_image_variants(image_id, variants) except Exception as exc: raise self.retry(exc=exc, countdown=60)