Generating Responsive Image Assets with Photoshop CC 2014

This article was sponsored by Adobe. Thank you for supporting the sponsors that make SitePoint possible!

The right assets for the right devices

Five years ago the web was a more predictable place, wasn’t it? As web developers, we could reasonably expect web browsers no narrower than 640 pixels, and no wider than 1240 — it was as if our ‘internet super-highway’ was trafficked only with family sedans. Our current reality is a very different picture. Today, mobile users often make up more than half of our traffic. The truth is, in 2014 there are as many motorbikes on ‘our super-highway’ as there are sedans and trucks. So, why are we still loading the same ‘family-sized’ images onto all these wildly different devices?

But does it really matter?

Last month Tammy Everts published some very sobering figures on the effects of site performance on user behaviour. They include:

1. Slow web pages correlate to more than $3b lost sales annually
2. 44% of shoppers interpret slow performance as ‘something went wrong’
3. A 2-second delay during a transaction = 87% shopping cart abandonment rate

Tammy’s numbers tell us that sending slow, family-sized images to baby-sized devices isn’t just bad manners — it’s actually costing us customers and money. By tailoring our images to the limitations of the each device, we can deliver pages faster while saving bandwidth costs – a win for everyone.

Delivering the right images

There are already a number of established methods for delivering adaptive image content to devices. The current best options are:

• Adaptive-images.com: Matt Wilcox’ solution is a current favorite of many developers. It’s device-agnostic and mobile-first, although it does usually requires some Apache and PHP setup knowledge.
• Squeezr.it: Squeezr is heavily inspired by adaptive-images, but favors a client side strategy for determining and reacting to breakpoints.

Have no fear: these are both excellent solutions, but we’re not going to focus on them today. Instead I’d like to look at the other part of the problem: the image assets. How do we generate all these different image assets?

Adobe has put a lot of thought into this problem and it shows in Photoshop CC 2014. They offers a suite of tools – some new, some older – designed to help.

Here are some tips to get started with responsive images.

Tip #1: Embed All Images as SmartObjects

SmartObjects are nothing new – they’ve existed in Photoshop since 2005 – but they’ve become a central tool in responsive design. SmartObjects always keep a reference link to their original image state, even after we’ve applied destructive transformations to them. For instance, in most situations, re-scaling an image multiple times would degrade the image at each iteration. However SmartObjects apply each new transformation to the original image state, with no image quality loss. This makes it almost a no-brainer to begin your project by converting all your high resolution image resources — avatars, backgrounds, photos and the like — into a SmartObjects, allowing you to resize, rotate, transform and reposition them without fear. Converting any layer to a SmartObject is as simple as right-clicking it and selecting ‘Convert to SmartObject‘.

Tip #2: Take Advantage of Layer Comps

In the era of responsive design, ‘THE layout‘ has become ‘the LAYOUTS’. We need a way to manage the SAME page elements in two, three or more positions and sizes.

That’s precisely what ‘Layer comps’ are designed for. Think of a each new ‘Layer comp’ as a ‘snapshot’ of your layers panel at a particular moment in time. You can then return to that snapshot state at any time with a single click in your layers comp panel.

In practice, this usually means building your mobile layout (mobile first), and then capturing it as a new layer comp. You can then begin re-engineering the layout for tablets, and once again capturing this to another layer comp.

The layers comp panel allows you to instantly switch between any of these states with a click. Layer comps reduce duplication in your layers panel, and simplify your project file as a whole.

Tip #3: Forget ‘Save for web..’ – Use ‘Extract Assets’

I must admit, I always liked Fireworks’ image export panel. Photoshop had Image Ready as a separate application, and its own built-in ‘Save for Web’ function, but for me neither was as simple, powerful or fast as Fireworks.

Photoshop CC 2014 takes a fresh, much-improved approach to image export – a new ‘Extract Assets’ function. Let’s take a closer look.

The Extract Assets panel will target whatever layers you have selected in the Layers panel. In theory, that could be a single layer, all layers, or any combination in between. You can launch this new panel from two places:

1. By right-clicking on any layer/s and selecting ‘Extract Assets’
2. Or by selecting ‘Extract Assets’ from the File Menu

Let’s take a look at the new Extract Assets panel. Layers can be exported in any one of six image formats:

1. PNG8
2. PNG24
3. PNG32
4. JPG
5. GIF
6. SVG (Yes. More on that later)

You can also choose to simultaneously generate images in up to eight different resolutions — ranging from 25% up to 400%. Photoshop also makes it easy for you to automatically prefix each filename and export to sensible folder names. You can even set it to automatically re-generate the entire set of files any time you update the original document. It’s not hard to see what a huge timesaver this could become.

Note that if you are comfortable with your current workflow, the classic ‘Save for web’ option is still available. However, I suspect most will see the power and flexibility of the new functionality.

Tip #4: Use SVG When Possible

SVG has been one of the hot web design trends of 2014, so it’s exciting to see SVG support come to Photoshop. Vectors are uniquely well-suited to responsive design as they deliver tiny files that instantly re-scale with no loss in image quality. In purely practical terms, using SVG (where practical) means you only need to manage a single file for all resolutions (not including fallbacks for older clients).

Although Photoshop will allow you to export any layer/s to SVG, pixel-based image elements are unlikely to deliver good results. Any path-based graphics — including logos, icons, masks and other shapes — will likely be ideal candidates for SVG export.

Tip #5: Don’t Forget Creative Cloud Assets

One of the new side-benefits of working with PSD is Adobe’s new online services. Syncing your PSD comps to Creative Cloud unlocks a raft of handy tricks. I covered this in more detail in my last article, but the headline points are:

Share your PSDs with clients easily

Forget about sending JPEG comps for client review. Creative Cloud lets them view and comment on your PSD comps live in the browser. That’s correct — they no longer need Photoshop to review PSDs.

Distribute PSDs to external contractors

External contractors can work directly with the latest versions of assets, exporting assets directly using the browser.

Provide colleagues with access to extract assets

You now have an easy way to share version-managed PSDs with your team. They can even extract CSS, images and other assets from you PSD without needing a their own Photoshop install. This service is available to anyone with a free Adobe account.

The Wrap-up

Biodiversity is a good thing! Our browser ecosystem — phones, tablets, laptops, desktops, even TVs — is rich and varied, and it’s only going to get more diverse in the years to come. This makes our job both harder and more interesting. Responsive Web Design has taught us that ‘the page’ has actually become a ‘family of pages’ – a papa page, a mama page and some baby pages. For the same reasons ‘the image’ has become a ‘family of images’ too. Photoshop CC 2014 now provides a relatively painless and fast workflow for generating those ‘image families’. Check it out.

Frequently Asked Questions (FAQs) on Responsive Image Assets in Photoshop and CSS