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..
- Slow web pages correlate to more than $3b lost sales annually
- 44% of shoppers interpret slow performance as ‘something went wrong’
- 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:
- 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.