How do you serve retina graphics?

CSS

The short answer

Retina (high-DPI) screens have more pixels per inch than standard screens. Images that look sharp on regular screens appear blurry on retina displays. To fix this, serve images at 2x or 3x resolution and let the browser pick the right one using srcset, the <picture> element, or CSS media queries.

Using srcset

The simplest approach — let the browser choose the best image:

<img
  src="photo.jpg"
  srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
  alt="A photo"
/>

The browser checks the device's pixel ratio and downloads only the appropriate image. A regular screen gets photo.jpg, a retina screen gets photo@2x.jpg.

Using srcset with width descriptors

For responsive images that also vary by viewport size:

<img
  src="photo-400.jpg"
  srcset="
    photo-400.jpg   400w,
    photo-800.jpg   800w,
    photo-1200.jpg 1200w
  "
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="A photo"
/>

The browser considers both the viewport width and the pixel ratio to pick the best image.

CSS background images

For background images, use media queries targeting device pixel ratio:

.hero {
  background-image: url('hero.jpg');
}
@media (-webkit-min-device-pixel-ratio: 2),
  (min-resolution: 192dpi) {
  .hero {
    background-image: url('hero@2x.jpg');
  }
}

Use vector graphics when possible

SVGs are resolution-independent — they look sharp on any screen without needing multiple versions:

<img src="logo.svg" alt="Logo" />

For icons and logos, SVG is always the best choice. Only use raster images (PNG, JPG, WebP) for photographs.

Interview Tip

Show the srcset approach for HTML images and the media query approach for CSS backgrounds. Mention SVG as the best option for non-photographic content. The key insight is: serve the right resolution for the device, not the highest resolution for everyone.

Why interviewers ask this

This tests knowledge of image optimization and responsive design. Interviewers want to see if you can serve sharp images on all devices without wasting bandwidth by sending huge images to everyone.

Table of Contents