# Как подготовить первый экран сайта с ИИ-картинкой

> Как подготовить первый экран сайта с ИИ-картинкой? Первый экран должен поддерживать предложение и не замедлять загрузку.

Каноническая страница: [https://images.rateai.tech/guides/website-hero-image/](https://images.rateai.tech/guides/website-hero-image/)
Дата материала: 2026-11-14

Рубрика: Практическое руководство

## Когда пригодится

Первый экран должен поддерживать предложение и не замедлять загрузку.

## Рабочий порядок

| Этап | Что сделать |
| --- | --- |
| Подготовка | Знайте место заголовка, кнопки и адаптивные размеры. |
| Черновик | Сделайте изображение с запасом для обрезки и сожмите файл. |
| Проверка | Заголовок читается, а ключевой объект виден на телефоне. |

## Пример применения

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

## Типичная ошибка и исправление

Красивая тяжёлая картинка ухудшает скорость; оптимизируйте размер.

## Первый экран с настоящим заголовком

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

## Читайте также

- [Все руководства](https://images.rateai.tech/guides/)
- [Базовое руководство](https://images.rateai.tech/guides/image-prompt/)
- [Как собрать карточку для соцсети](https://images.rateai.tech/guides/social-card-image/)
- [Как проверить ИИ-изображение перед печатью](https://images.rateai.tech/guides/print-image/)
- [Как подготовить баннер с ИИ-изображением](https://images.rateai.tech/guides/banner-image/)
- [Как подготовить ИИ-картинку с прозрачным фоном](https://images.rateai.tech/guides/transparent-image/)