Lots of mobile-first responsive sites are using scripts and services that blindly scale each image to the dimensions needed for each breakpoint. These blind-sizing tools can be effective given the right set of circumstances, such as consistent focal points in the images and image sizes with a matching aspect ratio. They are relatively easy to implement in a website, however they have some drawbacks when it comes to the final design and effectiveness of the images, proving the need for art direction in responsive image handling.
Jason Grigbsy introduced the art direction use case for responsive images in his post: A framework for discussing responsive image solutions, identifying the need for creative control of individual images as a prevalent challenge in responsive design.
Grigbsy provides an example of how scaling of images can detract from the overall impact as the image gets smaller. Automatic cropping of images also can have a detrimental effect. Take a look at the images pulled from an online newspaper. The cropping works well if the image is perfectly centered and matches the aspect ratio, but when the focal point is off a bit, you can see the result.
In the full size image, you have a shot of the volleyball and the name of the gym.
It isn’t until you actually scale the site down to tablet and iPhone size that you see the full action of the image, better conveying the story.
Image is Copyright © The Berkeley Beacon 2012
When to use Art Directed Images in Responsive Design:
Effective web design considers the use of images as important as the copy. A solid design optimizes the images to best convey the desired message to the users. Art direction of responsive images in the content becomes necessary to effective design when:
1. Site design requires different aspect ratios at different responsive breakpoints.
2. Images have variations in focal points.
3. Images have variations in subject/composition (like in news sites, where one story may have a close up of a dog and the next a wide angle image of a crowd)
4. Site design requires @2x images for retina displays.
5. When the original images are different ratios in size.
6. When the focal point of an image gets too small to be meaningful.
7. When a particular part of an image makes more sense to be highlighted.
How sizzlepig helps with the art-direction use case:
The sizzlepig team members are (obviously) huge fans of art-directed images. There are a lot of ways to create art-directed resizes, but with the ability to control the final output of each image, with out running a script that can produce the same blind-sized results, sizzlepig definitely has an advantage over other image resizing programs.
What sizzlepig doesn’t do is place your art directed images in your website. There are a number of services and a lot of code that can help you effectively implement images for responsive design, whether you are using art directed images as part of your design or just scaling.
Quick sizzlepig tip: Try out different crops. It is so simple to change an image crop that it is easy to see if changing a focal point of an image generates more interest, or works better with the design.
How to implement responsive images:
Check out the following resources when deciding which implementation solution will work best for you: