Create Responsive Image Candidates and Verify What the Browser Loads
Generate useful image widths, describe them with srcset and sizes, and inspect the actual downloaded candidate.
Content updated:
Measure the slot instead of the camera file
The relevant width is the space the image occupies in the page layout. A photograph may be displayed at 360 CSS pixels on a phone and 800 on a larger page. Density and page design affect how many source pixels are useful, so a single maximum-size upload is rarely a complete delivery strategy.
For an illustrative 800-pixel desktop slot, prepare an 800-pixel candidate and a 1600-pixel candidate from the same master. For a smaller slot, add another useful width. These are candidates to compare, not guaranteed sharpness settings for every image or device.
Generate independent outputs with consistent framing
Use Image Studio's Resize panel to create each width while preserving the aspect ratio. Return to the master between exports. Keep composition identical for a resolution-only set; changing the crop between candidates can make the image jump in appearance when the browser chooses a different file.
Export and record actual bytes for each candidate. Compare fine edges, gradients and the subject at intended display size. Quality values are encoder settings rather than a universal scale of visible quality, and an elaborate photograph may need a different setting from a clean diagram.
Describe the candidates in the page
With width descriptors, srcset identifies the available files and their actual pixel widths; sizes describes the expected layout width. The browser selects a candidate using those hints and its browsing conditions. Accurate markup matters: an exaggerated sizes value can encourage a needlessly large download.
If mobile requires a distinct crop rather than a smaller version of the same composition, use an art-direction approach such as picture. Creating a 720-pixel file in an editor does not make the website serve it automatically. The publishing system or page code must reference it.
Verify delivery as well as appearance
On a test page, inspect the rendered image width and the selected resource in the browser's Network panel. Compare a narrow and a wide viewport, and reload with the cache disabled while testing. Browsers may reuse an already-loaded larger candidate, so resizing one loaded tab is not a complete test.
Check the real file response and the visual result after any CDN processing. A reduction in image bytes is useful evidence, but it is not a measured improvement in total page speed. Page layout, other assets and network conditions also contribute; record those separately if measuring performance.
Produce and inspect a two-width image set
A guided exercise, not a benchmark. Inspect your own output; results depend on the source and settings.
- From the same master, export two proportional widths suitable for your page's actual slot.
- Record each file's pixel width and bytes, and compare the visible detail.
- Reference the files in the CMS's responsive image settings or page srcset and sizes markup.
- Inspect the selected resource in a narrow and a wide test page after a fresh reload.
The page references real candidate widths and loads an appropriate file while retaining the intended composition.
Sources & further reading
Try an idea and review your result before saving your edits.
