Web & screens
Image pixels vs CSS pixels: size a sharp web image deliberately
Understand source dimensions, displayed CSS size and density targets without confusing high-density web delivery with print PPI.
A 1200-pixel-wide source displayed at 600 CSS pixels supplies two source pixels per CSS pixel along that axis. This is separate from print PPI metadata.
Identify the three measurements
The source image has a width and height in image pixels. The layout gives it a displayed size in CSS pixels. The device renders that layout on its native display grid. These quantities are related, but they are not interchangeable.
For example, an image can be 1200 × 800 pixels in the file and displayed at 600 × 400 CSS pixels. The source-to-layout ratio is two along each axis. Calling the file “300 DPI” does not specify those layout dimensions or ensure an appropriate delivery size.
Plan from the rendered slot
Start with the largest expected CSS size of the image in your design, then choose appropriate source variants for the intended density targets. A 600 × 400 CSS slot at a two-times target corresponds to 1200 × 800 source pixels. At a three-times target it corresponds to 1800 × 1200.
Those targets are planning choices rather than universal requirements. A larger file increases the number of pixels available, but the original detail, compression, bandwidth and browser’s selection all matter. Simply upscaling a small image does not establish equivalent sharpness.
| Planning target | Source dimensions | Pixel count |
|---|---|---|
| 1× | 600 × 400 | 240,000 |
| 2× | 1200 × 800 | 960,000 |
| 3× | 1800 × 1200 | 2,160,000 |
Keep shape and responsive layout together
A source with a 3:2 ratio fits a 600 × 400 slot without changing shape. A square slot needs a crop or unused space. If the design changes shape between narrow and wide screens, inspect the important image content in both layouts instead of assuming a centered crop is always safe.
A width expressed in viewport units changes with the viewport. A 40 vw slot is 576 CSS pixels wide on a 1440-pixel viewport but 156 on a 390-pixel viewport, before any other layout constraints. A single conversion is a snapshot, not a complete responsive rule.
Do not confuse font units with image resolution
If the slot is sized using rem, the root font is part of the calculation. A width of 30 rem is 480 CSS pixels at a 16-pixel root size and 600 CSS pixels at a 20-pixel root size. An em length depends on its property and reference font; enter the correct reference when converting.
User font settings, zoom and responsive constraints can change the actual rendered size. Use browser developer tools to inspect it and test with enlarged text. The CSS unit converter calculates equivalent lengths for supplied references, not the complete result of a stylesheet.
Verify in the actual page
Check the rendered dimensions, the source file actually selected and the visible crop at representative viewport sizes. Review the result on the intended displays where possible. A high source-to-CSS ratio is not a substitute for checking a blurred or overcompressed original.
For physical prints, return to the source pixel dimensions and the intended inches instead. Web-density targets and image PPI answer different questions. Our print converter and CSS converter keep those contexts separate so that one result is not accidentally reused as the other.
Sources & further reading
These references support the definitions. The calculations and examples in this article are original; printer-specific requirements must be checked with your provider.
Our editorial and correction policy →Try it with your numbers
CSS Unit Converter
Convert px, rem, em, pt, vw and vh with your own font sizes and viewport dimensions. See every equivalent and share the assumptions.
Open the calculator →