Use both when you can: compression and format choice reduce the bytes in each image, while responsive delivery helps the browser download an image closer to the size it will display. They solve different parts of the transfer problem, so choosing one does not rule out the other.
What the two approaches change
| Approach | What changes | Primary benefit | Main trade-off |
|---|---|---|---|
| Compression and format choice | How image data is encoded, using a suitable format and lossy or lossless settings. | Fewer bytes for the selected image, if the quality and features remain acceptable. | Visual fidelity, format features, browser support, and encoder behavior vary. |
| Responsive image delivery | Which image dimensions the browser downloads from the available candidates. | Less chance of downloading an image much larger than its rendered slot needs. | You must generate and maintain variants and describe the layout sizes correctly. |
These techniques can be combined: create responsive size variants, then encode each one efficiently. Neither guarantees a fixed page-speed improvement; the result depends on the source image, encoding settings, dimensions, and what the browser would otherwise fetch. See web.dev’s image performance guidance.
As an Amazon Associate I earn from qualifying purchases.
Choose a format and compression level
Match the format to the image
Start with the image’s job and required features. Photographs, logos, transparent artwork, animation, and images that need lossless fidelity may call for different formats. Compare compression, visual quality, transparency, animation support, and browser requirements rather than assuming one format is best for every asset. MDN’s image format guide describes these format considerations.
Recommended Free Tools
WebP supports both lossy and lossless compression, as well as transparency. MDN reports that lossy WebP images average 25–35% smaller than JPEG images at visually similar compression levels, and that lossless WebP is typically 26% smaller than the same images in PNG. Those are averages and a typical reduction reported by MDN, respectively—not savings guaranteed for a particular image or site; MDN does not state a year for these figures on the cited page.
#1 Best Overall
Compare quality, not just file size
For lossy encoding, inspect representative images at the size readers will actually see. Try compression levels and compare the file-size reduction with visible degradation; stop increasing compression when artifacts or loss of detail become unacceptable. The best setting can differ between images, so there is no universal quality number that suits every site. web.dev recommends testing compression levels to find an acceptable balance between quality and file size.
Serve responsive image sizes
When an image’s rendered width varies with the viewport or layout, provide candidate widths with srcset and describe the expected display slot with sizes. The browser uses those hints to select a candidate. For example:
<img
src="/images/landscape-800.jpg"
srcset="/images/landscape-400.jpg 400w,
/images/landscape-800.jpg 800w,
/images/landscape-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="A mountain landscape">Here, the candidates advertise their pixel widths, while sizes says the image occupies the full viewport up to 600 pixels wide and otherwise a slot of 800 pixels. Adjust that description to match the actual layout: inaccurate slot information can undermine the browser’s choice. Generate widths suited to real display sizes rather than creating variants without a layout reason. See MDN’s responsive images guide.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Use picture for alternate formats or crops
Use <picture> with one or more <source> elements when you need alternate format sources or an art-directed crop at a breakpoint. Keep an <img> element inside as the fallback and provide its alternative text. For example, the browser can choose a supported WebP source and fall back to JPEG:
<picture>
<source
type="image/webp"
srcset="/images/landscape-800.webp 800w,
/images/landscape-1200.webp 1200w"
sizes="(max-width: 600px) 100vw, 800px">
<img
src="/images/landscape-800.jpg"
srcset="/images/landscape-400.jpg 400w,
/images/landscape-800.jpg 800w,
/images/landscape-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="A mountain landscape">
</picture>For art direction, use a media condition on a <source> to offer a different crop where appropriate, while retaining the fallback image. The MDN picture-element reference covers source alternatives and responsive image slots.
A practical decision process
- List image requirements. Identify whether each asset is a photograph, logo, transparent illustration, animation, or image requiring lossless fidelity, and note any browser-support requirements.
- Test encoding on representative files. Compare suitable formats and lossy or lossless settings; inspect visual results at the rendered size and record bytes as well as quality.
- Map the rendered slots. Check how wide each image appears across relevant layouts, then create a small set of useful width variants where the slot changes materially.
- Describe candidates in HTML. Use width-descriptor
srcsetand accuratesizes; use<picture>and<source>only where alternate formats or crops are needed, with an appropriate<img>fallback. - Recheck the delivered result. Confirm that the image looks acceptable and that the browser is offered candidates that fit the layout. When changing formats, test compatibility for the browsers your site supports.
Check the rendered page with a screenshot
A screenshot can help you review how optimized images appear in a rendered page—for example, whether a crop or compression artifact is noticeable. It does not tell you which source file or number of bytes the browser downloaded, so use browser developer tools or your own image measurements for transfer-size verification.
Or skip the browser setup
For a visual capture of a page after your change, make one GET request to ScreenshotNeo; its API documentation lists the request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for the free plan.
Which approach should you choose?
If you are deciding where to start, choose based on the problem you can observe: test compression and format when an image’s encoded file is too large; add responsive variants when the browser is being offered an image much larger than its display slot. Many sites benefit from both. Test representative assets and judge bytes, visible quality, required features, compatibility, and the work needed to maintain variants together. For a concise explanation of the underlying concepts, see MDN’s guide to lossy and lossless compression.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
