Testing retina display if you don’t have a retina device
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].
- Go to “about:config”
- Find “layout.css.devPixelsPerPx
- 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%.
No comments yet.