Best Image Format for Retina and HiDPI Displays
SVG is the best format for scalable graphics on Retina and HiDPI displays, and WebP at 2x resolution is the best format for photographs. Retina displays have 2x or 3x the pixel density of standard screens, meaning any raster image that is not sized appropriately will look blurry. Vector formats like SVG avoid this problem entirely, while WebP provides the best quality-to-size ratio for photographic content at high DPI.
HiDPI displays are now the norm, not the exception. Apple Retina, Samsung AMOLED, 4K and 5K monitors, and modern phone screens all render at 2x or higher pixel density. An image that looks sharp on a standard 1080p monitor may look noticeably soft on any of these displays if it is not properly sized and formatted.
Here is how to deliver sharp images on every screen without making your pages unnecessarily heavy.
The Resolution Challenge
A Retina display packs twice as many pixels into the same physical space as a standard display. An image displayed at 300x200 CSS pixels on a 2x Retina screen actually needs 600x400 physical pixels to look sharp. If you only provide a 300x200 image, the browser upscales it by 2x, and every pixel becomes a blurry 2x2 block.
The naive solution is to serve 2x images everywhere. But a 2x image is 4x the pixel count and approximately 3-4x the file size of a 1x image. For an image-heavy page, this can add megabytes of unnecessary data for visitors on standard displays.
SVG: The Resolution-Independent Solution
SVG graphics render at native resolution on every display because they are defined as mathematical paths, not pixel grids. An SVG logo, icon, or illustration looks equally sharp on a 1x standard display, a 2x Retina display, or a 4x future display. There is no resolution-specific sizing needed.
For any graphic element that can be represented as vectors (logos, icons, illustrations, charts, diagrams), SVG is the clear winner for HiDPI support. A 3KB SVG file replaces what would otherwise be three PNG files at 1x (5KB), 2x (15KB), and 3x (30KB) for a total savings of 47KB per graphic.
- Perfect sharpness at any DPI, any zoom level, any display size.
- Single file replaces multiple resolution-specific raster files.
- Typically smaller file size than even the 1x raster equivalent.
- CSS and JavaScript styling for dark mode, color changes, and animations.
- No srcset complexity. One SVG file works everywhere.
WebP for Retina Photographs
For photographs that cannot be vector, WebP is the best format for Retina delivery because its superior compression mitigates the file size penalty of high-resolution images. A 2x WebP photo is typically the same file size as a 1x JPG photo, meaning you get Retina sharpness at standard DPI file sizes.
This math works out because WebP is 25-35% smaller than JPG at equivalent quality. A 600x400 WebP at quality 85 might be 40KB. The equivalent 300x200 JPG at quality 85 might also be 40KB. You get 2x resolution for free.
Implementing Responsive Images for HiDPI
The HTML picture element and srcset attribute let you serve different image sizes based on the viewer's display density.
- srcset with pixel density descriptors: Provide 1x and 2x versions. The browser picks the appropriate one based on display density.
- srcset with width descriptors: Provide multiple widths and let the browser choose based on viewport size AND display density.
- picture element: Combine format selection (WebP with JPG fallback) and size selection in one element.
- CSS image-set(): For background images, use image-set() to provide multiple resolutions.
- Generate all variants from a high-quality source. Never upscale to create a 2x image.
Common Mistakes with HiDPI Images
Several common mistakes lead to blurry or unnecessarily heavy images on HiDPI displays.
- Serving only 1x images. The most common mistake. Images look soft on every Retina device.
- Serving 2x to everyone. Wastes bandwidth for 1x display users. Use srcset to let the browser decide.
- Upscaling 1x images to 2x. This does nothing. A 300x200 image resized to 600x400 is still blurry. You need a genuinely higher-resolution source.
- Using PNG for photographs at 2x. PNG produces enormous files for photographic content at 2x resolution. Use WebP or JPG.
- Forgetting CSS backgrounds. Responsive images in HTML get attention, but CSS background images also need HiDPI variants.
Frequently Asked Questions
What size should images be for Retina displays?
Double the CSS display size. If an image displays at 400x300 CSS pixels, provide an 800x600 source image. For 3x displays (some phones), triple the size. Use srcset to let the browser choose the appropriate resolution.
Does WebP work on Retina displays?
Yes, WebP works perfectly on all displays regardless of pixel density. Use WebP at 2x resolution for Retina photographs. The file will be similar in size to a 1x JPG while looking sharp on HiDPI screens.
Do I need 3x images for mobile?
Some flagship phones use 3x pixel density. For critical hero images, providing a 3x variant is worthwhile. For most content images, 2x is sufficient. The visual difference between 2x and 3x is subtle at the small screen sizes of mobile devices.
How do I make SVG icons sharp on Retina?
SVG icons are automatically sharp on every display because they render from mathematical paths, not pixels. No special sizing or srcset is needed. Just use the SVG file and it will look perfect everywhere.
Why do my images still look blurry on Retina after providing 2x?
Check that your 2x image is genuinely higher resolution, not just upscaled from a 1x source. Also verify the srcset markup is correct and the browser is actually requesting the 2x variant. Use browser developer tools to check which image source is loaded.