Цветовые фильтры для изображений: сепия, чёрно-белый, размытие

Введение

Цветовые фильтры — один из самых заметных инструментов в арсенале веб-разработчика и дизайнера. Сепия придаёт фотографиям винтажный ретро-вид, обесцвечивание превращает цветное фото в чёрно-белое, размытие помогает акцентировать внимание на главном объекте. Эти эффекты повсеместно встречаются в соцсетях, фоторедакторах, на лендингах. И что важно — их можно реализовать как через CSS (быстро и без потерь), так и через canvas (с сохранением результата в файл).

Современный веб предлагает несколько способов применения фильтров. CSS-фильтры через свойство filter работают мгновенно, не требуют JavaScript, но применяются только для отображения — исходное изображение не меняется. Canvas-обработка позволяет модифицировать пиксели и сохранять результат, но сложнее в реализации и медленнее. Понимание обоих подходов даёт гибкость: использовать CSS для интерактивных эффектов на сайте и canvas для генерации финальных изображений.

В этой статье мы разберём основные цветовые фильтры — сепию, чёрно-белый, размытие — и научимся применять их через CSS и canvas. Также рассмотрим дополнительные эффекты: контраст, яркость, насыщенность, инверсию. После прочтения вы сможете профессионально работать с фильтрами в вебе.

Основы CSS-фильтров

CSS-свойство filter позволяет применять графические эффекты к элементам DOM, включая изображения. Синтаксис прост:

.vintage {
  filter: sepia(0.7) contrast(1.1);
}

Можно комбинировать несколько фильтров в одном свойстве, разделяя их пробелами. Они применяются в порядке записи. Доступные функции:

• blur(px) — размытие по Гауссу.
• brightness(%) — яркость (100% — нормально, <100% темнее, >100% ярче).
• contrast(%) — контраст.
• grayscale(%) — обесцвечивание.
• hue-rotate(deg) — поворот цветового тона.
• invert(%) — инверсия цветов.
• opacity(%) — прозрачность.
• saturate(%) — насыщенность.
• sepia(%) — сепия.
• drop-shadow(...) — тень с учётом альфа-канала.
• url(#svg-filter) — ссылка на SVG-фильтр для сложных эффектов.

CSS-фильтры поддерживаются во всех современных браузерах, аппаратно ускоряются и работают очень быстро. Это делает их идеальным выбором для интерактивных эффектов на сайте.

Сепия: винтажный эффект

Что такое сепия

Сепия — это коричнево-красный оттенок, который имитирует старые фотографии конца XIX — начала XX века. Тогда фотографы использовали эмульсию с экстрактом сепии (чернила каракатицы), которая придавала снимкам тёплый коричневый тон и улучшала сохранность. Сегодня сепия — популярный художественный эффект, который ассоциируется с ностальгией и ретро.

Применение сепии через CSS

.sepia {
  filter: sepia(0.8);
}
.sepia-strong {
  filter: sepia(1) contrast(1.2) brightness(0.95);
}

Значение sepia(1) даёт максимальный эффект, sepia(0.5) — лёгкий тёплый оттенок, sepia(0) — отсутствие эффекта. Часто сепию комбинируют с лёгким увеличением контраста и уменьшением яркости для более реалистичного винтажного вида.

Сепия через canvas

Для сохранения результата в файл сепию нужно применять через canvas. Алгоритм: для каждого пикселя вычисляется яркость, затем она преобразуется в коричневые тона по формуле:

function applySepia(imageData) {
  const d = imageData.data;
  for (let i = 0; i < d.length; i += 4) {
    const r = d[i], g = d[i+1], b = d[i+2];
    d[i]   = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
    d[i+1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
    d[i+2] = Math.min(255, r * 0.272 + g * 0.534 + b * 0.131);
  }
  return imageData;
}

Чёрно-белый (grayscale)

Зачем обесцвечивать

Чёрно-белое фото — это классика, которая не выходит из моды. Обесцвечивание убирает цветовой шум и акцентирует внимание на форме, свете, текстуре, композиции. Часто чёрно-белый режим используется для портретов, уличной фотографии, архитектуры.

Применение через CSS

.bw {
  filter: grayscale(1);
}
.bw-partial {
  filter: grayscale(0.7);
}

Полное обесцвечивание — grayscale(1), частичное (с сохранением лёгкого цвета) — grayscale(0.5). Частичное обесцвечивание даёт интересный эффект «приглушённого» цвета.

Чёрно-белый через canvas

Для перевода в чёрно-белый есть несколько алгоритмов, дающих немного разные результаты:

• Среднее значение: gray = (r + g + b) / 3 — простой, но даёт плоский результат.
• Светимость (luminosity): gray = 0.299*r + 0.587*g + 0.114*b — учитывает человеческое восприятие, даёт естественный результат.
• Lightness: gray = (max(r,g,b) + min(r,g,b)) / 2 — промежуточный вариант.
• Деконструкция (desaturation): gray = (max(r,g,b) + min(r,g,b)) / 2 — аналогично lightness.

Светимость (luminosity) — самый популярный метод, потому что он лучше соответствует восприятию человеческим глазом.

Размытие (blur)

Виды размытия

Размытие используется для создания глубины, фокусировки на главном объекте, смягчения фона. Основные виды:

• Gaussian blur — равномерное размытие по Гауссу. Самый распространённый.
• Motion blur — размытие в движении, имитирует съёмку движущегося объекта.
• Radial blur — радиальное размытие от центра, эффект «вихря».
• Lens blur — имитация оптического размытия объектива с бокэ.
• Surface blur — сохраняет края, размывает текстуры. Используется для ретуши кожи.

Применение через CSS

.blur-light {
  filter: blur(2px);
}
.blur-heavy {
  filter: blur(10px);
}
.blur-hover img {
  transition: filter 0.3s;
}
.blur-hover:hover img {
  filter: blur(3px);
}

CSS blur() использует гауссово размытие. Значение указывается в пикселях — это радиус размытия. На современных браузерах размытие аппаратно ускоряется и работает быстро даже для больших изображений.

Размытие через canvas

Алгоритм гауссова размытия через canvas требует свёртки с матрицей Гаусса. Простой, но медленный вариант — box blur (усреднение в квадрате). Для производительного размытия используют StackBlur или расширение canvasctx.filter = 'blur(5px)', которое применяет CSS-фильтры к контексту рисования.

Дополнительные фильтры

Контраст

Контраст управляет разницей между светлыми и тёмными участками. Увеличение контраста делает изображение «живее», уменьшение — приглушённее.

.contrast-up { filter: contrast(1.3); }
.contrast-down { filter: contrast(0.7); }

Яркость

Яркость равномерно осветляет или затемняет изображение. Полезна для компенсации тёмных или пересвеченных фото.

.brighter { filter: brightness(1.2); }
.darker { filter: brightness(0.8); }

Насыщенность

Насыщенность управляет интенсивностью цветов. Увеличение делает цвета сочнее, уменьшение — приглушённее (вплоть до чёрно-белого при 0).

.vivid { filter: saturate(1.5); }
.muted { filter: saturate(0.5); }

Инверсия

Инверсия меняет каждый цвет на противоположный. Полезна для создания негативных эффектов, тёмных тем.

.invert { filter: invert(1); }

Hue-rotate (поворот тона)

Поворачивает все цвета на указанный угол. Полезна для создания цветовых вариаций из одного изображения.

.hue-shift { filter: hue-rotate(90deg); }

Комбинирование фильтров

Сила CSS-фильтров — в возможности комбинировать их для сложных эффектов. Несколько примеров популярных комбинаций:

• Винтаж: filter: sepia(0.5) contrast(1.1) brightness(0.95) saturate(1.2);
• Холодный: filter: hue-rotate(180deg) saturate(1.3) brightness(1.1);
• Тёплый: filter: sepia(0.3) saturate(1.4) brightness(1.05);
• Чёрно-белый кино: filter: grayscale(1) contrast(1.2) brightness(0.95);
• Lo-fi: filter: sepia(0.4) saturate(1.5) contrast(1.2);
• Готик: filter: grayscale(0.8) contrast(1.3) brightness(0.85);
• Сонный: filter: blur(1px) brightness(1.1) saturate(0.8);

Сравнение CSS-фильтров и canvas-обработки

Инструменты для применения фильтров

Браузерные инструменты

Для разового применения фильтра к изображению используйте специализированные инструменты: чёрно-белый фильтр, сепия фильтр, размытие изображения. Они работают в браузере, не отправляют файлы на сервер, и позволяют скачать готовый результат. Достаточно загрузить изображение, выбрать силу эффекта, скачать — и можно публиковать.

Графические редакторы

Photoshop, GIMP, Affinity Photo предоставляют огромный выбор фильтров с тонкой настройкой. Подходят для профессиональной обработки, но избыточны для простых задач.

Программная обработка

Для массовой обработки изображений на сервере используются библиотеки: Sharp (Node.js), Pillow (Python), ImageMagick (CLI). Они поддерживают все основные фильтры и могут обрабатывать тысячи изображений в минуту.

Производительность фильтров

CSS-фильтры аппаратно ускоряются и работают очень быстро, но при применении нескольких тяжёлых фильтров к большому изображению может возникать задержка. Особенно нагружает GPU фильтр blur() с большим радиусом.

Для оптимизации:

• Не применяйте больше 3–4 фильтров одновременно.
• Избегайте больших значений blur (более 20px) на мобильных.
• Используйте will-change: filter для анимируемых элементов.
• Для статичных эффектов лучше обработать изображение заранее и сохранить результат.

Доступность и фильтры

Цветовые фильтры могут влиять на доступность. Чёрно-белый режим снижает контраст для пользователей с дальтонизмом. Сильное размытие мешает людям с нарушениями зрения. Сепия и hue-rotate искажают цветовое восприятие.

Рекомендации по доступности:

• Проверяйте контраст после применения фильтров — WCAG требует минимум 4.5:1 для текста.
• Не используйте цвет как единственный индикатор — добавляйте текстовые подписи.
• Предоставляйте возможность отключить фильтры через настройки.
• Учитывайте пользователей с дальтонизмом: protanopia, deuteranopia, tritanopia.

Фильтры и SEO

CSS-фильтры не влияют на индексацию изображений, потому что поисковики видят исходный файл. Canvas-обработка с заменой src может изменить то, что увидит бот. Если фильтр критичен для смысла изображения (например, чёрно-белый режим для исторической фотографии), стоит сохранить обработанную версию как отдельный файл с правильным alt-текстом.

Заключение

Цветовые фильтры — мощный инструмент для выразительности изображений. Сепия, чёрно-белый, размытие и другие эффекты можно применять быстро через CSS или основательно через canvas. CSS-фильтры идеальны для интерактивных эффектов на сайте, canvas-обработка — для генерации финальных изображений.

При работе с фильтрами помните о балансе: эффект должен служить содержанию, а не заменять его. Винтажный сепия-фильтр уместен для ретро-фото, но не для корпоративного сайта. Чёрно-белый режим хорош для портретов, но не для каталога товаров, где важен цвет.

Для разовых задач используйте браузерные инструменты: чёрно-белый фильтр, сепия фильтр, размытие изображения. Они экономят время и не требуют установки. Экспериментируйте с комбинациями, тестируйте на реальных пользователях — и ваши изображения всегда будут выразительными и уместными.