AI Website Hero Images: Brief, Crop and Speed

AI website hero images are the large pictures at the top of a page that set the mood before anyone reads a word. An assistant with image generation can produce many options in minutes, which is a real gain for a small site without a photographer. The risk is that a striking image fails in practice: the headline is unreadable on top of it, the crop cuts off the subject on a phone, or the file is so heavy that the page loads slowly.

This guide covers the whole path for AI website hero images: writing a brief, leaving space for text, cropping for desktop and phone, compressing for speed, adding alternative text and checking usage rights. It is written for site owners, marketers and designers who want an image that works on the page and not only in a preview.

What AI website hero images have to do

A hero image is a large visual placed prominently at the top of a web page, usually with a headline and a button on or beside it. It has three jobs. It sets the tone, it supports the message and it loads fast enough that visitors do not leave. A beautiful image that does only the first job is a decoration.

Start by deciding what the image should say. A page for a bakery might need warmth and freshness. A page for a software product might need clarity and calm. A page for a law firm might need trust and steadiness. When you know the feeling, you can describe it, and the description is the foundation of a good prompt.

Job	Question to ask	Common failure
Set the tone	What should a visitor feel in the first second?	A generic image that fits any company
Support the message	Does the picture relate to the headline?	A pretty scene that has nothing to do with the offer
Leave room for text	Where will the headline and button sit?	A busy centre where the words are unreadable
Work on every screen	Does the crop still make sense on a phone?	The subject cut off or tiny on mobile
Load quickly	How large is the file?	A multi-megabyte image that slows the page

Write a brief before you write a prompt

The best prompts come from a short brief. Spend five minutes writing it down, because it keeps you from endless random attempts. A brief for AI website hero images has six parts.

Purpose: the page and the action you want visitors to take.
Audience: who they are and what they expect to see.
Subject: the main thing in the picture, such as a workshop table, a city street or an abstract shape.
Style: photographic, illustrated, flat, soft or high contrast, with a colour palette taken from your brand.
Composition: where the subject sits, and which area must stay calm for text.
Exclusions: things to avoid, such as people’s faces, logos, text in the image or clichés like handshakes.

Then turn the brief into a prompt: “Wide photograph of a baker’s wooden table with fresh bread in warm morning light, soft focus background, subject placed on the right third, large calm empty area on the left for a headline, muted warm palette, no text, no logos, no people.” Compare several results, and ask for variations of the best one rather than starting over. Our guide to AI image prompts that work gives more patterns, and the article on consistent AI images in a brand style shows how to keep a series looking related.

Plan space for the headline

The most common reason a hero image fails is that the text cannot be read. Text needs calm, even areas with enough contrast, and a photograph with detail everywhere does not provide them. Decide where the headline will go before you generate, and ask for that area to be simple.

Use the rule of thirds. Place the subject on one side and keep the other side open.
Ask for soft or blurred areas. A shallow depth of field naturally creates room for words.
Add an overlay if needed. A semi-transparent dark or light layer behind the text raises contrast without changing the image.
Check contrast on the real page. Text on an image should be easy to read for everyone, including people with low vision.
Avoid text inside the image. Generated lettering is often misspelled, and text baked into a picture cannot be translated or read by assistive technology.

If you design for several languages, remember that headlines vary in length. A German or Finnish headline can be much longer than the English one, and the space should be able to hold it. The accessibility side is covered in more detail in our guide to the AI accessibility checker.

Size and crop for desktop and phone

A hero image appears in very different shapes: a wide band on a desktop monitor, a tall block on a phone. If you generate one wide picture and let the page crop it automatically, the subject may end up cut off. Plan for both from the start. This is a core idea of responsive web design, where a page adapts to the screen.

A practical approach is to generate a wide image, such as three to two or sixteen to nine, with the subject safely inside the centre area. Then prepare a second crop for phones, such as four to five or square, from the same source. Ask the image tool for extra space around the subject so the crops have room. The article on AI image sizes and aspect ratios lists common ratios and what they suit.

Use	Typical ratio	Notes
Desktop hero band	16:9 or wider	Keep the subject away from the outer edges
Tablet	3:2 or 4:3	Check that the headline area still works
Phone hero	4:5 or 1:1	Crop tighter on the subject, and keep text short
Social sharing preview	About 1.91:1	Test how the image looks when the page is shared

Generate at a higher resolution than you display, so that a sharp version exists for large and high-density screens. Then export the sizes you need, instead of sending the largest file to every visitor.

Compress for speed

The hero image is often the largest item on a page, and a heavy one can slow down the first view and hurt the experience. Search engines and visitors both notice slow pages, and the topic of web performance is large enough to deserve its own study. A few practical steps make a major difference.

Choose a modern format. WebP or AVIF files are usually much smaller than JPEG at similar quality, and JPEG is a safe fallback.
Compress carefully. Image compression reduces size by removing detail, so increase it until you see a flaw, then step back.
Serve several sizes. Offer a smaller file to phones and a larger one to wide screens, using responsive image attributes.
Do not lazy-load the hero. It is the first thing visitors see, so it should load straight away, while images lower on the page can wait.
Set width and height. Reserving the space prevents the page from jumping as the image appears.
Test on a real phone. A throttled connection shows what many visitors experience.

As a rough aim, many sites try to keep the hero file in the low hundreds of kilobytes, but the right number depends on the design and the audience. What matters is that you measure, and that you compare the page before and after the change.

Alternative text and meaning

Every meaningful image on a page needs a text alternative, so that people who cannot see it, and search engines, know what it shows. The alt attribute is the standard way. Describe what the image contributes to the page, not every pixel. A hero that is purely decorative can have an empty alt attribute so that screen readers skip it.

Write one clear sentence: “Fresh loaves on a wooden bakery table in morning light”.
Do not start with “image of” or “picture of”.
Include the page topic naturally, without stuffing keywords.
If the hero carries information, such as a chart, repeat that information in the page text.

An assistant can draft alt text for you, and you should read it for accuracy. It sometimes describes things that are not in the picture, which defeats the purpose.

Rights, honesty and brand fit

Before you publish a generated image, check the terms of the tool you used. Some allow commercial use freely, others have conditions, and rules about who owns generated images are still developing in many countries. Our guide to AI image licensing and rights explains the questions to ask, and the article on AI watermarks and content provenance covers labels that some tools add.

Be honest about what the image shows. A generated picture of a “team at work” suggests real people, and a generated picture of a product that does not look like the real thing can mislead customers. If the image represents your actual shop, staff or product, use real photographs. If it is an illustration or an atmosphere, an AI image is fine, and a short note in the page or the credits can be a good habit.

Finally, check the image against your brand. Colours, style and subject should match the rest of the site. A hero that looks as if it came from a different company breaks trust more than it attracts attention.

Making hero images with Mio

Mio includes Design mode on the Design and Business plans, which creates images from a description, and the plans include a monthly allowance of images. An image costs more points than a text reply, so test your prompts with a few variations before you commit to a full set. Chat and Write on every plan, including the free one, help with the brief, the prompt wording, the alt text and the headline itself. Mio picks the model for each request, so you do not have to.

Chats and files are your own, they are not used to train models and you can export or delete them at any time. Use a project to keep your brand colours, style words and exclusions in one place, and every new chat starts with them. The overview of AI image generators compares what different approaches can and cannot do.

A launch checklist for hero images

The image matches the page message and the brand.
There is a calm area for the headline, and contrast has been checked.
The subject survives the phone crop.
The file is compressed, in a modern format, and sized for each screen.
The hero is not lazy-loaded, and width and height are set.
The alt text is written and accurate.
The usage rights have been checked and recorded.
The page has been tested on a real phone and on a slow connection.

Frequently Asked Questions

What size should a website hero image be?

There is no single size. A common starting point is a wide image of around 1920 to 2400 pixels, with a phone version cropped tighter. Display size, screen density and design all matter. Prepare several sizes, serve the smallest one that looks sharp and test on real devices before you decide.

Can I put text inside an AI-generated hero image?

It is better not to. Generated lettering is often wrong, and text inside a picture cannot be translated, resized or read by screen readers. Place your headline in the page as real text on top of the image, and make sure the contrast is high enough to read comfortably.

How do I stop a hero image from slowing my page?

Use a modern format such as WebP or AVIF, compress it carefully, serve different sizes to different screens, set width and height so the layout does not jump, and avoid lazy-loading the hero. Then measure the page on a phone and a slow connection and adjust until it feels quick.

Do I need alt text for a decorative hero?

If the image is purely decorative, an empty alt attribute tells screen readers to skip it. If it carries meaning or supports the message, write a short, accurate description of what it shows. Review any alt text drafted by an assistant, because it can describe details that are not in the picture.

Can I use AI-generated images commercially?

It depends on the tool’s terms and on the rules in your country, which are still changing. Read the terms of the service you used, keep a record of how the image was made and avoid using it where it could mislead people. For important brand assets, ask a legal adviser.

The Bottom Line

AI website hero images work when you plan them: a clear brief, space for the headline, crops for each screen, careful compression, honest alt text and checked rights. Generate several options, pick the one that supports the message and test it on a real phone before it goes live. To try it, start on the free plan for the brief and wording, and compare plans with Design mode on the Ask Mio pricing page.

AI Website Hero Images: Brief, Crop and Speed Checks