By CutImage · Updated
Start with where the image will appear. A photo displayed at 800 CSS pixels wide rarely needs the full 6,000-pixel width of a camera original. Serving fewer pixels can reduce transfer size and decoding work, but the appropriate width depends on layout and display density.
1. Choose dimensions from the layout
For an image displayed at 600 CSS pixels wide, a 1,200-pixel source provides two source pixels per CSS pixel on a display with a device pixel ratio of two. This is a planning example, not a requirement for every screen. If you control the website markup, offer multiple source widths so the browser can choose.
| Displayed width | 1× source | 2× source |
|---|---|---|
| 300 CSS px | 300 × 225 px | 600 × 450 px |
| 600 CSS px | 600 × 450 px | 1,200 × 900 px |
| 900 CSS px | 900 × 675 px | 1,800 × 1,350 px |
2. Preserve the aspect ratio
Take a 4,000 × 3,000 photo. Its width-to-height ratio is 4:3. Set the width to 1,200 in the resizer with the aspect ratio locked: 3,000 × (1,200 ÷ 4,000) = 900 pixels high. Forcing the same image to 1,200 × 600 stretches it. If you need a different shape, crop the composition first.
3. Resize once, then choose the encoding
Work from the original and create each size from that source. Repeated JPEG saves can accumulate compression artifacts. In CutImage, choose Exact Dimensions, set the width, keep the ratio locked, and select Resize. Check the downloaded dimensions. Then use the compressor if the output still exceeds your byte budget.
Resizing and compression answer different questions: how many pixels the file contains and how those pixels are encoded. A PNG screenshot may still be large after resizing, while a smaller JPEG may blur fine text. Inspect the actual result instead of judging by the extension alone.
4. Deliver the right size on your website
If you publish your own HTML, provide width candidates and reserve the layout space. This example assumes you have actually created both files:
<img src="photo-600.webp"
srcset="photo-600.webp 600w, photo-1200.webp 1200w"
sizes="(max-width: 640px) 100vw, 600px"
width="1200" height="900"
alt="A blue ceramic cup on a wooden table">Match sizes to your real CSS layout. Avoid lazy-loading an image that is immediately visible and central to the page. Use lazy loading for images farther down the document when appropriate.
5. Check the result at its intended size
- Inspect thin lines, text and skin tones.
- Check that the subject is not stretched.
- Keep transparent graphics in PNG or WebP when alpha is needed.
- Keep the original: upscaling an export does not recreate discarded detail.
CutImage exports new pixel data through Canvas. Do not rely on it to retain EXIF, print-resolution metadata or an embedded color profile. For format decisions, continue with the JPEG, PNG and WebP guide.
Further reading: MDN’s responsive image guide.