Images · THE NO-PANIC PLAN
Prepare a fast, responsive website hero image
Create the right image variants for your actual page layout, then help the browser download the appropriate one without layout jumps or unnecessary bytes. This guide covers asset preparation and front-end delivery; it does not guarantee a Core Web Vitals result, which also depends on the page, network, server and other resources.
MISSION prepare an accessible and performance-conscious hero image for a responsive web page
Start this workflowTHE REAL-WORLD BIT
What happens outside this browser tab?
Confirm image purpose and rights, map the layout?s target crops and widths, create controlled-size compressed variants, implement responsive markup and suitable loading/accessibility behavior, then test visual quality, selected bytes and real-page LCP.
YOUR CHECKLIST, WITH FEWER DRAMATIC SIGHES
One step at a time.
Follow the order below. If a step names a Nirmion tool, its link is right there with it.
- 01
Confirm the hero image?s purpose and authorized source
Identify the page, hero container, CMS rules, target viewport range and the image?s purpose. Use an original, licensed or owner-authorized asset and retain its untouched source. Decide whether it communicates useful information or is decorative: an informative image needs concise context-specific alternative text; a decorative image normally uses an empty alt attribute. Avoid putting essential text only inside the image. Record the current desktop/mobile appearance and image transfer size as a baseline.
- 02
Plan responsive widths and any separate mobile crop
Measure the rendered hero slot at real layout breakpoints and account for high-density displays. Select a small set of source widths that cover the largest rendered slot without upscaling; use `srcset` with `sizes` when the same composition can scale. If the mobile design needs a different composition or focal crop, prepare an art-directed variant and use responsive `<picture>` sources. Preserve the intended focal point and avoid forced aspect-ratio stretching. Decide which format and fallback your site/CMS supports.
- 03
Create and compare appropriately sized image variants
Keep the original master, then use Nirmion Image Resizer ID 97 to produce the required pixel dimensions without enlarging a smaller source. Use Nirmion Image Compressor ID 96 to compare quality and supported output formats while lowering file size; inspect fine details, gradients, text edges and color before accepting a setting. Both tools process in the browser, and the workflow needs only an authorized public/company asset. Name output variants by clear width/crop (for example, `hero-800` and `hero-1600`) and record dimensions, format and byte size. Do not assume the smallest file looks acceptable or that format conversion alone solves delivery performance.
- 04
Implement responsive, stable and accessible delivery
For one composition, provide accurate `srcset` width descriptors plus a `sizes` value that matches the actual CSS slot; for separate crops, use `<picture>` and an appropriate fallback. Set intrinsic `width` and `height` so the browser reserves space and content does not jump. Give informative imagery concise purpose-based alt text; use `alt=""` only when the image is decorative or redundant. If the hero is above the fold, do not lazy-load it. Set `fetchpriority="high"` only when this image is truly the page?s LCP element; do not preload or prioritize every image. Keep below-the-fold images eligible for lazy loading.
- 05
Test the rendered page and revise from evidence
Check the page at representative narrow and wide viewports: focal subject, crop, sharpness, color, text overlay contrast, alt behavior, and whether the browser selects the expected candidate. Confirm width/height prevents layout movement and compare transfer size with the baseline in browser network tools. Run Lighthouse or another suitable lab check, identify the LCP element and image load/render timing, and compare with real-user field data when available. web.dev?s current good LCP threshold is 2.5 seconds or less at the 75th percentile, segmented by device; an image-only change cannot guarantee that score because server response, discovery delay and other resources also affect LCP. If quality, crop or loading regresses, adjust variants and markup and retest.
THE HELPER CREW
Tools for the fiddly bits.
These are the currently published Nirmion tools matched to this guide. Open a tool page for its accepted inputs and limits.
RECEIPTS, PLEASE
Sources & review notes
Each source is linked to the steps it supports. Open it to check its scope and current guidance.
Source checked 2026-10-04