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

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

В запросе к генератору укажите назначение изображения, предмет, его положение, освещение и ограничения. Затем проверьте результат в макете с настоящим заголовком на широком и узком экране. После правок подготовьте файл для загрузки на сайт, подпись и текстовое описание 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