QUICK ANSWER
What you should remember
- Export to the largest size the layout actually displays, not the generator maximum.
- Use WebP or AVIF where appropriate and keep a high-quality original outside the website.
- Declare width and height, provide responsive candidates and lazy-load non-hero images.
- Write alt text for the image’s purpose in context and disclose synthetic imagery when it matters.
Why generated images often arrive too large
Image generators optimize for visual output and editing flexibility, not for the width of a card on a slow mobile connection.
A square 2048-pixel PNG can be useful as a master asset, but sending it into a 360-pixel card wastes data and decoding work. Keep that master safely, then create website derivatives based on the actual layout.
Optimization is not one magic quality percentage. It combines crop, dimensions, format, compression, responsive delivery and correct HTML dimensions.
A repeatable image workflow
Make each decision in order so later compression is not asked to solve an earlier sizing problem.
- Choose the crop
Match the content slot: wide hero, landscape article, square card or portrait lesson art.
- Resize to real display needs
Export roughly the largest rendered width needed, plus a smaller candidate for narrow screens.
- Choose a format
Use JPEG, WebP or AVIF for photographic imagery; PNG for transparency or pixel-perfect graphics; SVG for suitable vector artwork.
- Compress while comparing
Inspect faces, text, gradients and fine edges. Stop when the smaller file introduces distracting artifacts.
- Add responsive HTML
Use srcset and sizes so the browser can choose an appropriate candidate.
- Add dimensions and meaning
Declare width and height to reserve space and write context-aware alternative text.
Example: one huge PNG versus responsive delivery
The optimized markup gives the browser useful choices and reserves the image’s aspect ratio before download.
<img src="ai-market-2048.png"
alt="image"><img
src="market-800.webp"
srcset="market-480.webp 480w,
market-800.webp 800w,
market-1200.webp 1200w"
sizes="(max-width: 640px) 92vw, 760px"
width="1200" height="800"
loading="lazy"
alt="Vendors arranging fruit at an outdoor market">Do not lazy-load the main above-the-fold image automatically; it may be the page’s largest visible element. For article images below the opening viewport, lazy loading can avoid unnecessary initial transfers.
Choose a format based on the image
Keep the choice practical and test it with the actual asset.
| Format | Good use | Watch for |
|---|---|---|
| AVIF | Very small photographic and generated art derivatives | Encoding time and detail loss at aggressive settings |
| WebP | Broadly useful photographic images and transparency | Compare gradients, faces and text after compression |
| JPEG | Simple photographic fallback and established workflows | No transparency; repeated saves compound loss |
| PNG | Transparency, screenshots and crisp limited-color graphics | Photographic generator output can become extremely large |
| SVG | Logos, diagrams and genuine vector art | Do not automatically trace detailed generated paintings |
Describe purpose, not pixels or provenance alone
Alt text depends on what the image contributes to the surrounding page.
- Use an empty alt attribute for purely decorative images so assistive technology can skip them.
- Describe information a reader would otherwise miss, not every visual detail.
- Do not begin with “image of”; the element already communicates that it is an image.
- If synthetic imagery could mislead a reader about a person, place, product or event, disclose that visibly in the caption or nearby text rather than hiding it only in alt text.
- Never use generated imagery as evidence that a real event occurred.
Use these tools with the workflow
Each link opens an existing HTMLOnline tool or course that supports a specific part of the review.
Standards and primary references
These references support the standards and product-capability statements in this guide. Our workflows and examples are original.
- Responsive imagesWHATWG HTML Standard
- Alt text decision treeW3C Web Accessibility Initiative
- Choose the right image formatweb.dev
Frequently asked questions
What format is best for AI-generated images?
There is no universal winner. WebP and AVIF often reduce photographic artwork well; PNG suits transparency and crisp graphics. Compare the real image at its real display size.
Should I upload the maximum-resolution generated image?
Keep it as a master, but serve resized derivatives appropriate to the layout. A phone card rarely needs a multi-thousand-pixel source.
Do AI-generated images need alt text?
Their origin does not decide the alt text. Describe the image’s purpose in context, or use empty alt text when it is purely decorative.