Image Enhancements in Perch 2.1 for Responsive Designs

It’s funny to think that back when we launched version 1.0, Perch didn’t even have the ability to resize images. We soon fixed that in version 1.1, but apart from a few tweaks here and there, image resizing stayed pretty much the same since then.

Images are an important part of the web, and with all the technological changes with images over the last year or so, particularly relating to responsive web design techniques, we’ve given images a good overhaul with Perch 2.1.

Image Sharpening

When you compress and scale images down for display on the web, they lose a bit of sharpness. Sometimes that’s okay for the sake of fast-loading pages, but sometimes the quality really matters. No one would expect a photographer to be happy with slightly soft photos in their online portfolio.

To counter this, image fields now have a sharpen attribute for setting the sharpening level from 0 to 10. The default value is 4 – about the amount of sharpening we found was needed to counteract the softness cause in the resizing process. You can adjust that to taste or circumstance by setting the sharpen value. Zero turns sharpening off – useful if you’re doing your own resizing in PhotoShop offline.

Hi-DPI or Retina Displays

One of the big changes in technology has been the arrival of high-pixel-density hardware displays such as those found in the iPad, iPhone and new MacBook Pro computers. Apple may be one of the first big companies to market with this technology, but others will inevitably follow. If you’ve used such a device, you’ll have seen how the flaws in standard resolution images are exposed, and they can look quite shabby.

The solution is to deliver images sized up to match the pixel density of the hardware, but then scaled back down to the original size in the browser. That’s fine if you’re crafting site assets in PhotoShop, but what about content managed images your clients are uploading? That’s where you need the new density attribute on Perch image fields.

<perch:content type="image" density="2" width="300" ... />

The density attribute acts as a multiplier when images are uploaded. The above tag would resize the image to 600px wide, but then output the width as 300px when asked. Boom.

Responsive and Compressive Images

The flexibility of these options make it easy to use techniques like the proposals from the Responsive Images Community Group or the Compressive Images approach described by the Filament Group.

We’ve written up solutions with example templates on how to use Responsive Images and Compressive Images for managed content in your Perch sites today.