Keep a master and make a web delivery copy
Save the original image with its prompt and approval record. Create separate delivery files for the page's actual image area. This lets you change crops or compression later without repeatedly editing the only source file.
THE RENDER OFFICE currently returns PNG images in square, landscape, or portrait dimensions. A large source may be useful for finishing, but a small category card may need fewer pixels. The generation quality setting is not a substitute for preparing an appropriate web export.
Match delivered pixels to the layout
Check the image's displayed size across the actual layouts and device densities you support. Prepare suitable image variants where the site can serve them responsively. Reducing the CSS width alone does not reduce the bytes of the file being downloaded.
MDN documents how image source candidates and size information help browsers choose a suitable resource. The declared layout must match the real page; incorrect size information can make the browser select a less appropriate candidate.
Compare compression at the final viewing size
Export appropriate formats supported by the publishing workflow, then compare file size and appearance. Inspect gradients, fine texture, edges, and any accurate product details after compression. Keep transparency only when the layout actually needs it.
Choose the smallest suitable file that retains the required quality for the placement. There is no universal file-size target that proves an image is optimized. A tiny decorative card and a detailed product image have different jobs and should be reviewed accordingly.
| Field | Record | Review question |
|---|---|---|
| Placement | Actual page and image area | Does the crop serve this layout? |
| Source and export | Master filename and delivery variant | Can the export be reproduced? |
| Dimensions and bytes | Actual pixel size and file size | Is the delivered resource appropriate? |
| Visual review | Accepted quality at the intended size | Did compression remove important information? |
Reserve layout space and load by importance
Provide intrinsic width and height information so the browser can reserve the image's aspect ratio before it arrives. MDN explains how this reduces layout movement. Confirm that the final crop and CSS behavior agree with the reserved space.
Use lazy loading for suitable images that are not needed for the initial view. Do not apply it indiscriminately to the main image a visitor should see immediately. Check the actual page behavior rather than treating one loading attribute as a universal performance fix.
Give the image useful search and reader context
Place the image beside relevant text and choose a short, descriptive filename. Write alt text for the image's purpose in that page, avoiding keyword lists. Google describes filenames as a light clue and uses the surrounding page context to understand the subject; a filename alone does not establish relevance or ranking.
Check the published page's actual image requests, layout, accessibility, and performance with appropriate tools. Record the conditions and results before comparing versions. Faster delivery can improve the experience, but revenue still depends on the offer, audience, and complete conversion path.
Plan the source before the export.
Use the campaign workflow guide to decide what image you need, how it will be reviewed, and how the finished asset will be delivered.
Follow the campaign image workflow