⌘K
We use cookies to improve your experience
We use essential cookies to make our site work. With your consent, we may also use non-essential cookies to improve user experience.
Definition
Retina Display is Apple's marketing term for screens with pixel density high enough that individual pixels are indistinguishable to the human eye at a normal viewing distance. Retina screens use a 2x or 3x device pixel ratio, requiring web images to be served at double or triple resolution to appear sharp.
Apple introduced the Retina Display with the iPhone 4 in 2010. The concept is simple: pack enough pixels into a screen that the human eye cannot distinguish individual dots at typical viewing distance. For phones held at 10-12 inches, this threshold is around 300 PPI. For laptops at arm's length, about 220 PPI suffices. For desktop monitors viewed from 2+ feet, around 200 PPI. The specific PPI threshold varies by device category and viewing distance.
Retina displays changed how web developers handle images. A 100x100px image on a 2x Retina screen occupies a 100x100 CSS pixel area, but the screen actually renders 200x200 physical pixels. If the source image is only 100x100px, the browser upscales it, causing visible blurriness. The solution is to serve a 200x200px source image and display it at 100x100 CSS pixels. The srcset attribute (
While "Retina" is an Apple trademark, high-PPI displays are now standard across all major platforms. Most Android phones, Windows laptops, and external monitors offer HiDPI (high dots per inch) screens. Web developers should treat high pixel density as the default rather than an exception. SVG (vector) graphics, icon fonts, and CSS-drawn elements automatically look sharp at any pixel density — only raster images (JPEG, PNG, WebP) need multi-resolution handling.