The web community at large has struggled with delivering responsive images (different sized images that are served based on a device’s screen size).

Current State of Responsive Images

The holy grail (so to speak) of the responsive design movement lay in having the HTML spec ratified to support having devices do the work of determining which image size is most suitable to download and fetching it instead of a larger one. This would be done (in proposal) via css, or the IMG HTML tag. The advantage of this would be that small devices wouldn’t request large images, nor would they download multiple images.

However, this is what currently occurs on responsively designed sites & templates. The only way to prevent it, currently, is to only serve one large size of an image, and penalize small mobile devices by making them have to download the largest asset and just scaling it down via css to appear smaller.

Responsive Images Extension

Publish your content and give us your best quality image— we’ll do the rest. With WPtouch Pro 3.1’s Responsive Images extension, you don’t have to define alternates or set a single setting to ensure the right sized images are being served to the right devices. The extension works to crunch images you upload and, on the fly, determine what size a device is, and which image is best suited for it and sends it along instead.

Automatic, ‘Set It and Forget It’

This means even devices like the iPhone 3GS and iPhone 5 will receive different sized images, ensuring the trade-off between high fidelity images and reduced bandwidth is negotiated. The Responsive Images extension handles all of the image size negotiation and device type negotiation automatically, with zero configuration required.

Moving forward, we’ll go beyond uploaded content to WordPress websites, and instead any image you link to in a WordPress post or page is the correct size for the device that’s requesting a page view.

Leveraging our BraveNewCloud, we’ll make sure any linked image has more appropriate sizes cached and ready for you to serve to your mobile visitors. This means if you link to images anywhere else on the Internet, we’ll make sure that image isn’t too large for the device requesting it.

We believe delivering Responsive Images for WordPress websites shouldn’t be difficult for the average user. We wanted the ability to support Responsive Images to be as simple as adding links to images in a post or page and clicking publish.

With Responsive Images in WPtouch Pro 3.1, that’s exactly what you do.

WPtouch Pro 3.1 is a free update for all existing customers. You can update to 3.1 through the WordPress admin panel like any other plugin on the plugins page.

In WPtouch Pro 3.1, we’ve introduced our own extensions, and 3 new extensions are currently available to customers: Mobile Content (for replacing desktop content with mobile content on the fly), Infinity Cache (for caching both mobile & desktop), and now Responsive Images (for serving the right sized images for the right device).