Responsive Image Sizes: Stop Sending One Huge File Everywhere
Plan image variants for different layouts and understand how compression fits into responsive delivery without confusing file creation with browser selection.
Separate the source from the delivery asset
A high-resolution master gives you room to edit and crop. A delivery image serves a specific placement. A narrow mobile card, a desktop article image, and an enlarged gallery view do not necessarily need the same derivative. Keeping those roles separate makes optimization easier to manage.
A browser receiving a huge file and displaying it in a small box still has to deal with the delivered resource. Merely changing the CSS display width is not the same as exporting and serving a smaller file.
Map the actual placements
Inspect the design and list the image slots that matter. Record whether each slot changes width, crops the image, or opens a larger view. Use your platform’s image guidance and the layout itself rather than borrowing a universal pixel number from an unrelated website.
As an example, a content system might need a compact card copy and a wider article copy. The exact widths should follow that design. Screen density and layout behavior can also affect appropriate source resolution, so a visible width is a starting point rather than a complete rule.
Work through one image slot
Suppose an image occupies a 360-CSS-pixel slot. A 720-pixel-wide source can provide two source pixels per CSS pixel on a 2× display. This is a sizing example, not a universal requirement; a wider layout or a different display density changes the candidate size.
Create the candidate from the master and configure the site to use it for the appropriate slot. Inspect the resource the browser actually requests. If it still downloads the large master, changing the export alone has not changed delivery. CorvexsDigital creates the files; your CMS or markup controls their selection.
Create variants from a common master
Use CorvexsDigital to create derivatives at chosen maximum widths. Keep the aspect ratio consistent when that is what the design requires. If different placements need different crops, prepare those compositions separately in an editor first.
Name files by content and intended variant, such as workshop-table-card and workshop-table-article. Record output dimensions with the files. When you later replace a master, that record helps you recreate the necessary derivatives instead of guessing what the old filenames meant.
Let the website choose appropriately
Responsive image markup can describe alternative image sources and their intended sizes. Many content platforms generate and manage variants automatically. Before manually exporting a large set, find out what your platform already does and how its configuration affects delivery.
CorvexsDigital does not write your image markup or inspect the network requests made by your website. After uploading variants, confirm that the page actually uses them. Generating smaller files has no delivery benefit if every screen still requests the original.
Keep layout stable while images load
Plan space for each image in the layout so surrounding content does not unexpectedly move as it appears. Width and height information or an appropriate aspect-ratio layout can help. This is a page implementation concern that compression alone does not solve.
Also distinguish prominent images from content farther down a page when considering loading behavior. Use platform and browser guidance for the actual implementation rather than applying the same setting to every image without testing.
Validate one page end to end
Check the published page in representative layouts and inspect which resources are delivered using appropriate developer tools. Confirm visual quality and useful dimensions as well as byte size. Responsive delivery is successful when visitors receive an appropriate asset, not merely when a folder contains many versions of it.
Questions & answers
Does CorvexsDigital generate srcset code?
No. It exports one size at a time. Your website or CMS must deliver the appropriate variants through its image markup or image service.
Should the largest image be lazy-loaded?
An image visible immediately may need prompt loading. Use lazy loading for suitable images below the initial viewport, and measure the page rather than applying it blindly.
Your next step
Create only the variants your layout needs, then verify which resource the browser requests at different viewport sizes.
Put this guide into practice
What changed on 7 October 2026
Added a display-density sizing example and a check of the delivered resource.
Sources & further reading
Published by CorvexsDigital. Prepared with AI assistance; no independent human testing or professional certification is implied. Examples are illustrative unless identified otherwise. Read our editorial policy or report a correction.