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

CSS media queries (Should know)

Making all devices download large Retina images, even if they cannot display them, is not ideal. Doing this makes users wait longer to view your content without any benefit. Using media queries in your CSS is one way to get around this issue.

Media queries check to see if the user's device meets specific conditions, and if not, supply an alternate style. These are particularly useful in adjusting your website to a specific media, screen size, device orientation, or display type.

It is recommended that you use a media query or other image replacement technique every time you're using Retina images rather than only supplying a large image. Media queries will help accomplish this for any images that are contained within ...

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