CLICK HERE TO SEE A DEMO IN ACTION
It’s very simple to simultaneously support retina displays and normal displays. There are a bunch of ways to do it, like slicing and scaling sprites and background-images, detecting if it’s a high resolution display and serving up different images, and so on. Here’s how I like to do it, ’cause it’s easy and requires no additional markup and deals with every image on the page. Basically, use an image exported @2x of the intended size and resize it using JavaScript.
(Warning: I’m no pro- I got a Retina display and wanted to find the quickest way of retinizing all the images on my page without any extra work. This is highly inefficient.)
JQUERY SOLUTION:
[codebox 1]
WHY USE JAVASCRIPT?
Sure, you could use CSS and set the width or scale to 50%- but this is glitchy at best. CSS image resizing is relative to the parent container’s size- breaking most layouts…Unless you’re looking to do some hacky wrapping for every image…
CONSIDERATIONS:
This uses way more bandwidth- double actually, so use CSS instead of images when possible. It does however, deal with all screens at once without having to export extra images or anything. If efficiency and compatibility is a must, this might not be the method for you.
Oh, and your layout will be weird for the 1% of the world with Javascript disabled if you use this method.
LOOKING FOR BETTER/MORE METHODS?:
If you’d like to do something more _not-lazy_ and actually put some effort into it, you can specifically target retina displays with different images. Read more about that here.
Also, check out this flowchart here by @thomasfuchs for picking a method.
Questions? Comments? Improvements? Was I wrong? I’m no pro, so let me know how I can improve this.
Yes, I know this website isn’t optimized for Retina displays.
Let me know here.
Recent Comments