139 – The Importance of Supporting Retina Images
Announcements
- Business of Writing International Summit in Louisville Aug 2nd
- WordCamp Columbus – Aug 3rd
- WordPress Webinar
Why support retina displays?
More and more devices these days are supporting retina images. And you want your website to look awesome no matter what browser your visitors are using.
How to create retina graphics
You need to create two versions. One the size you need it and one double the size.
How to code your retina graphics
Once youve created and exported copies of all your standard images at double the size, you can begin adding them to your website using various methods. A quick note about file naming, the standard is to save your retina images directly into your usual images folder with the same filename, but with the addition of @2x on the end. So logo.jpg would become logo@2x.jpg.
The Javascript Way
Download RetinaJS.com
<script src="js/retina.js"></script>
The Manual Way
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
header h1 a {
background-image: url(images/logo@2x.png);
background-size: 164px 148px;
}
The HTML Way
<img src="images/logo@2x.jpg" width="300px" height="150px" />
Hi Dustin,
I just notice the blurriness on my iPad of my site. Could you go into a little more about how to take a low resolution image and double its size without losing resolution?
Which software should I use?
Aug 12, 2013Is this only for graphics images like logos, or also for photos?
Most of the stuff on the web I found mostly related to making iPad apps or just said create images 200% bigger first, but it is too late for that with my already created images.
Thanks,
bj
bj_lee_ the only way to take current images and double them in size is to use Photoshop’s resizing tool and resample image with “Nearest Neighbor.” That should create the best looking images from items that are already created. This can be done for all images, whether background or photos on your site.
Aug 12, 2013Thanks Dustin. Gimp has a similar tool and it is for free. Choose the Scale tool. In the Tool Options on the sidebar select Interpolation and None on the dropdown. Click the image with the tool and double the dimensions. Interpolation -> None is said to do the same Nearest Neighbor effect.
Aug 13, 2013I made a screen cast about it on Youtube:
Aug 13, 2013http://youtu.be/CESzMr6s_I4
bj_lee_ Thanks BJ! Awesome stuff 🙂
Aug 13, 2013Do you install the retina.js file onto your wordpress root file?
Aug 17, 2013bj_lee_ you’d want to put the retina.js inside of your WordPress theme. It’s sort of tricky, and that’s why I haven’t created a video yet 😉
Aug 20, 2013Hi Dustin, when I listened to this episode, I didn’t take much heed cos I had never seen my website on MBP with retina display. Then, last weekend, I had an occasion to see my (photography) website on 13 inch MBP with retina display, and kinda shocked cos all my pictures looked pixelated.
Nov 10, 2013It’s quite troublesome to create @2x images for all the photos on my site, so I’ll wait to see whether retina display will become mainstream or not. Although I’m a bit like an Apple fan boy, I’m not really happy with what Apple did with retina display. It’s just causing troubles, IMO. Hopefully retina display will die down, but if other PC brands follow suit, no choice but to give in and prepare separate hi-res images, though.
Thanks for being always resourceful, Dustin. 🙂