Разделы

3D-иконки на сайте: где они уместны и как сохранить скорость загрузки

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

Где 3D-иконки работают

  • Первый экран и промоблоки. Одна крупная объёмная иконка задаёт настроение и притягивает взгляд к заголовку.
  • Преимущества и «Как это работает». От трёх до шести иконок одного набора делают список наглядным и помогают быстро его просмотреть.
  • Карточки тарифов, категорий и услуг.
  • Онбординг и пустые состояния: «Корзина пуста», «Ничего не найдено», «Заказ оформлен».
  • Рассылки и баннеры, где нужна выразительная растровая картинка.

Где лучше обойтись без них

  • Меню, панели инструментов, формы и таблицы. В 16–24 px объём не читается, а детали сливаются в пятно.
  • Плотные интерфейсы с десятками иконок: объёмная графика перетягивает внимание с контента.
  • Элементы, которые меняют цвет при наведении или в тёмной теме: растровую иконку не перекрасить через CSS.

Для этих мест берите тонкие линейные иконки: они векторные, лёгкие и окрашиваются вместе с текстом.

Как сочетать объём с плоским интерфейсом

Правило простое: 3D — для иллюстрации, плоские иконки — для управления. Чтобы стили не спорили между собой:

  1. Берите иконки из одного набора. У них общие камера, свет и материал, а иконки из разных источников с разным ракурсом выглядят случайной подборкой.
  2. Сверьте палитру. Основной цвет объёмных иконок должен совпадать с акцентом интерфейса или быть с ним в одной гамме.
  3. Держите единый размер и поля. Например, все иконки блока преимуществ — 96 px в карточках одной ширины.
  4. Проверьте тёмную тему. Блики и тени, рассчитанные на светлый фон, на тёмном могут выглядеть грязно; иногда помогает светлая подложка-карточка.
  5. Рассмотрите изометрию. Если нужен объём, но важны вес файла и перекраска, подойдут изометрические иконки: они передают глубину, оставаясь векторными.

Готовые наборы собраны в разделе 3D-иконок, а для финансовых сервисов и отчётов — монеты, копилка, диаграммы — загляните в категорию «Бизнес и финансы».

Как не замедлить сайт

3D-иконка — растровое изображение с прозрачностью, и весит она заметно больше векторной. Почему такую графику не делают в SVG, объясняет статья о том, чем SVG отличается от PNG. Вот правила, которые помогут сохранить скорость.

Формат

Выбирайте WebP: он поддерживает прозрачность и при сопоставимом качестве обычно легче PNG. PNG оставьте для писем, презентаций и программ, которые WebP не принимают. На freeicons 3D-иконки доступны в PNG 256, 512 и 1024 px, а также в WebP.

Размер

Скачивайте иконку под размер отображения с запасом для экранов высокой плотности: для блока 128×128 CSS px нужен файл 256 px. Версию 1024 px оставьте для печати и презентаций. Если нужен нестандартный размер, уменьшите PNG онлайн из версии 512 или 1024 px.

Разметка

<img src="/img/rocket-256.webp"
     srcset="/img/rocket-256.webp 256w, /img/rocket-512.webp 512w"
     sizes="128px" width="128" height="128"
     alt="" loading="lazy" decoding="async">
  • srcset и sizes позволяют браузеру выбрать файл под плотность экрана;
  • width и height резервируют место, и вёрстка не прыгает при загрузке;
  • loading="lazy" откладывает загрузку картинок ниже первого экрана;
  • пустой alt подходит декоративной иконке рядом с заголовком; если иконка несёт смысл без подписи, опишите его словами.

Иконку на первом экране не делайте ленивой. Если она — самый крупный элемент экрана, добавьте ей fetchpriority="high", чтобы браузер загрузил её в первую очередь.

Меньше — лучше

Одной крупной 3D-иконки на экран или одного ряда в блоке преимуществ обычно достаточно. Если нужны десятки однотипных пиктограмм, это задача для векторных стилей.

Итог

Используйте 3D-иконки как акценты — на первом экране, в блоках преимуществ, карточках и пустых состояниях, — а для навигации и управления оставьте плоские. Берите иконки одного набора, сверяйте палитру с интерфейсом и отдавайте WebP нужного размера с width, height и ленивой загрузкой: тогда объём не будет стоить скорости.