A pixel, short for "picture element", is one tiny square of colour. A digital photo is a grid of pixels, and a screen is a grid of physical lights that each show one colour at a time. A photo described as 1920 by 1080 is 1920 pixels across and 1080 down.
Three different things called a pixel
On the web the word is used in three ways, and mixing them up causes most image problems.
- Image pixels are the dots stored in a file such as a JPEG. Each holds colour values, typically red, green and blue.
- Device pixels are the physical lights on a display. A modern phone packs far more of them into an inch than an old desktop monitor.
- CSS pixels are the unit web designers write in CSS, as in
width: 300px. They are a reference size, not a physical dot, so a 300px box looks roughly the same size on a phone and a laptop.
The device pixel ratio links the last two. On a screen with a ratio of 3, which is common on recent iPhones, one CSS pixel is drawn with a 3 by 3 block of device pixels.
Worked example: why a logo looks blurry on phones
A dentist's site shows the logo at 200 CSS pixels wide, and the uploaded file is exactly 200 pixels wide. On a laptop with a ratio of 1 it looks fine. On a phone with a ratio of 3, the browser needs 600 device pixels of detail and only has 200, so it stretches the image and it goes soft. The fix is to supply a file two or three times the display width, use srcset so the browser picks the right size, or switch the logo to SVG, which has no fixed pixel count.
When pixel sizes matter for your site
You need to think about pixels whenever you upload images. Too few and they look fuzzy on sharp screens; too many and you make visitors download detail they will never see. A sensible rule is to export images at about twice their largest display width, and to rely on responsive design techniques for different screens. DPI or PPI settings in an image file have no effect on how large it appears in a browser.
Common pixel mistakes
- Uploading phone photos at full resolution. A 12-megapixel photo shown in a 400px card wastes most of its data.
- Changing DPI to "make it high resolution". Browsers ignore DPI; only pixel dimensions count.
- Upscaling a small image. Enlarging cannot add detail that was never captured.
- Confusing a tracking pixel with an image pixel. They share a name but a tracking pixel is an analytics tool.
Related terms
- Responsive design: layouts that adapt to different screen widths.
- SVG: graphics without a fixed pixel grid.
- JPEG: compresses pixels in blocks.
- Pixel tracking: the unrelated marketing meaning of the word.