skip to main content

TAMU Webmaster's Blog

Information and insight from the A&M Webmasters

Testing retina display if you don’t have a retina device

November 22nd, 2013 by mdmcginnis

Since everybody is getting new smartphones except me, I need to add high-resolution images to the sites I design – but until now, I couldn’t see what they looked like on a high-resolution device without borrowing somebody’s phone. We use media queries to serve larger images to retina devices, and zooming my browser won’t trigger these media queries.

But there is a way to simulate a retina display on a Firefox browser [EDIT: and another way in Google Chrome].

  1. Go to “about:config”
  2. Find “layout.css.devPixelsPerPx
  3. Change it to your desired ratio (1 for normal, 2 for retina, etc.)

When I run these tests, the pages get so big it’s hard to use Firefox for anything else, but I can quickly tell which images will work on retina (the crisp ones) and which images need to be swapped out (the blurry ones).

I learned another retina solution from Monty Dickerson: use larger images that have half the quality (Photoshop 50) but four times the pixels (100 x 100 instead of 50 x 50).  It’s counter-intuitive, but they aren’t much heavier than traditionally-sized images, yet look much better, even on normal monitors.

Using Monty’s solution, you can check for blurry images by just zooming your browser 200%.

Friday, November 22nd, 2013 CSS, Mobile Web
Share this article

No comments yet.

Leave a comment