PJHTech ImagesImage sizes for 1× and 2× screens
For a raster image displayed at 600 × 400 CSS pixels, a 1200 × 800 source provides two image pixels per CSS pixel in each direction. Changing its PPI metadata does not create those pixels.
Match the displayed size
| Display size (CSS pixels) | 1× source (pixels) | 2× source (pixels) |
|---|---|---|
| 320 × 180 | 320 × 180 | 640 × 360 |
| 600 × 400 | 600 × 400 | 1200 × 800 |
| 800 × 600 | 800 × 600 | 1600 × 1200 |
| 1200 × 675 | 1200 × 675 | 2400 × 1350 |
A 2× source has four times as many pixels, not necessarily four times the file size. Compression and image content affect the bytes.
Export from the original
- Find the largest size at which the image will be displayed.
- Keep its aspect ratio, or crop deliberately to the required shape.
- Export the required pixel dimensions from the original. Enlarging a small file cannot recover missing detail.
- Check the result at its actual display size.
For a website, responsive image candidates let the browser choose among available sizes. A single oversized file makes every visitor download the same bytes. Vector artwork can use SVG when the destination supports it.
Calculate matching dimensions · Inspect a local image