retina-ready web graphics | Bloggers Lair | Yakezie Forums

Post edited 8:26 am – March 26, 2013 by michael @ financial ramblings

Have any of you thought about designing your sites for "retina" displays?

That's Apple's term for displays with 4x the pixel density of a normal display. They're super sharp, but "regular" graphics have to be inflated to 4x the resolution resulting in fuzzy images.

Long story short, you can combat this by using high-res graphics. Though there are tricks for serving different images to difference devices, I'm lazy. I decided to just serve the high-res to everyone. So for a 100x100 image, you would make it 200x200 and downsize to 100x100 with html attributes or css.

The downside is that you're serving more data and many users won't see a difference. But I was able to do this without a huge (absolute) size increase (the header went from 11kb to 18kb, social icons went from 2-3kb to 4-5kb).

The main reason I tackled this is that I actually have a retina MacBook Pro and I got tired of looking at fuzzy graphics on my site (though I haven't tackled in-post images yet).

Anyway, you can check out the end result by going here.

For the sake of comparison, you can see the full-sized header image by going here.

I hope this is helpful…

Post edited 9:59 am – March 26, 2013 by michael @ financial ramblings

Yep. But according to pingdom tools, my site loads faster than ca. 75% of all tested websites — and that's without any sort of caching or minifying turned on — so I'm not too worried. We're only talking about an extra 10kb total — and I'm using WPtouch so there's no real impact on mobile users.

Post edited 11:11 am – March 26, 2013 by michael @ financial ramblings

My main point is that there are other things besides shaving 10kb of my page that would speed things up – caching, minifying, and other optimizations. While we're at it, I could remove the in-post graphics (esp on the front page where it loads the above-the-fold image for ten different posts) but you have to consider design/appearance vs. performance.

WPtouch doesn't load the header graphics so that's a non-issue. Yes, it loads the in-post images, but it's still plenty fast. You could drive yourself crazy trying optimize every last thing but there are diminishing returns.

Also: If you're concerned about page-loading speed, you might want to check and optimize your site. I was getting readings in the 40-50% range when I check it with the pingdom tools. Please don't take this as an attack or a "look who's talking" sort of comment. I just checked out of curiosity and thought you might be interested.

Thanks for sharing your thoughts. :-)

Thanks, Edward. For the record, I spent a bit of time optimizing images tonight. I also installed WP-Minify and enabled WP-SuperCache. I reduced the size of the front page by 30% (primarily image savings) and got page load speeds up to better then 90% or so of sites tested according to pingdom.

For image optimization, TinyPNG.org does a nice job on PNGs and I batch processed a bunch of other images (jpg and gif; basically my entire uploads folder) using ImageOptim (it's free, runs on a Mac). The former is lossy in that it drops images from 24 bit to 8 bit but I couldn't tell the difference. The latter is lossless.