Maintained by Image Reshaper · Updated
How to Optimize Images for Website Speed
Image weight is usually the largest part of a page. Here is how to size, format, and compress images so pages load fast on mobile networks.
Send only the pixels your layout can use
Resize an image to suit its largest rendered size and expected display density, then compare JPG and WebP output. Use PNG where lossless edges or compatibility matter. A smaller encoded file reduces transfer bytes, but it does not by itself prove a faster page or passing Core Web Vitals.
A 600 CSS-pixel slot may benefit from a 1200-pixel source on a 2× display. That is a layout decision, not a universal size recommendation. Avoid serving a huge camera original to every screen.
Optimize and measure the real page
The examples below compare our actual browser encodings. These are local fixture results, not network-speed measurements or forecasts for your site.
Declare image width and height in your page to reserve space. Use responsive image sizes for different layouts. Do not lazy-load the main above-the-fold image simply to reduce initial requests.
- Resize a copy to the display dimensions you need.
- Convert to WebP or JPG and inspect the result; keep transparency if required.
- Compare output bytes and visual quality, not the quality number alone.
- Install the image, then measure the page on a mobile connection and review field performance when available.
Try our measured examples
Created and tested on 2026-10-06 in Chrome 154.0.8037.98. These images were generated by this project. Results vary with source content and browser encoder; no camera photograph was used.
| Example | Original bytes | Output bytes | Dimensions | Quality |
|---|---|---|---|---|
| texture-80.jpg | 2,457,363 | 463,140 | 1200 × 800 | 80% |
| texture-80.png | 2,457,363 | 2,457,363 | 1200 × 800 | Not applicable |
| texture-80.webp | 2,457,363 | 472,872 | 1200 × 800 | 80% |
| graphic-80.jpg | 38,173 | 22,329 | 1200 × 800 | 80% |
| graphic-80.png | 38,173 | 38,173 | 1200 × 800 | Not applicable |
| graphic-80.webp | 38,173 | 8,442 | 1200 × 800 | 80% |
| transparent-80.jpg | 38,158 | 22,310 | 1200 × 800 | 80% |
| transparent-80.png | 38,158 | 38,158 | 1200 × 800 | Not applicable |
| transparent-80.webp | 38,158 | 8,554 | 1200 × 800 | 80% |
Download the originals: textured JPG, textured PNG, flat graphic, transparent graphic. Run them through the tool to compare your browser’s result.
Method: deterministic Canvas-generated 1200 × 800 sources, the production renderImage/compressToMaxBytes functions, quality 80 for format comparisons, and an automatic bounded search for byte targets. Resize examples export PNG. No measurements of network speed or field Core Web Vitals are implied.