BgImageA PictureEditor.com tool

Pixel sizes that actually matter

A background exists to be some exact number of pixels. Most of the frustration around making one comes from that number being decided last, by something else, after the design is finished.

Screens: four figures and a caveat

A screen background wants to match the panel it will be shown on, because any mismatch is resolved by resampling and resampling is the one step that costs quality for nothing. Four figures cover the overwhelming majority of panels in use.

Screen dimensions worth remembering
SizeMegapixelsWhere it turns up
1366 × 7681.0older and budget laptops
1920 × 10802.1most desktop monitors and laptops
2560 × 14403.7larger monitors, high-density laptops
3840 × 21608.3four-K displays and televisions

The caveat is scaling. An operating system running a display at a scale factor other than one will resample whatever you give it, and a phone will crop as well as scale because almost no handset is nine by sixteen any more. Matching the panel exactly removes one of those steps; nothing removes all of them.

Frames somebody else decided

A social or link-preview frame is not a design choice, it is a contract. The platform crops to its own proportion and shows the result at whatever size it likes, so the only question is whether your file arrives at the proportion it expects.

Frames that crop rather than scale
FrameSizeProportion
Link preview card1200 × 6301.91 : 1
Profile banner1500 × 5003 : 1
Upright story frame1080 × 19209 : 16
Square post1080 × 10801 : 1

Print, where a second number appears

A physical size is not a pixel size until a resolution joins it. The relation is one multiplication: pixels = millimetres ÷ 25.4 × dots per inch. Three hundred dots per inch is what most printing asks for; 150 is acceptable for something viewed at arm’s length; below that the pixels become visible as texture.

Common sheets at 300 dots per inch
SheetMillimetresPixels
A4210 × 2972480 × 3508
A5148 × 2101748 × 2480
A3297 × 4203508 × 4961
US Letter216 × 2792550 × 3300
6 × 4 print152 × 1021800 × 1200
Business card85 × 551004 × 650

When a larger file is only a larger file

Every extra pixel is paid for three times: in the drawing, in the encoding and in the bytes that travel. A background is the one kind of image where that spend usually buys nothing, because there is no detail in it to preserve — a ramp scaled down loses nothing a viewer can name.

The exception is grain. Noise is detail by definition, and a noise field downscaled by half is a different surface: the cells average together and the texture flattens. If a design leans on its grain, make it at the size it will be shown at rather than larger.

Above about thirty megapixels a browser stops allocating a canvas in one piece, and past a hundred it will not allocate one at all. Those are the real ceilings on this site, they are stated in the interface before an export starts rather than discovered during one, and almost nothing that is genuinely a background needs to go near them.

Questions about dimensions

Is there one size that covers everything?
No, and the attempt is what produces stretched banners and cropped link previews. What does cover a lot of ground is knowing three figures: the panel in front of you, 1200 by 630 for a link card, and whatever your printer asks for at 300 dots per inch. Everything else can be worked out from a physical size and a resolution in about ten seconds.
Should I make everything at 4K and scale down?
Only if something will genuinely be shown at 4K. Downscaling is a safe operation and it does improve a noisy design, but a 3840 by 2160 file is four times the pixels, four times the encode and usually four times the bytes of a 1920 one. For a link preview card that will be displayed at 600 pixels wide, that is three megabytes spent on nothing.
What does 72 DPI mean on a file I was sent?
Usually nothing at all. Many programs write 72 into a file's header because it was a screen convention decades ago, and it says nothing about the pixels. A resolution figure only becomes meaningful when a physical size is being claimed alongside it. If something is going to print, put the resolution the printer asked for into the field and read the pixel dimensions off the result.
Why is A4 at 300 DPI 2480 by 3508 and not a round number?
Because A4 is defined in millimetres and the conversion to inches does not land on a whole number. 210 mm is 8.2677 inches, which at 300 dots per inch is 2480.3 pixels, and a file cannot hold three tenths of a pixel. The rounding error is under a thousandth of a millimetre and is why every print size in this guide is stated as the rounded figure rather than the ideal one.

Back to the canvas

Nothing here is sent anywhere. The file is drawn by your browser and written to your disk.