Generating Responsive Image Assets with Photoshop CC 2014

Originally published at: http://www.sitepoint.com/responsive-image-assets-photoshop-css-2014/

Or making the right asset for the right device

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 like our ‘internet superhighway’ was filled only with 4-door sedans.

Our current reality is very different.

While 5K displays are becoming routine for desktop users, today over half of our traffic may be smartphones. The truth is, in 2014 there are as many motorcycles on our highways as sedans.

So, why are we serving the same images to all these different devices?

Does it really matter?

Last month Tammy Everts (Web Performance Today) 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

Going by Tammy’s numbers, sending slow, king-sized images to baby-sized devices isn’t just impolite — it’s costing you customers, bandwidth and money. Tailoring your images to the limitations of the each device, you can deliver pages faster while saving bandwidth – a win for everyone.

Delivering the right image

There are a number of established methods for delivering adaptive image content to devices. My current choices ae:

Squeezr.it

Squeezr.it

  • Adaptive-images.com: Matt Wilcox’ solution is a current favorite of many developers. It’s device-agnostic and mobile-first. 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.

While these are both excellent solutions, today we’re going to focus on another part of the problem — How do we generate all these different image assets?

Adobe have put a lot of thought into this area and it shows in Photoshop CC 2014. It offers a suite of tools – some new, some older – designed to help. Here are some tips to get started with responsive images.

Tip #1: Always Embed Images as SmartObjects

SmartObjects are nothing new – they’ve been a part of Photoshop since 2005 – but they’ve really come into their own in responsive design. Converting a high resolution image components into a SmartObject allows you to resize, rotate and reposition whenever you like with no image quality loss. This makes them a no-brainer in RWD.

  • Keep all your pixel-based images in double-scale resolution PSDs.
  • Convert these images to non-destructive SmartObjects

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.

Continue reading this article on SitePoint

“Extract to assets” - only 15 years behind the times. My image editor has had that functionality since the late 90’s :smile:

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

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.

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.

1 Like

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.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.