We know people get really frustrated when images viewed on desktop look great but are hard to see on a mobile device.

In this blog, I’ll show you how to use the Picture and Image Field Focus modules to crop images for display on desktop, tablet and mobile and make the lives of content creators easier.

It means goodbye to preparing several images for optimum display across all devices and hello to just one image upload and smart image crop control.

The new Drupal Picture element

Picture is a new(ish) HTML5 element which allows different images to be displayed for different devices and also for retina displays. Handy.

This means mobile users no longer have to download images optimised for desktop display when the image is displayed on a much smaller screen. 

How Picture works

Picture considers the way images are served and the needs of content creators, including:

• Size: Images are often served optimised for desktop and then mobile devices reduce them to size. This means that mobiles are often downloading more data than they need to.
• Art direction: For some images it would be better if the image was cropped for mobile display. This is called the ‘art direction’ use case, and I recommend reading this article over here. 
• Image quality: Using <picture> images can be served at a higher pixel density, which means higher quality images can be served for retina devices.

Picture's HTML and browser support

The picture element at its most basic looks like this:

<picture>
 <source media="(max-width: 480px)" srcset="mobile.jpg"> <source media="(max-width: 768px)" srcset="tablet.jpg">
 <img src="fallback.jpg" alt="">
</picture>

You can see it's been spec'd out by the responsive images community group http://responsiveimages.org/.  It's supported in Chrome 38, implemented in Firefox 33, and can be tested by tweaking FireFox’s settings.  Microsoft is considering supporting it, and Safari hasn’t confirmed their status yet.

If a browser doesn’t support the Picture element, the HTML degrades gracefully and the fallback <img> is displayed. There is also a well-supported, and tested, polyfill - picture fill - on GitHub.

The Picture module

The good news is that Drupal already has a Picture module which includes the picture fill js library. It has a dependency on the breakpoints module.

To set up Picture, you need to setup your breakpoints first (/admin/config/media/breakpoints).  Each breakpoint needs a name and a media query. I've set up my breakpoints to match the Bootstrap breakpoints. For example, I've got a Mobile breakpoint with a media query '(max-width: 480px)' - see image to the left.

Once that's all sorted, you need to setup images styles for each breakpoint.

To setup Picture, install the module and go to /admin/config/media/picture/list. This page lists all the picture displays you have setup. Click 'Add', select the breakpoints you want this picture display to use, and select an image style for each breakpoint - see left.

Once you have a picture display set up, you'll be able to select picture as a display field formatter for an image field. You can then display different images for mobile, tablet and desktop!

Image Field Focus

Some people worry that the art direction use case places a large administrative burden on content editors, as it means preparing several images instead of just one.

You can avoid this if you use Image Field Focus - content admins select a focus area and a crop area for each image and image field focus does the rest, which is a lot less hassle all round.

In the example I've cropped out the person stood on the right, which is represented in the outer selected area. The inner selected area has become the focus area. 

Essentially, any image created will be from within the crop area and will always contain the focus area. The focus area will be, where possible, in the middle of the picture.

In our example, the paragliders in the air might be to small to see if the full image was scaled down to be displayed on mobile. I’ve added a focus area around one of the paragliders so when a mobile optimised image is created it will be a close up image of this area.

To setup image field focus you'll need to enable it for each field you want to use it on.

Defining images styles

When you define your images styles, you need to add the Focus Scale And Crop style - see left. I've set up three distinct image styles, one for each breakpoint, see image below. If you want to more detail on setting up images styles, read this.

What do you think?

Hopefully you can see that the Picture and Image Field Focus modules work together as a great combination!  

We asked our marketing and content team what they thought and they said, “This is literally the best thing since sliced bread.”