O'Reilly logo

Instant Website Optimization for Retina Displays How-to by Kyle J. Larson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Pixel ratio detection with JavaScript (Become an expert)

There are a number of good options for implementing Retina images with CSS and vector images, but there isn't a simple solution available for the standard <img> tag. Photographs and other images are typically added using HTML within the content of websites. Until we have a new HTML tag available or an update to the existing <img> tag to reference high-resolution images, we'll have to find an alternative solution.

Currently, the best two options available are using either a front-end or server-side scripting solution. This recipe will discuss how to use JavaScript to replace your normal images with high-resolution images if a Retina Display is detected.

Getting ready

To get started, we'll need ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required