AI & MCP
Prompts for product images: structure, review and file weight
A prompt for product images lists subject, light, framing and background, then goes through human review: a generated photo is an illustration.
Key points
- Five fixed fields, one per prompt: subject, light, framing, background and exclusions.
- The 1200×630 cover PNG weighs 69,904 bytes on average across 578 files, measured on 1 November 2026.
- A generated image needs human approval and a label next to the product photo.
A prompt for product images is a list of constraints: subject, light, framing, background and format. The model does not know your product, so every detail you leave out it invents.
Five fields, always the same
- Subject: “a matte white ceramic mug”, not “a nice mug”.
- Light: softbox at 45 degrees from the left, short shadow on the right.
- Framing: 4:5 vertical, product filling 70% of the height.
- Background: neutral grey
#f2f2f2, no objects. - Exclusions: no text, no invented logos, no specular highlights.
The full prompt
| Field | Text to write |
|---|---|
| Subject | matte white ceramic mug, handle on the right, front view |
| Light | softbox at 45° from the left, short shadow on the right, no specular highlight |
| Framing | 4:5 vertical, product centred, 70% of the height |
| Background | neutral grey #f2f2f2, even |
| Exclusions | text, logos, watermark, hands, other objects |
| Output | PNG 1600×2000 |
Reuse the same block for the whole category and change only the first line. A different prompt per product produces different light and framing, and the grid looks like a collage.
From PNG to WebP
npm i sharp
node -e "require('sharp')('raw.png').resize(1200, 1500, { fit: 'cover' }).webp({ quality: 80 }).toFile('product.webp')"The 4:5 crop happens at build time, not by hand: 1200×1500 pixels cover a large card and half a retina screen. Keep the original PNG as the source and serve only the WebP; AVIF is lighter but needs a fallback for browsers that cannot read it.
The review
- Recognition: shape and colour must match the real product.
- Details: handle, seams and logo must not change between two generations.
- Disclosure: a generated image is labelled next to the photo, not passed off as a shot.
- Rejection: if the model gets the colour wrong, reshoot; do not hand-fix a product that does not exist.
The weight on a grid
Our 1200×630 covers weigh 69,904 bytes on average: a grid of 24 items reaches 1.7 MB of images alone. The 1200×1500 crop raises the bill, so lazy loading is not a detail but the difference between a page that opens and one that waits.
The limitation
An image model cannot guarantee fidelity to the product: colour, finish and proportions can change between two generations, and a feature that promises “generated product photos” fails at the first return. You need a person to approve every image and a real photograph as reference; we have no automatic similarity score.
Where to continue
The comparison between AVIF and WebP shows when the fallback is needed, the cost of loading everything at once is in lazy loading: when not to, the product page is in product page SEO. To render the images you can use the product card or shadcnblocks gallery4, inside gallery components and 111,985 components.
Frequently asked questions
Does every product need an image model?
No. A photograph stays mandatory for the item you sell, because it must show the real unit. The model earns its place on lifestyle variants, category illustrations and seasonal images, where nobody compares pixels with the box.
How do I keep a category consistent?
Lock light, framing and background in one block and change only the subject line. Keep one output format too: if a card is 4:5, every image starts at 4:5.
Can generated images go on the product page?
Only with human approval and a visible label. The image must not imply it is a photo of the shipped unit; a wrong colour still ends in a return.
Why 4:5 instead of 1:1?
4:5 fills a vertical card on a phone, while 1:1 leaves empty bands. Pick one ratio for the catalogue and write it in the prompt: changing it later means regenerating or cropping everything.
How heavy is a grid of images?
Our 1200×630 covers weigh 69,904 bytes on average, measured on 1 November 2026: 24 images make 1.7 MB. At 1200×1500 the total grows, so you need WebP, lazy loading and declared dimensions.