web performance and seo
Retina display / HiDPI
A retina display is a high-density screen where individual pixels are invisible to the human eye.
What is Retina display / HiDPI?
A retina display is a screen with pixel density high enough that individual pixels are indistinguishable to the human eye at normal viewing distances. Apple trademarked the term "Retina display" for its high-density screens starting with the iPhone 4 in 2010, while "HiDPI" (High Dots Per Inch) is the equivalent term used across other platforms. These displays typically render at 2× or 3× the pixel density of standard screens, meaning a 600px wide element uses 1200 physical screen pixels on a 2× retina display.
Importance of Retina display / HiDPI
Understanding retina displays is crucial for web image optimization because standard-resolution images appear blurry on these high-density screens. When you upload images sized for standard displays to social media or email, they get upscaled by the browser to fill the higher pixel count, creating visible softness. By 2026, the majority of smartphones, tablets, and laptops are HiDPI displays, making retina-optimized images essential for professional visual quality.
Retina display / HiDPI in Practice
A typical scenario involves uploading a 400×300 pixel product photo to your website. On a standard 1× display, this image appears crisp at 400×300 CSS pixels. However, on a 2× retina display, the browser stretches those same 400 physical pixels across 800 screen pixels, resulting in noticeable blur. To maintain sharpness, you need to provide an 800×600 pixel image that displays at 400×300 CSS pixels, giving the retina screen enough pixel data to render crisply.
Retina display / HiDPI Best Practices
- → Provide images at 2× the intended display size for optimal retina display sharpness.
- → Use responsive image techniques with multiple resolutions to serve appropriate sizes to different devices.
- → Test your images on actual high-density displays before publishing to web or social media.
- → Compress high-resolution images efficiently to balance visual quality with file size for faster loading.
Example of Retina display / HiDPI
Related Terms
Frequently Asked Questions
What is a retina display?
A retina display is a high-pixel-density screen where individual pixels cannot be distinguished by the human eye at normal viewing distances. Apple coined the term for displays with approximately 300+ pixels per inch, though the exact threshold varies by device size and typical viewing distance. Most modern smartphones, tablets, and laptops now feature retina or HiDPI displays that render at 2× or 3× standard resolution.
What is the difference between retina and HiDPI displays?
Retina display is Apple's trademarked term for high-density screens, while HiDPI (High Dots Per Inch) is the generic industry term for the same technology. Both refer to displays with pixel densities high enough that individual pixels are invisible at typical viewing distances. The terms are functionally identical — HiDPI is simply the platform-neutral way to describe what Apple calls Retina.
Why do my images look blurry on high resolution screens?
Images look blurry on high-resolution screens because they contain fewer pixels than the display can show. When a 400×300 pixel image displays on a 2× retina screen, the browser stretches those 400 pixels across 800 physical screen pixels, creating visible softness. To fix this, provide images at 2× the display size — an 800×600 pixel image will appear sharp when displayed at 400×300 CSS pixels on retina screens.