Design & UX
Article

Generating Responsive Image Assets with Photoshop CC 2014

By Alex Walker

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:

Squeezr.it

Squeezr.it

  • 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.

Layer comps in action

Layer comps in action

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.

Launching the Extract Assets panel from inside the Layers panel.

Launching the Extract Assets panel from inside the Layers panel.

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.

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

The SVG export facility in Photoshop

The SVG export facility in Photoshop

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

Adobe Extract for Web

Extracting assets via the browser.

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.

Comments
bluedreamer

"Extract to assets" - only 15 years behind the times. My image editor has had that functionality since the late 90's smile

alexmwalker

Nice. Tell us more, bluedreamer. Are you talking about simultaneously generating a series of scaled version of the same image with meaningful file suffixes?

bluedreamer

Not quite the full monty, just being able to send any object in what you call a "layer" to an image optimiser. It seems this facility is PS just takes things a bit further.

djeyewater

Would be nice to have some stats to support the argument for using small images for mobile - just because someone is using mobile doesn't necessarily mean they are on a slow connection. I would guess (but it is just a guess) that most mobile web browsing is actually done with a WiFi connection, which would give the same connection speed as a desktop. Mobiles are also much more likely to have a high DPI screen than a desktop.

alexmwalker

That's an interesting point, but I suspect it would vary radically depending on location. For instance, travelling through Cambodia and Vietnam, mobile data was relatively expensive, but every second shop, bar, or hotel provided free WIFI.

In Australia, free WIFI is slowly becoming more common, but most people have a 2-3Gig data plan with their phone. Going over that limit can get expensive -- I've gone from a $60 monthly fee to over $200 on a month where I needed a lot of data.

Consequently I'd be more careful with downloads in Australia than Cambodia.

Either way, if a phone screen can only show 600-700 pixels of width, sending it 2000px seems wasteful, regardless of connection speeds. A half second load time is still noticeably faster than a one second load time.

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.