$3 Off Creative Direction
Taking responsive photography to the next level with Scene7.
Scene7 is many things. It’s a different workflow from my normal way of preparing photographs for responsive layouts. Let’s take the following photograph for example.
http://media.kohls.com.edgesuite.net/is/image/kohls/cm-lp-20130903-treschic-028?scl=1
I did not compress it in Photoshop and simply uploaded it to the Scene7 hosting environment. The file size is 61KB. Now I have full control over the compression. Let’s make the file size smaller with qlt=40.
http://media.kohls.com.edgesuite.net/is/image/kohls/cm-lp-20130903-treschic-028?scl=1&qlt=40
Go ahead and change the quality anywhere from 1 to 100. Then download the image and compare the file sizes. Awesome! Compression on the fly!

Instead of having it full size by using scl, let’s resize it for non-retina devices and bring up the quality a bit.
http://media.kohls.com.edgesuite.net/is/image/kohls/cm-lp-20130903-treschic-028?wid=320&qlt=60
Interesting. Imagine the day our mobile devices are smart enough to calculate the available bandwidth and understand Scene7 parameters. Then independently decide which is more important—performance or quality.

Now let’s crop the photograph because the focal point is lost when using a smaller device.
http://media.kohls.com.edgesuite.net/is/image/kohls/cm-lp-20130903-treschic-028?qlt=100&crop=200,0,500,300
That is so simple! Go ahead and play around with those numbers. If you don’t believe it’s truly cropping the image, copy it over to Photoshop and see for yourself.

Wait, the client wants a touch of brightness added to the photograph. Let’s try op_brightness=30.
http://media.kohls.com.edgesuite.net/is/image/kohls/cm-lp-20130903-treschic-028?qlt=100&crop=300,0,500,300&op_brightness=30
Still not perfect but imagine all the possibilities a front-end developer has at his or her fingertips when creating a responsive website. We can use different background images for different breakpoints and use JavaScript to serve retina by only tweaking a few parameters at the end of the URL.

Since lazy loading images is common these days, and polyfills such as picturefill by Scott Jehl are making future features available to legacy browsers, I can easily see Scene7 becoming a needed addition to any workflow for responsive imagery.

After using Scene7 I don’t think I can go back to adjusting photographs in Photoshop. I’m hooked! Now the big challenge that lies ahead is explaining responsive photography to professional photographers so they will send me a high-res uncropped version.

Feel free to check out more options at Adobe Scene7. Enjoy!
Posted 7 months ago
Blog comments powered by Disqus
blog comments powered by Disqus