Yakezie.com - Topic: retina-ready web graphics

michael @ financial ramblings on retina-ready web graphics

Tue, 26 Mar 2013 19:21:22 +0000

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.

Edward Antrobus on retina-ready web graphics

Tue, 26 Mar 2013 18:03:26 +0000

Michael, don't worry about being afraid of offending me about my load times. I know I have problems and they've been driving me slightly crazy trying to locate the exact problem. :)

In case you are still interested in that post about how to optimize WP-Touch, here it is: Delivering a Much Better experience to your your iphone clients (because, clearly, the iphone is the only mobile device out there)

michael @ financial ramblings on retina-ready web graphics

Tue, 26 Mar 2013 11:10:44 +0000

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. :-)

Edward Antrobus on retina-ready web graphics

Tue, 26 Mar 2013 10:45:14 +0000

IIRC, you need to be in at least the upper 80's not to lose points with Google.
And my understanding of WPTouch is that it is doing the same thing of simply resizing your images with html tags. For a better user experience you should serve up mobile-optimized images. When I get hide, I can share a link with some help with that.

michael @ financial ramblings on retina-ready web graphics

Tue, 26 Mar 2013 09:57:05 +0000

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.

Edward Antrobus on retina-ready web graphics

Tue, 26 Mar 2013 09:12:19 +0000

The other downside is that you are increasing your load times, two-fold. First, you are serving images that are larger and take longer to download. Then you are forcing the end-user's browser to resize the image, which takes processing time.

michael @ financial ramblings on retina-ready web graphics

Tue, 26 Mar 2013 08:18:40 +0000

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…