Графика на сайте решает две задачи: объясняет сложное и делает страницы узнаваемыми. Выбор между собственной отрисовкой и готовым набором зависит от того, какая задача важнее, и от того, где именно стоит картинка. Ниже — как мы принимаем это решение на проектах, какие технические требования выставляем и что чаще всего мешает использовать найденные изображения.
Сравнение вариантов
Обычно выбор идёт не между «своим» и «чужим», а между пятью типами графики, и у каждого своя роль на странице.
| Вариант | Плюсы | Минусы | Где уместен |
|---|---|---|---|
| Готовый набор иллюстраций | Быстро, недорого, единый стиль внутри набора | Те же картинки у конкурентов, стиль не ваш | Второстепенные блоки, служебные экраны, пустые состояния |
| Своя отрисовка | Узнаваемость, точное попадание в смысл | Дороже и дольше, нужен исполнитель на поддержку | Главная, ключевые страницы услуг, презентационные разделы |
| Схемы и диаграммы | Объясняют процесс лучше любого текста | Требуют аккуратности и обновления при изменениях | Описание процесса, состав решения, тарифы |
| Скриншоты интерфейса | Показывают продукт как есть | Быстро устаревают, нужны чистые демонстрационные данные | Страницы продукта, справка, обучающие материалы |
| Фотографии работ и команды | Дают больше всего доверия | Нужна съёмка и единый стандарт кадра | Портфолио, страница о компании, отзывы |
Смешивать типы в одном блоке не стоит: стоящие рядом плоская иллюстрация из набора и живая фотография выглядят как куски разных сайтов.
Что графика должна объяснять
Абстрактная картинка с людьми у ноутбука не объясняет ничего — её можно поставить на сайт любой компании, и никто не заметит подмены. Схема процесса, скриншот экрана, фотография выполненного объекта объясняют. На странице услуги изображение должно показывать, что именно вы делаете и как выглядит результат.
Простой тест перед публикацией: закройте текст и посмотрите на картинку. Если по ней невозможно понять, о чём раздел, картинка занимает место зря. Второй тест — мысленно поставьте это же изображение на сайт конкурента. Если оно подходит и туда, узнаваемости оно не добавляет.
Технические требования
Эти требования мы выставляем на всех проектах, независимо от источника картинок:
- векторные иллюстрации и значки — в SVG: масштабируются без потерь, весят мало, цвет при необходимости меняется стилями;
- растровые — в WebP с запасным вариантом в JPEG или PNG для старых браузеров;
- размер файла подбирается под блок, а не «как отдал дизайнер»: картинка шириной 3000 пикселей в колонке на 600 не станет чётче, но замедлит страницу;
- для экранов с высокой плотностью точек готовим удвоенный вариант и отдаём его через набор источников, а не грузим всем подряд;
- у значимых изображений — подпись alt по смыслу картинки; у чисто декоративных alt оставляем пустым, чтобы экранный диктор их не зачитывал;
- для всего, что ниже первого экрана, включаем отложенную загрузку; изображение первого экрана, наоборот, грузим сразу — иначе страдает скорость отрисовки;
- ширина и высота задаются в разметке, чтобы страница не прыгала при загрузке;
- единая толщина линий, палитра и угол наклона во всём наборе — иначе набор рассыпается на отдельные картинки.
Отдельно проверяем контраст. Тонкие светло-серые линии на белом фоне красиво смотрятся в макете и пропадают на дешёвом мониторе и на солнце.
Права: где чаще всего попадают
Изображения из поисковой выдачи использовать нельзя. Претензии по ним приходят регулярно, и объяснение «нашли в интернете» не помогает — правообладателю достаточно снимка страницы.
У бесплатных наборов условия разные. Встречается требование указать автора, запрет на коммерческое использование, запрет на изменение и запрет на перепродажу в составе шаблона. Часть лицензий разрешает почти всё, часть — почти ничего, и по внешнему виду набора это не определить.
Что мы просим делать заказчика:
- хранить условия лицензии рядом с файлами — текст лицензии, ссылку на источник и дату загрузки;
- вести короткий список: какая картинка откуда взята и на каких условиях;
- проверять условия отдельно для платных фотостоков — там бывают ограничения по тиражу и по использованию в рекламе;
- не использовать чужие логотипы, кадры из фильмов и узнаваемые лица без разрешения;
- при съёмке в офисе клиента или на объекте заранее согласовывать публикацию.
Через два года, когда сайт передадут другому подрядчику, этот список окажется единственным доказательством, что графика законная.
Генерация изображений нейросетями
Инструменты генерации закрывают часть задач: фоны, абстрактные обложки статей, черновики композиции перед отрисовкой. Ограничения тоже понятные.
- Точные вещи получаются плохо: текст на картинке, схемы, интерфейсы и мелкие детали приходится переделывать вручную.
- Стиль трудно повторить: следующая картинка серии выходит другой, а набору нужна однородность.
- Правовой статус результата зависит от сервиса и страны — условия использования читать обязательно, особенно для рекламных материалов.
- Сгенерированную «фотографию работ» ставить нельзя: это ровно то же, что выдумать отзыв.
Рабочий подход — генерировать вспомогательное, а всё, что описывает ваш продукт и ваши работы, делать самим.
Практичная схема без большого бюджета
Полная отрисовка сайта нужна не всем. Мы обычно предлагаем комбинацию:
- один готовый набор в подходящем стиле — на второстепенные блоки и служебные экраны;
- три-пять собственных схем на ключевые страницы: процесс работы, состав услуги, устройство решения;
- фотографии реальных работ и команды — их не заменит ни один набор;
- единая палитра и толщина линий, чтобы части сошлись в один язык;
- файл с правилами: где какой тип графики допустим, какие форматы и размеры, кто отвечает за обновление.
Это заметно дешевле полной отрисовки и при этом отличает сайт от соседей по нише. Начинать лучше со схем: они дают самый заметный эффект на страницах, где нужно объяснить, за что клиент платит.
Что проверить перед публикацией
- картинка объясняет содержание блока, а не заполняет пустоту;
- формат и вес соответствуют месту вставки, вариант для плотных экранов подготовлен;
- alt написан по смыслу, декоративные изображения помечены пустым alt;
- условия лицензии сохранены, источник записан;
- стиль совпадает с остальной графикой раздела;
- на мобильном экране детали остаются различимыми, текст внутри картинки читается.
Если вы обновляете сайт и не уверены, где хватит готового набора, а где нужны свои схемы и фотографии, решать это дешевле на этапе проектирования, чем после запуска. Мы занимаемся созданием сайтов и подбираем графику под задачи страниц, а не под настроение макета.
