How many pixels are stored?
Example: 1600 × 900 px. This is the intrinsic raster size of the file.
32076812001920
WEB IMAGE BLUEPRINT
There is no single “best image size” for a website.
The correct source depends on the slot, responsive layout, screen density and the image itself. Treat pixel dimensions, display dimensions and file weight as three separate decisions.
How large is it shown?
A 1600 px source might be rendered at 800 CSS pixels wide on the page.
How many bytes are downloaded?
Format, compression and content complexity affect KB or MB independently of dimensions.
START WITH THE LAYOUT
Choose dimensions from the place the image will occupy.
These are working ranges, not platform laws. Your theme and layout still decide the real requirement.
FULL-WIDTH HERO
often 1600–2400 px wideLarge visual area
Use a source large enough for the maximum rendered width and high-density displays, then let responsive markup serve smaller versions where possible.
Article column
If the column peaks around 760 px, a source around 1200–1600 px can leave room for denser displays without shipping a giant master everywhere.
layout dependentRepeated small image
Do not send a 3000 px original into every 320 px card. Generate a purpose-sized derivative.
match the card familyPrefer vector when possible
SVG avoids the usual raster sizing problem for simple vector artwork and UI graphics.
vector first
RESPONSIVE IMAGES
One image slot can need several source files.
HTML can expose multiple image candidates through srcset and describe expected layout width through sizes. The browser then chooses an appropriate resource for the viewport and device conditions.
same subject
640w→1280w→1920w
Different files. One visual role.
This is more efficient than forcing every visitor to download the largest source, and sharper than stretching a tiny derivative into a wide slot.
PIXEL DENSITY
600 CSS pixels can ask for more than 600 source pixels.
VISIBLE SLOT600 CSS px
×
2× DISPLAYDPR 2
≈
USEFUL SOURCE1200 px
That does not mean every 600 px slot must always download a 1200 px file. It illustrates why a source that matches only the CSS width can look softer on a high-density display.
DIMENSIONS ≠ FILE SIZE
A smaller image can still be a heavy file.
Pixel dimensions tell you how many samples the image contains. File weight depends on encoding, compression, color information and visual complexity. A detailed PNG can weigh more than a larger photographic WebP.
WORKFLOW
Prepare the slot before you prepare the file.
Measure the maximum rendered width
Inspect the real layout, not the image file. A content column, card and hero have different needs.
Decide whether composition changes
If mobile needs a tighter crop, create that crop intentionally instead of relying on accidental overflow.
Create sensible source widths
Generate a small family of useful dimensions rather than dozens of near-identical files.
Choose the format after the content
Photograph, screenshot and transparent graphic do not compress the same way.
Check the rendered page
Quality should be judged in the actual layout on more than one screen size.
PRIMARY REFERENCES
Responsive image behavior is defined by the browser, not by a magic width.
- MDN · Responsive images
srcset,sizes, intrinsic dimensions and resolution switching. - web.dev · Descriptive responsive imagesServing image resources according to layout and display needs.
- MDN · Image file typesFormat choice, compression and transparency tradeoffs.