Optimize Images in Your Blog Posts for Retina Display

Typically images that are found in posts can range anywhere from 400-1000 pixels in width. If we chose the @2x method, this would mean that each image would be between 800-2000 pixels in width.

Serving images that large on every page load could result in a tremendous resource hog, not to mention it would eat away at your bandwidth.

As I was doing my research on a better way to serve optimal images to folks with a Retina display, I found a script that came highly recommended by many.

Retina.js is an open source script that makes it easy to serve high-resolution images to devices with retina displays.

Source: Optimize Images in Your Blog Posts for Retina Display


+Commentary: We’ve struggled with Retina-optimization on this very blog and found this post to be very helpful. Click the source link above to read more about how it works. In a world where up to 50% of your traffic may already be coming from iPads or iPhones it is worth investing in this issue to best present your work on your blog. Otherwise it could increase your bounce rates, result in less time & pages viewed. That is a no-win situation for everybody.