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

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

Что нужно определить до создания картинки

Начните с роли изображения. Обложка помогает понять тему страницы, фотография товара показывает детали, схема объясняет шаги. От роли зависит кадр, подпись и то, можно ли заменить картинку текстом. Для фона нужен иной подход: он часто декоративный и не должен нести единственный важный смысл. Такой случай разобран в инструкции по фону сайта.

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

Сделать изображение самому или с помощью ИИ

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

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

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

Как подготовить файл для публикации

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

Для фотографии можно попробовать JPEG, WebP или AVIF; для иллюстрации с прозрачностью подойдут форматы, сохраняющие её. Итог выбирайте по реальному виду и поддержке нужных браузеров, а не по названию формата. Руководство web.dev по изображениям объясняет форматы и отзывчивые варианты. Экспортируйте файл в размере, достаточном для показа на странице, затем сравните качество и вес нескольких вариантов. Удалять нужные детали ради минимального числа килобайт нельзя.

Дайте файлу короткое осмысленное имя латиницей, например site-workspace-cover.webp. Google рекомендует описательные имена и размещение рядом с релевантным текстом. Основная картинка должна быть настоящим элементом <img src="...">, а не только CSS-фоном: правила Google для изображений объясняют, что такой элемент доступнее поисковому роботу.

Как добавить картинку без поломки страницы

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

<img src="/images/site-workspace-cover.webp"
     alt="Иллюстрация рабочего места с ноутбуком и папкой"
     width="800" height="533">

В примере путь начинается с корня сайта: файл должен лежать там, куда указывает src. Значения width и height должны соответствовать пропорциям вашего файла, а не копироваться без проверки. Они помогают браузеру заранее выделить место под изображение, как поясняет справка MDN по элементу img. Если картинка служит ссылкой, проверьте и текст ссылки, и альтернативное описание.

Альтернативное описание пишите по смыслу картинки в этом месте страницы. Для предметной иллюстрации назовите важные объекты и действие; для чистого украшения возможен пустой alt="". Не перечисляйте поисковые слова. Google использует alt вместе с содержимым страницы, а читателю без изображения он помогает понять смысл. Текст, встроенный только в картинку, недоступен части аудитории.

По теме: Сайт с песнями, созданными ИИ: права, плеер и публикация

Как проверить результат перед запуском

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

1. Сравните страницу с исходным брифом: виден ли предмет и понятна ли его роль.
2. Проверьте кадр на узком экране и увеличьте изображение до обычного размера просмотра.
3. Откройте страницу без авторизации и сам файл по адресу из src.
4. Отключите показ изображений или прочтите alt: не потерялся ли смысл.
5. Если у страницы есть превью при отправке ссылки, проверьте, что оно соответствует теме и не показывает старую обложку.

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

Что делать, если картинка выглядит плохо

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

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

Частые вопросы

Можно ли взять изображение из поиска?

Результат поиска показывает файл, но не выдаёт разрешение на его использование. Ищите собственный исходник или явно подходящую лицензию и сохраняйте сведения о ней.

Нужно ли делать отдельный файл для телефона?

Не всегда. Если один кадр читается на обеих ширинах, начните с него. Когда деталь теряется, подготовьте второй кадр и проверьте отзывчивую вставку; [Google описывает srcset и <picture>](https://developers.google.com/search/docs/appearance/google-images).

Что писать в альтернативном описании?

Опишите информацию, которую человек должен получить вместо картинки, одним коротким предложением. Для чистого украшения смысл может уже быть в соседнем тексте.

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

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