SVG, PNG, WebP и другие форматы изображений: как выбирать, готовить и использовать их на сайте

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

Можно идеально сжать фотографию до 80 КБ и при этом вообще не иметь права ее публиковать. Можно, наоборот, получить абсолютно законную фотографию от заказчика размером 12 МБ и заставить посетителя сайта загружать оригинал практически с камеры. Поэтому профессиональная работа с изображением начинается не с вопроса «PNG или WebP?», а с трех вопросов: что это за изображение? Как оно будет использоваться на сайте? Откуда оно взялось? Если ответить на них, почти все остальные решения становятся довольно очевидными.

Сначала разделим вектор и растр

Фотография, скриншот и большинство сложных изображений состоят из пикселей. Это растровая графика. У такого файла есть конкретный размер: например, 800 × 600 или 1680 × 1100 px. Если исходник слишком маленький, увеличение не создаст в нем недостающие детали.

SVG устроен иначе: это векторный формат, в котором графика описывается геометрически. Поэтому простой логотип или иконку можно увеличивать без обычной для растра пикселизации. Tilda сама рекомендует использовать SVG для векторных иконок в Zero Block.

Отсюда полезнее вывести не правило «SVG лучше PNG», а более точное: если изображение изначально является векторной графикой, не превращайте его в растр без причины. Если изображение по природе растровое, не пытайтесь сделать его SVG только ради модного расширения. Логотип, пиктограмма или простая схема обычно выигрывают от SVG. Фотография человека — нет.

SVG: когда важна масштабируемость

SVG хорошо подходит для логотипов, иконок, схем, геометрической графики, простых иллюстраций и декоративных элементов интерфейса. Например, один и тот же логотип может стоять маленьким в меню и крупным в подвале сайта. Если исходник векторный, для этого не нужно экспортировать отдельные версии в 1×, 2× и 3×.

Но здесь есть популярный миф: SVG не означает автоматически «самый легкий файл». Простой значок действительно может занимать считаные килобайты. Но сложная иллюстрация с тысячами точек, масками, фильтрами и ненужными данными может получиться тяжелее хорошо подготовленного растра. То есть решение по-прежнему принимается не по расширению файла, а по содержанию.

Еще одна типичная ошибка — отдавать растровую версию логотипа только потому, что PNG удобно экспортировать из Figma. Если у вас есть нормальный векторный исходник и Tilda позволяет использовать SVG в нужном сценарии, смысла намеренно терять преимущество вектора обычно нет.

JPEG: обычный рабочий формат для фотографий

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

Для обычной фотографии сотрудника, интерьера, мероприятия или фонового изображения JPEG остается совершенно нормальным выбором. Не нужно считать его «устаревшим и плохим» только потому, что появились WebP и AVIF. У старого доброго JPG есть важное преимущество: результат легко контролировать, формат отлично поддерживается, а при правильной подготовке фотография может быть достаточно легкой.

Tilda, например, до сих пор рекомендует JPG как базовый формат для фоновых изображений обложек.

PNG: не «для лучшего качества», а для конкретных задач

PNG использует сжатие без потерь и поддерживает прозрачность. Поэтому он полезен там, где нужно сохранить прозрачный фон или четкую растровую графику без характерных JPEG-артефактов. MDN рекомендует PNG именно для таких сценариев, а не как универсальный формат изображений.

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

Особенно это заметно в проектах, которые собирались прямо из Figma: дизайнер выделил объект, нажал Export PNG 2× и дальше даже не посмотрел, что получилось. Сам факт того, что файл экспортирован из дизайнерской программы, еще не означает, что он подготовлен для сайта.

WebP и AVIF: современные форматы, но не религия

WebP поддерживает как сжатие с потерями, так и сжатие без потерь и прозрачность. AVIF также рассчитан на эффективное хранение растровой графики. В современных браузерах эти форматы позволяют во многих сценариях получить хорошее качество при меньшем размере файла, чем традиционные JPEG или PNG.

Но из этого часто делают неправильный вывод:

«Нужно просто перевести весь сайт в WebP».

Не нужно. Если JPEG после нормальной подготовки весит 120 КБ и визуально выглядит хорошо, выигрыш от дополнительных манипуляций может быть совершенно несущественным. Если PNG весит 2,5 МБ только потому, что в нем лежит обычная фотография, вот здесь формат действительно выбран плохо.

Смотрите на конечный результат, а не на название технологии. И отдельно учитывайте саму платформу. Tilda применяет собственную оптимизацию изображений и может подготавливать подходящие версии файлов при загрузке страницы; в документации отдельно отмечено, что ручная предварительная оптимизация при этом все равно может быть полезной.

То есть ваша задача — прежде всего предоставить платформе нормальный исходник, а не заниматься бессмысленным перекодированием ради галочки «у нас WebP».

GIF: почти никогда не лучший выбор для статичной картинки

GIF исторически используется и для графики, и для анимации, но для обычных статичных изображений сегодня почти всегда есть более подходящие варианты. MDN прямо рекомендует для статичной lossless-графики предпочитать PNG, а для анимации рассматривать более современные форматы.

Если вам прислали GIF размером 8 МБ с бесконечно мигающей стрелкой, проблема уже не в оптимизации. Сначала стоит задать вопрос, нужна ли эта анимация вообще.

Как выбирать формат на практике

Вместо огромной таблицы достаточно запомнить логику.

Логотип, иконка, простая схема → сначала проверяем SVG.
Фотография → обычно JPEG или подходящий современный растровый формат.
Растровая графика с прозрачностью → PNG или современный формат, поддерживающий прозрачность.
Скриншот интерфейса → сравниваем PNG и более компактные варианты по фактическому качеству и весу.
Сложная иллюстрация → смотрим на саму иллюстрацию. Иногда хорош SVG, иногда легче и разумнее растровая версия.

То есть вопрос «в каком формате сохранять изображения для сайта?» без контекста примерно такой же полезный, как «каким шрифтом писать сайт?». Нужно сначала понять задачу.

Размер в пикселях и вес файла — разные вещи

Это одна из самых важных вещей во всей теме. Изображение может иметь размер 1680 × 1000 px — это его геометрический размер — и одновременно вес 180 КБ или 4 МБ — это объем файла. Эти показатели связаны, но не заменяют друг друга.

Поэтому универсальные правила вроде:

«Любая картинка должна быть меньше 200 КБ»

или:

«Все изображения делаем 1680 px»

плохие. Большая фотография первого экрана и маленькая фотография автора в карточке выполняют совершенно разные задачи.

Правильный вопрос:

Какой максимальный размер это изображение реально занимает на странице и какое качество для него нужно?

Не экспортируйте всё из Figma в 2×

Это очень распространенный автоматизм. В макете карточка имеет ширину 360 px. Дизайнер экспортирует картинку 2×, получает 720 px и считает задачу решенной. Иногда это разумно. Иногда нет.

Если эта карточка на другом брейкпоинте растягивается до 560 px, 720 px может уже оказаться пограничным значением. Если картинка никогда не становится шире 240 px, огромный исходник может быть избыточным. Если используется фон с cover, часть изображения может обрезаться, а фактически необходимый исходник зависит уже не только от ширины объекта.

Поэтому «2×» — это не закон, а приблизительный способ предусмотреть экраны с высокой плотностью пикселей. Сначала смотрите, как изображение реально ведет себя в адаптиве, и только потом выбирайте исходный размер.

Почему не существует одного правильного размера

Tilda автоматически уменьшает большие изображения при загрузке. Согласно актуальной документации, изображения большого размера обычно приводятся к 1680 px, а изображения меньшего размера сохраняют исходные размеры. Для некоторых изображений в Zero Block можно включить загрузку до 1920 px.

Это важная техническая особенность Tilda, но не инструкция «готовить все изображения в 1680». Например: карточке шириной 320 px не нужен исходник шириной 5000 px; фотографии первого экрана может потребоваться заметно больше разрешения, чем маленькому аватару; вертикальная фотография и широкоформатный фон при одной и той же длинной стороне решают совершенно разные задачи.

Поэтому размеры изображения лучше выбирать от места на сайте, а не от абстрактного стандарта.

Почему оригинал с камеры почти никогда не нужен сайту

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

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

Не уничтожайте оригинал ради оптимизации сайта. Но и не используйте мастер-файл как веб-изображение.

Фон и обычная картинка — это не совсем одно и то же

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

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

Это уже не проблема JPEG, WebP или Tilda. Это неправильно выбранное изображение для конкретного сценария. Хорошая фоновая фотография обычно должна выдерживать несколько вариантов кадрирования.

Не лечите плохой исходник увеличением

Если заказчик прислал логотип шириной 240 px и просит поставить его на большой первый экран, увеличение до 1200 px не вернет потерянную информацию. То же самое относится к фотографиям.

Программы масштабирования и AI-инструменты могут визуально улучшать маленькие изображения, но это уже создание или реконструкция деталей, а не возвращение исходного качества. Если существует нормальный оригинал, лучше сначала запросить его.

Особенно это касается логотипов: вместо четырех попыток улучшить маленький JPEG попросите SVG, PDF или другой исходный векторный файл.

DPI для сайта почти никогда не тот параметр, о котором нужно переживать

72 dpi, 150 dpi, 300 dpi — привычные числа из печати. Для веб-страницы прежде всего важны фактические размеры изображения в пикселях и то, как браузер его отображает.

Если картинка имеет ширину 500 px, простое изменение значения DPI в метаданных не превратит ее в качественный исходник шириной 1500 px. Поэтому для сайта сначала смотрим на пиксели, а не на красивую цифру 300 dpi.

Самая дорогая ошибка с изображением вообще не техническая

Представим идеальную картинку. Она весит 95 КБ. Размер подобран точно под блок. На мобильном отлично кадрируется. Формат выбран правильно. Но дизайнер скачал ее из Google Images.

С технической точки зрения всё прекрасно. С точки зрения права может быть проблема. Фотографические произведения относятся к объектам авторского права. Сам факт того, что изображение доступно в интернете, не означает, что его разрешено взять и использовать в своем проекте.

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

Google, Pinterest и чужой сайт — не источники прав

Поисковая система помогает найти картинку. Pinterest помогает найти картинку. Сайт конкурента показывает картинку. Ни один из этих фактов сам по себе не дает вам права использовать ее.

Вместо вопроса:

«Где я скачала изображение?»

лучше задавать другой:

«Кто разрешает нам его использовать и на каких условиях?»

Это принципиальная разница. Если картинка нашлась через Google, дальше нужно найти оригинальный источник и разобраться уже с ним.

«Фото бесплатное» тоже ничего не объясняет

Бесплатное изображение может быть доступно на определенных лицензионных условиях. Tilda, например, интегрирует в свою библиотеку изображения из Unsplash, Pexels и Pixabay. Но наличие фотографии в удобной библиотеке не отменяет правила конкретного источника.

Поэтому полезнее избавиться от категории «бесплатные картинки» вообще. Есть изображения, для которых вы понимаете основание использования, и изображения, для которых не понимаете. Первые можно рассматривать для проекта. Со вторыми сначала нужно разобраться.

Право на фотографию и право на человека на фотографии — не одно и то же

Это особенно важный момент. Если на фотографии изображен узнаваемый человек, могут одновременно возникнуть два разных вопроса.

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

В российском праве использование изображения гражданина отдельно регулируется статьей 152.1 ГК РФ: общее правило требует согласия изображенного лица, хотя закон содержит исключения.

Поэтому:

«Фотограф разрешил использовать снимок»

не обязательно решает вопрос изображенного человека. И:

«Сотрудник согласился сфотографироваться»

не обязательно решает вопрос прав фотографа. Это два отдельных слоя.

С фотографиями детей, благополучателей и чувствительных историй лучше быть особенно осторожными

Если сайт НКО публикует фотографию человека рядом с историей о болезни, жизненных обстоятельствах, полученной помощи или других чувствительных событиях, речь может идти уже не только о красивом портрете. Контекст публикации способен раскрывать дополнительную информацию о человеке.

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

«Заказчик прислал» — это не лицензия, но это важный факт

В клиентском проекте часто происходит так: заказчик отправил папку; дизайнер использовал изображения; через два года появляется вопрос, откуда взялось конкретное фото. И никто уже не помнит.

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

Но здесь важно не уходить в другую крайность:

«Раз заказчик прислал, значит я вообще ни при чем».

Договор может распределить обязанности, гарантии и экономические последствия между заказчиком и исполнителем. Но сам по себе он не уничтожает права фотографа, модели или другого третьего лица.

С точки зрения нормального рабочего процесса вопрос звучит так: кто отвечает за проверку конкретной категории материалов и как это зафиксировано между сторонами?

Покупка фотографии и получение всех прав — не одно и то же

Еще одна распространенная логическая ошибка:

«Мы фотографу заплатили, значит фотография наша».

Нет. Оплата съемки сама по себе не объясняет объем полученных прав. В российском авторском праве исключительное право может отчуждаться, а использование произведения может предоставляться по лицензии в определенных пределах.

Поэтому для реальной работы важен не сам факт платежа, а то, что разрешает договор. Например, фотография может использоваться:

на сайте;
в социальных сетях;
в наружной рекламе;
в печати;
в рекламной кампании партнера.

Это не обязательно один и тот же объем прав.

Даже фотография с легального стока может содержать дополнительные риски

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

WIPO отдельно рассматривает rights clearance именно как проверку нескольких слоев прав в одном произведении или сцене. Для обычной декоративной фотографии чашки кофе это чаще всего не превращается в юридическое расследование. Но если изображение становится центральным элементом большой рекламной кампании, проверка должна быть значительно внимательнее.

Минимальная проверка изображения перед загрузкой

Перед тем как поставить изображение на опубликованный сайт, полезно пройти три коротких блока вопросов.

1. Визуально

Подходит ли изображение композиционно?
Выдерживает ли кадрирование?
Не станет ли важная часть фотографии исчезать на мобильном?
Есть ли достаточно хороший исходник?

2. Технически

Правильно ли выбран формат?
Соответствует ли размер реальному использованию?
Нет ли огромного оригинала там, где достаточно небольшой версии?
Не экспортирован ли обычный снимок в тяжелый PNG?
Нормально ли изображение выглядит после компрессии?

3. По происхождению

Откуда файл взялся?
Кто его предоставил?
Есть ли понятное основание использования?
Нужно ли проверять согласие изображенного человека?
Сможете ли вы через год объяснить, откуда взялся этот файл?

Если эти три проверки пройдены, для большинства обычных проектов этого уже достаточно, чтобы не совершать базовых ошибок.

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

Как организовать изображения в клиентском проекте

Самая полезная мысль здесь — не пытаться юридически исследовать каждую иконку на каждом лендинге. Нужна система, которая позволяет быстро ответить на вопрос: «Откуда это появилось?» Если ответ есть, дальше уже можно разбираться с конкретной лицензией, договором или согласиями. Если ответа нет, начинается археология по чатам двухлетней давности.

Не храните в проекте категорию «картинки»

Разделяйте материалы хотя бы по происхождению. Например: материалы заказчика, материалы, подобранные исполнителем, платные стоки, бесплатные лицензированные источники, собственная съемка или иллюстрации, материалы, происхождение которых пока нужно уточнить.

Последняя категория особенно полезна. Если вам прислали 80 фотографий, не нужно останавливать проект из-за одной сомнительной картинки. Ее можно временно пометить как требующую проверки и продолжить работать с остальными. Проблема начинается, когда временная картинка незаметно становится постоянной и уезжает на прод.

Минимальный реестр изображений

Не нужен Excel на двадцать колонок. Для большинства сайтов достаточно: файл → источник → кто предоставил → основание использования → ссылка/документ → важные ограничения.

Например:

hero-team.jpg → заказчик → заказчик → собственная съемка → папка клиента
cover-01.jpg → сток → дизайнер → лицензия сервиса → ссылка
illustration.svg → иллюстратор → дизайнер → договор → договор №...
project-12.jpg → неизвестно → заказчик → требуется уточнить

Главная ценность такого реестра не юридическая красота. Он позволяет через год за минуту понять историю файла.

Не сохраняйте только ссылку

Ссылка может исчезнуть. Страница фотостока может измениться. Лицензионные условия сервиса могут обновиться. Поэтому для важных коммерческих материалов разумно сохранять не только URL, но и подтверждение того, что вы действительно получили соответствующее право или лицензию: документ, чек, данные покупки или копию существенных условий.

WIPO рассматривает фиксацию результатов rights clearance как отдельную часть профессиональной работы с контентом. При этом тоже не нужно сходить с ума. Не надо архивировать юридическое досье на каждую бесплатную декоративную пиктограмму. Глубина проверки должна соответствовать риску и роли материала.

Как принимать папку изображений от заказчика

Обычная схема:

«Вот Google Drive, там всё».

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

«Получила папку. Подтвердите, пожалуйста, что эти фотографии и графика предоставляются вами для использования на сайте и необходимые права и согласия на материалы с вашей стороны есть».

Это не универсальная юридическая индульгенция. Но теперь хотя бы зафиксировано, кто внес материалы в проект и на каких вводных исполнитель начал с ними работать. Если внутри папки обнаруживается фотография Анджелины Джоли из Getty Images, сообщение заказчика не означает, что вопросы закончились. Очевидно сомнительные материалы всё равно требуют проверки.

Введите простое правило: подозрительное изображение останавливает изображение, а не весь проект

Это полезный организационный прием. Вы видите сомнительное фото. Не нужно либо молча публиковать его, либо запускать недельную переписку и блокировать разработку. Пишите:

«Для этой фотографии пока не понятно основание использования. Я оставлю временную замену, а оригинал поставим после подтверждения».

Так юридический вопрос не превращается в производственный хаос.

Что разумно предусмотреть в договоре с заказчиком

Не стоит пытаться решить всё одним пунктом:

«За все материалы отвечает заказчик».

Он слишком грубый и плохо описывает реальный процесс. Логичнее отдельно определить несколько вещей.

Кто предоставляет какие материалы

Например: заказчик предоставляет тексты, фотографии сотрудников и собственные материалы; исполнитель подбирает стоковые изображения; платные изображения приобретаются после согласования; оригинальные иллюстрации создаются отдельно. Это уже сильно уменьшает количество будущих споров.

Что подтверждает сторона, передающая материал

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

Кто оплачивает лицензии

Небольшой, но очень практический вопрос. Дизайнер нашел идеальную фотографию за 30 долларов. Это входит в стоимость проекта? Оплачивается отдельно? Заказчик должен приобрести ее на свой аккаунт? Кому фактически выдается лицензия? Лучше решить это до покупки.

Что происходит при претензии

Важно не просто написать «ответственность несет X», а определить процесс: кто уведомляет вторую сторону, кто предоставляет документы, кто взаимодействует с правообладателем, как распределяются предусмотренные договором расходы. Это уже работающая конструкция.

Не смешивайте материалы заказчика и результаты работы исполнителя

Логотип клиента, который клиент передал дизайнеру, и иллюстрация, которую дизайнер создал в рамках проекта, — совершенно разные объекты. Поэтому договор должен отдельно регулировать входящие материалы заказчика и результаты, созданные исполнителем. Это значительно логичнее, чем один огромный раздел «Авторские права».

Конкретные юридические формулировки договора нужно проверять применительно к юрисдикции и конкретной схеме работы.

Разберем несколько реальных ситуаций

«Маркетолог нашел картинку в Pinterest». Pinterest здесь практически ничего не объясняет. Нужно найти исходный источник. Если происхождение определить не удалось, самое дешевое решение обычно — заменить картинку. Час работы специалиста часто стоит дороже, чем поиск нормальной альтернативы на лицензированном стоке.

«Заказчик прислал фотографию из своего Instagram». Instagram тоже не отвечает на вопрос о правах. Нужно понять, кто фотографировал. Если сам заказчик — один сценарий. Если нанятый фотограф — другой. Если фотография была сделана на мероприятии сторонним фотографом — третий. Если ее когда-то просто репостнули — четвертый. Социальная сеть показывает место публикации, но не историю возникновения прав.

«Фотограф снимал сотрудников специально для компании». Уже гораздо лучше. Но всё равно полезно проверить договор с фотографом и согласия людей, если они требуются. Особенно если фотографию планируют использовать не только на корпоративном сайте, но и в рекламе.

«Заказчик купил изображение на фотостоке». Попросите информацию о покупке и проверьте условия конкретной лицензии. Важный вопрос, который часто забывают: кому именно предоставлена лицензия? Если файл купил дизайнер на собственный аккаунт, это не всегда организационно то же самое, что покупка изображения непосредственно заказчиком. Для платных стоков этот процесс лучше продумать заранее.

«Мы сильно переделали чужую фотографию». Обрезка, изменение цвета и наложение текста не являются универсальным способом избавиться от прав автора исходного произведения. Производные произведения тоже существуют в рамках авторского права, а права на исходное произведение сами по себе от обработки не исчезают. Поэтому стратегия «давайте отзеркалим ее и никто не узнает» не относится к инструментам профессионального дизайнера.

«Фотография используется только как фон». Размер изображения на странице не определяет наличие прав. Тот факт, что фотография затемнена, размыта или видна только на треть экрана, не превращает ее автоматически в свободный материал.

«На фотографии виден чужой логотип». Это уже пример того, почему права на фотографию не всегда единственный вопрос. WIPO отдельно указывает, что при использовании фотографии могут иметь значение права на произведения и товарные знаки, находящиеся внутри изображения. При этом не нужно начинать паниковать каждый раз, когда на уличной фотографии видна вывеска магазина. Контекст использования имеет значение. Но если чужой бренд становится центральным элементом вашей рекламной коммуникации, это уже повод отдельно проверить ситуацию.

Особый случай: изображения, созданные AI

Это отдельная большая тема, и сводить ее к одной строке «AI-картинки можно использовать свободно» нельзя. Условия использования генерируемого контента зависят от конкретного сервиса, законодательства и содержания самого изображения. Дополнительные вопросы могут возникать, например, если в генерации используются узнаваемые персонажи, бренды или имитация конкретных объектов.

WIPO уже отдельно рассматривает генеративный AI как новый слой задачи rights clearance. Поэтому AI не решает проблему происхождения контента. Он просто меняет набор вопросов, которые нужно задавать.

Как проверить уже готовый сайт

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

Первый проход — технический

Просмотрите сайт и отметьте:

огромные растровые изображения;
фотографии в PNG без необходимости;
маленькие картинки, растянутые на большие блоки;
растровые логотипы, для которых существует SVG;
слишком тяжелые анимации;
изображения, плохо кадрирующиеся на мобильном;
элементы, которые выглядят мыльно на больших экранах.

Tilda использует Lazy Load для изображений вне области просмотра и применяет собственную оптимизацию, но это не делает исходный файл неважным. Не нужно пытаться победить платформу собственной системой оптимизации. Сначала исправьте очевидно плохие исходники.

Второй проход — происхождение

Для каждого важного изображения задайте вопрос: «Мы понимаем, откуда оно?» Если да — идем дальше. Если нет — отмечаем его.

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

Через несколько минут у вас получится не абстрактная тревога «а вдруг тут что-то нелегально», а конкретный список из пяти или десяти файлов, которые действительно нужно проверить. Это намного полезнее.

Что передать заказчику вместе с сайтом

Хорошая передача проекта — это не только ссылка на Tilda. Если в проекте есть значимое количество сторонних изображений, полезно передать вместе с ним:

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

Тогда следующий дизайнер не начнет весь этот поиск заново через два года.

Главное

У изображения на сайте нет универсального «правильного формата». Есть конкретная задача. SVG обычно хорош там, где графика действительно векторная. JPEG остается нормальным вариантом для фотографий. PNG нужен не потому, что «качество максимальное», а когда полезны его свойства. WebP и AVIF — хорошие современные инструменты, но не повод механически перекодировать всё подряд.

Размер тоже нельзя выбирать одной цифрой. Он зависит от реального размера элемента, адаптива, плотности экрана, способа кадрирования и роли изображения. А юридически файл заканчивается не на расширении .jpg. У него должно быть происхождение.

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