I’m wondering how the experts on here are designing for retina displays (if at all).
Many laptops now have retina displays and there are many more devices out there that can be considered ‘retina’.
I’ve done a lot of research and can get the code/methods easy enough, but wondering of other thoughts and what’s best practice.
Some possible ideas are:
“detect for a pixel density of 2 or more with CSS and then display a different PNG/JPEG/GIF image for retina”
“use only Vector/SVG/icon fonts”
“use something like retinajs.com”
Am I understanding this and what do you think is the best method?
For images that can feasibly be vector, I use SVG or icon fonts, depending on the complexity. For bitmaps, make them double the width/height and use width:50%. Obvious problem there is that image sizes could be as much as 4X, so I use a lossless compressor like SmushIt.
Hi,
I’m starting to use 2x images everywhere by default now, even for non-retina(they scale down ok).
Inline images you can just give a width half of the full-size like. background images you can set a background-size to scale down.
I only use the 1x images for background-images in browsers that don’t understand background-size (ie)