Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

Зачем вообще image(), если есть url() и градиенты

Классический подход — просто background-image: url(...). Он работает, но не умеет:

• менять направленность стрелочек/иконок под dir="rtl" без дублирования ассетов;
• аккуратно вырезать кусок изображения декларативно в одном значении (без расчётов background-position);
• накладывать цветовую «маску» как именно изображение (поверх других слоёв), а не как фон всего блока.

image() решает эти боли в одном месте — в значении типа <image>.

Базовый синтаксис (как должно быть)

/* 1) Обычная картинка (строка или url()) */
background-image: image("cover.webp");
/* или */ 
background-image: image(url("cover.webp"));

/* 2) Bidi-чувствительное изображение: браузер отзеркалит его в RTL */
list-style-image: image(ltr "icons/arrow-right.svg");

/* 3) Цветовая плашка как изображение (поверх других слоёв, а не под ними) */
background-image: image(rgb(0 0 0 / .25));

/* 4) Вырезка из спрайта по медиасегменту #xywh=x,y,w,h */
cursor: image("sprite.png#xywh=32,64,16,16");

/* 5) Фолбэки внутри одного значения: если картинка не загрузится — цвет */
background-image: image("hero.avif", "hero.webp", "hero.jpg", black);

Обратите внимание: запись с цветом — это не background-color. Это именно отдельный слой изображения, который можно масштабировать background-size, не перекрашивая весь блок.

Реальность сегодня: пишем прогрессивно

На практике пока действуем как обычно (гарантированный результат), а затем включаем улучшение через @supports. Так код останется рабочим во всех браузерах, а там, где image() появится, — станет лучше.

Пример 1. Цветовая маска поверх фото

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

.hero {
  /* слой 1: полупрозрачная «маска» (градиент) */
  background-image: linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)),
                    url("cover.webp");
  background-size: cover;
  background-position: center;
}

С улучшением через image(): маска становится изображением, её проще масштабировать отдельным слоем.

.hero {
  background-image: linear-gradient(rgb(0 0 0 / .25), rgb(0 0 0 / .25)),
                    url("cover.webp");
  background-size: cover;
  background-position: center;
}

@supports (background-image: image(rgb(0 0 0 / .25))) {
  .hero {
    background-image: image(rgb(0 0 0 / .25)), url("cover.webp");
    /* теперь «плашку» можно масштабировать отдельно, если нужно */
    background-size: 25%, cover;
    background-repeat: no-repeat, no-repeat;
    background-position: left top, center;
  }
}

Пример 2. Вырезка из спрайта

По-старому: считаем координаты и используем background-position.

.icon {
  width: 16px; height: 16px;
  background: url("sprite.png") no-repeat -32px -64px / 128px 128px;
}

Современный путь: объявляем «какой кусок взять» прямо в значении изображения. Для совместимости используем фолбэк с url(), потому что медиасегменты #xywh в url() безопасно игнорируются, если не поддерживаются.

.icon {
  width: 16px; height: 16px;
  /* фолбэк: обычный спрайт с позицией */
  background: url("sprite.png") no-repeat -32px -64px / 128px 128px;
}

@supports (background-image: image("sprite.png#xywh=32,64,16,16")) {
  .icon {
    /* улучшение: вырезаем ровно тот фрагмент, что нужен */
    background: image("sprite.png#xywh=32,64,16,16");
    background-repeat: no-repeat;
    background-size: 16px 16px; /* размер «среза» как самостоятельного образа */
  }
}

/* Дополнительно: безопасная подсказка — тот же медиасегмент в url(), который старые движки просто проигнорируют */
.icon--hint {
  background: url("sprite.png#xywh=32,64,16,16") no-repeat;
  background-size: 16px 16px;
}

Пример 3. Bidi-чувствительные маркеры списков

По-старому: грузим две версии стрелочки или используем transform: scaleX(-1), что не всегда уместно.

ul {
  list-style-image: url("icons/arrow-right.svg");
}
[dir="rtl"] ul {
  list-style-image: url("icons/arrow-left.svg"); /* второй ассет */
}

С улучшением через image(): один ассет, браузер отзеркалит сам при dir="rtl".

ul { list-style-image: url("icons/arrow-right.svg"); }

@supports (list-style-image: image(ltr "icons/arrow-right.svg")) {
  ul { list-style-image: image(ltr "icons/arrow-right.svg"); }
}

Типичные паттерны использования

• Наложение цвета как «верхнего» слоя: удобно для затемнения/осветления части блока без затрагивания всего фона.
• Sprite-курсор: указатели мыши со спрайта через cursor: image("sprite.png#xywh=...").
• Фолбэк-цвет внутри одного значения: если изображение недоступно, сохраняем контраст и читабельность.
• Bidi-иконки: одна SVG-стрелка для LTR/RTL вместо двух ассетов.

Ошибки и ловушки

• Нельзя путать image() с конструктором Image() в JS — это разные вещи.
• Неверный синтаксис цвета: запись вида image(solid #ff0000) невалидна. Используйте image(#ff0000) или image(rgb(...)).
• Размер цветовой плашки задаётся через background-size, а не через размеры элемента.
• Фрагменты #xywh в url() — удобный «мягкий» приём: старые движки их просто игнорируют и покажут целую картинку.

Готовые рецепты «скопируй и вставь»

/* 1) Градиент + фото (фолбэк), затем «верхняя плашка» как image() */
.card {
  background: linear-gradient(rgb(255 255 255 / .6), rgb(255 255 255 / .6)),
              url("photo.jpg");
  background-size: 100% 40%, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, center;
}
@supports (background-image: image(white)) {
  .card {
    background-image: image(rgb(255 255 255 / .6)), url("photo.jpg");
    background-size: 100% 40%, cover;
    background-repeat: no-repeat, no-repeat;
  }
}

/* 2) Иконка из спрайта: сначала старый способ, потом улучшение */
.icon-like {
  width: 20px; height: 20px;
  background: url("sprite.png") no-repeat -80px -40px / 200px 200px;
}
@supports (background-image: image("sprite.png#xywh=80,40,20,20")) {
  .icon-like {
    background: image("sprite.png#xywh=80,40,20,20");
    background-size: 20px 20px;
    background-repeat: no-repeat;
  }
}

/* 3) Один ассет для LTR/RTL маркера списка */
.features { list-style-position: inside; }
.features li { margin-inline: 0 8px; }
@supports (list-style-image: image(ltr "icons/arrow.svg")) {
  .features { list-style-image: image(ltr "icons/arrow.svg"); }
}

Короткий чек-лист перед продом

• Сначала пишите рабочий фолбэк без image(), затем — улучшение через @supports.
• Проверяйте контраст: если указываете фолбэк-цвет внутри image(), дублируйте background-color для совсем старых UA.
• Для спрайтов храните исходные координаты (x, y, w, h) в токенах/константах — пригодится и для background-position, и для #xywh.
• Не смешивайте в одном правиле сложные image() и массу других фонов — отлаживать через DevTools будет тяжело.

Справка и ссылки

• MDN про функцию image(): developer.mozilla.org/.../CSS/image/image
• Обзор типа <image> и родственных функций (image-set(), cross-fade(), element(), paint()): developer.mozilla.org/.../CSS/image
• Спецификация CSS Images Level 4: w3.org/TR/css-images-4/

Резюме: image() — отличная задумка, которая позволит писать меньше шаблонного кода и держать сложные фоновые эффекты в одном значении. Пока поддержки мало — используем разумные фолбэки и включаем улучшения там, где это возможно.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.