search⌘KtranslateENexpand_moreupload_fileConvert

What is Pixel?

A picture is a list of numbers.

Each pixel is one colour sample, usually four bytes: red, green, blue and alpha (opacity). This 64 × 40 image is 2,560 pixels, so 10,240 bytes in memory. Click any pixel to read its bytes and where they sit in that list.

ROW 7, PIXELS 8-11 AS STORED: 16 BYTES, R G B A EACH

ea e9 fb ffbytes 1824-1827

88 82 e7 ffbytes 1828-1831

74 6d e3 ffbytes 1832-1835

e5 e4 f6 ffbytes 1836-1839

PIXELx 10, y 7

Red116 · 0x74

Green109 · 0x6d

Blue227 · 0xe3

Alpha255 · 0xff

CSS #746de3byte offset 1,832 of 10,240

Three things called a pixel, measured on your screen.

An image pixel is a stored sample. A device pixel is a physical dot on the panel. A CSS pixel is a layout unit that browsers keep near 1/96 inch at arm's length, whatever the panel. Zoom the page and the numbers below update.

DEVICE PIXELS PER CSS PIXEL1One panel dot per layout pixel at this zoom.

SCREEN, CSS PIXELS800 × 600What your browser reports as the screen size.

SCREEN, DEVICE PIXELS800 × 600The same screen in physical dots, at this zoom level.

THIS WINDOW, CSS PIXELS1440 pxThe layout width pages are designed against.

THIS WINDOW, DEVICE PIXELS1440 pxDots across the window: what an image needs to look fully sharp at full width.

CSS INCH96 pxFixed by the CSS specification. It only matches a real inch at the reference viewing distance.

CANVAS SIZED IN CSS PIXELS · 551 × 150

At 1 device pixel per CSS pixel the two canvases are identical. Zoom the page in to see them differ.

CANVAS SIZED IN DEVICE PIXELS · 551 × 150

Same pixel count as the left one at this zoom.

A photo shown at full width here800 px1200 px1600 px2400 px3840 pxNeeds 1,440 pixels across to fill 1440 CSS px at 1.00×. A 1200-px photo is stretched 1.20×, so each image pixel covers about 1.2 dots and looks soft.

Pixels cost the same in memory, whatever the file size.

A 3 MB JPEG and a 30 MB PNG of the same photo both open into the same grid. To edit or show it, software unpacks every pixel at its full size. Pick a pixel layout to see the memory each resolution needs once opened.

Grey, 8-bitone brightness byte1 byte / px

RGB, 8-bitwhat a JPEG decodes to3 bytes / px

RGBA, 8-bitwhat browsers and canvas use4 bytes / px

RGBA, 16-bit16-bit PNG, TIFF, raw editing8 bytes / px

RGBA, half floatHDR and GPU textures8 bytes / px

RGBA, 32-bit floatEXR, scientific images16 bytes / px

resolutionpixelsmemory, RGBA, 8-bit

VGA640 × 480 · early webcams0.3 MP1.2 MB

Full HD1920 × 1080 · a 1080p video frame2.1 MP8.3 MB

4K UHD3840 × 2160 · a 4K frame8.3 MP33.2 MB

Phone photo4032 × 3024 · 12 MP main camera12.2 MP48.8 MB

8K UHD7680 × 4320 · an 8K frame33.2 MP132.7 MB

Phone 48 MP8064 × 6048 · full-resolution mode48.8 MP195.1 MB

Medium format11648 × 8736 · 102 MP camera101.8 MP407.0 MB

MEASURED NOW: ONE 1920 × 1080 TEST PICTUREencoding…

…

How pixels are laid out in files and memory

layoutbits / pixelhow the bits are arrangedwhere you meet it

1-bit1Eight pixels packed into each byte, on or offFax, TIFF G4 scans, PNG and BMP line art

Indexed (palette)1-8Each pixel is a number pointing into a table of up to 256 coloursGIF, PNG-8, old BMP

Grey 8-bit8One brightness value, 0 black to 255 whiteScans, medical and greyscale PNG/JPEG

RGB565165 bits red, 6 green, 5 blue in two bytesEmbedded displays, some game textures

RGB 24-bit24Three bytes per pixel, R G B (BMP stores B G R, bottom row first)Decoded JPEG, BMP, PNG without alpha

RGBA 32-bit32Four bytes, R G B A; browsers may keep colour premultiplied by alphaCanvas ImageData, PNG with alpha, WebP

YCbCr 4:2:012Full-size brightness plane plus two quarter-size colour planesJPEG and almost every video codec

10-bit HDR30Three 10-bit values, often packed into 32 bits or 4:2:0 planesHDR video, AVIF, HEIC from recent phones

RGBA 16-bit64Two bytes per channel, 0-65,53516-bit PNG and TIFF, photo editing

RGBA float64 / 128Half (16-bit) or full (32-bit) floating point per channel, values above 1.0 allowedOpenEXR, HDR rendering, GPU textures

Work with the pixels

Image Color PickerRead the exact numbers of any pixel in your own image.photo.jpgarrow_forward#3a7bd5 · rgb(58,123,213)Image ResizerChange the pixel count and see what each resampling filter does.4032 × 3024arrow_forward1600 × 1200 Lossless compressionHow PNG stores those pixels in fewer bytes, exactly.pixels · 123 kBarrow_forwardPNG · 41 kB PNG formatOpen a PNG and see bit depth, colour type and filters.logo.pngarrow_forwardIHDR + rows

SOURCES

[1]W3C CSS Values and Units Level 4: the reference pixel [2]CSSOM View: devicePixelRatio [3]WHATWG HTML: ImageData [4]W3C PNG 3rd ed.: colour types and bit depths [5]Alvy Ray Smith, A Pixel Is Not A Little Square (1995)[6]ITU-R BT.709: HDTV parameter values

Frequently Asked Questions

What is a megapixel?

One megapixel equals one million pixels. A 12MP camera captures 12 million individual pixels per photo.

What does “pixelated” mean?

A pixelated image has been enlarged beyond its resolution so individual pixels become visible as blocky colored squares.

Can I add pixels to make an image larger?

AI upscaling tools can intelligently add pixels, but traditional enlargement just stretches existing pixels resulting in blurriness.

How many pixels do I need for printing?

For print quality, you need 300 DPI (dots per inch). An 8x10 inch print needs 2400x3000 pixels minimum.

What is pixel density?

Pixel density (PPI - pixels per inch) measures how tightly pixels are packed on a screen. Higher PPI means sharper images.