A pixel is the smallest unit of display used on a screen.
For example, a 14-inch monitor typically set to a screen display of 640 pixels wide and 480 pixels high.
Digital images are made up of a grid of individually-coloured pixels.
Digital veterans often reference the humble pixel when describing their work, or the skills of a fellow–designer. Pixel-based titles may denote excellence: ‘pixel surgeon’; the digital equivalent of manual labour: ‘pixel pusher’; or recklessness: ‘pixel jockey’.
A ‘pixel-perfect’ layout is where a webpage design that was originally created in a graphics program (such as Photoshop), is recreated as a webpage using HTML and CSS – and where this recreation is accurate to the pixel.
Achieving a pixel perfect layout is made more difficult by variations in the way that different web browsers understand the HTML and CSS specifications, and the number of ways a person can choose to view the web.
For example, HTML-text may display (render) at a different size than that intended by the page designer; or a person may change the webpage text size to make content easier to read.
The only way to consistently achieve pixel-perfect layout, across all web browsers, is to work with pixels; either by creating images of content, or specifying all units in pixels. Neither of these methods is recommended: