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

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

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

Что мы сделали для этого разбора

Для учебного сайта керамической мастерской мы подготовили четыре изображения встроенным генератором: исходную кружку, две её версии после последовательных правок и новую пиалу по образцу стиля. Вся посуда вымышленная. Это практический разбор Neaptide от 6 сентября 2026 года. Клиентского кейса или сравнения моделей здесь нет.

Английские промпты ниже приведены без изменений, в том виде, в каком мы отправляли их инструменту. Название модели и seed (параметр случайности генерации) он не сообщил, поэтому точно такую же картинку вы можете и не получить. Задачу каждой правки объясняем по-русски, а полный журнал можно скачать.

• Скачать все промпты и последовательность генераций (JSON)

Сначала выберите место для изображения

В нашем макете слева стоят заголовок и кнопка, справа должна быть кружка. С таким условием генератор может работать. Из прилагательных «красиво» и «профессионально» он не узнает, где оставить место для текста.

Первый промпт: изображение ещё не учитывает макет

Create a wide landscape photograph of a handmade ceramic mug for a pottery studio website. Warm daylight, natural linen, tasteful editorial product photography. No text, logos or watermark. Save the generated image.

В запросе указаны материал и освещение, но не положение кружки. Помимо неё в кадре появились растение и сухоцветы. Само по себе изображение годится, но для нашего первого экрана кружку нужно уменьшить, а слева освободить место.

Редактирование: освобождаем место под заголовок

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

Edit the supplied generated mug image for a pottery website hero. Make a wide 3:2 landscape composition. Keep one recognizably matching cream speckled ceramic mug with the same brown unglazed foot and curved handle, the linen, warm daylight and natural photographic style. Reframe so the complete mug including handle sits in the right third and occupies at most 40% of the image width. Leave the left half a quiet light warm off-white surface with very little texture for a dark HTML heading to be added later. Remove the plant and dried flowers. No lettering, logos, border or watermark. The mug is a fictional design for an educational example.

После правки слегка изменились форма ручки и пропорции. Для вымышленной посуды это не страшно. С фотографией настоящего товара так нельзя: её пришлось бы исправлять до публикации. Инструкция «сохрани предмет» точного совпадения не гарантирует.

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

• Открыть пример: переключить исходный кадр и готовый баннер

Мобильная версия: когда нужен отдельный кадр

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

Edit this generated pottery hero into a portrait 2:3 mobile website image. Use the input image as the edit target. Keep a recognizably matching single cream speckled ceramic mug, brown unglazed foot, right handle, warm daylight, pale wall, wooden table and linen. Place the complete mug and handle in the lower half, comfortably inside both side edges. Keep the upper 40 percent quiet pale wall for dark HTML text to be added by the website. No plant, flowers, text, logos or watermark. Preserve the restrained photographic style. This is a fictional product for an educational website example.

Чтобы на разной ширине экрана показывать разные композиции, в вёрстке используют элемент picture с вариантами source. Если композиция одна, а меняется только размер файла, хватит srcset и sizes. В демонстрации варианты кадрирования можно переключать и сравнивать.

• Как браузер выбирает размер изображения: web.dev

Как продолжить серию в одном стиле

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

Create a new square editorial image for an educational pottery studio blog, using the supplied image ONLY as a style reference, not an edit target. Show a single shallow handmade ceramic bowl, cream speckled glaze with a brown unglazed foot, fully visible on natural linen over a wooden table, pale warm wall, soft window daylight, restrained warm neutral palette and quiet photographic texture matching the reference. Bowl in lower right area, simple upper left background, no other pottery, no plants, flowers, people, text, logos or watermark. The bowl is a fictional design, not a real product photograph.

Удачное изображение-образец сохраните вместе с коротким описанием стиля. В следующих запросах меняйте предмет, а требования к фону и свету оставляйте прежними. Картинки сравнивайте рядом: одно и то же слово «бежевый» в двух промптах ещё не значит, что оттенки совпадут.

Какие ошибки исправлять в промпте

• Предмет закрывает заголовок. Укажите, какая область должна остаться свободной и где относительно неё стоит объект.
• На фоне слишком много деталей. Назовите лишние предметы поимённо и попросите их убрать.
• Изменился сам товар. Вернитесь к исходному фото, разрешите править только фон и снова сверьте детали.
• Изображения не смотрятся серией. Возьмите один образец и повторите требования к свету, цветам и материалам.
• Правки перестали помогать. Вернитесь к последнему удачному кадру: дальнейшее редактирование не всегда улучшает результат.

Подготовка к публикации: размер, alt и подпись

После сохранения в WebP наши четыре файла занимают примерно 189, 89, 71 и 80 КиБ. Это размеры конкретных изображений при выбранных настройках сжатия, нормой для всех сайтов их считать не нужно. Проверьте, сохранились ли фактура и чёткие края. Для другого изображения могут потребоваться другие настройки.

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

Google рекомендует ставить изображения рядом с текстом, к которому они относятся, давать файлам понятные имена и писать в alt краткое описание, не набивая его ключевыми словами. Вывод из примера напишите ещё и обычным текстом. Тогда он будет понятен и тому, кто картинку не увидел.

• Рекомендации Google по изображениям

Проверка перед публикацией

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

• Как работать над сайтом в Codex

• Разработка сайтов в Neaptide