Use <picture> to Dynamically Render Images for Different User Environments

Responsive design requires a balance between performance and flexibility—serving a correctly-sized and optimized image for all possible devices shouldn't mean a slow load time.

Given the variety of methods for implementing responsive design, it's important to understand which ones work best for different use cases.

In this tutorial, we'll be going over when to use the <picture> element and how to implement it most effectively with imgix.

Art Direction vs. Resolution Switching

Responsive imagery is generally used to solve one of two problems: the need to modify the image to fit a design that changes depending on the device (art direction), or the need to adjust the image's resolution to the device (resolution switching).

In terms of implementation, it's a choice between giving the browser enough information to decide which version of the image to use or commanding it directly.

The <picture> element is best used for the art direction use case because the changes required will likely include changing aspect ratios, cropping the image differently, and other design aspects that are more complex than just serving up a higher-resolution image.

In this case, you do want to command the browser directly, in spite of the potential performance hit.

Using imgix and <picture> for Art Direction

imgix has two main benefits when using the <picture> element. First, it removes the need to maintain separate, pre-processed copies of the image for each viewport size. Apply any parameters as needed to adjust the size, cropping, and device pixel ratio.

Second, it helps minimize the performance hit by optimizing the image and caching all of the different versions requested.

Note: The <picture> element is not available for some legacy browsers. You can use Picturefill to add support for those clients.

Let's see how all of this fits together. We'll start with an image in landscape orientation, and then provide different parameters to show the most meaningful part of the image for different devices which may have other orientations.

Click on the image to see the viewport changes at full size

<picture>
  <source
   srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280"
   media="(min-width: 1280px)"
  >
  <source
    srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop"
    media="(min-width: 768px)"
  >
  <source
    srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop"
    media="(min-width: 480px)"
  >
  <img src="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop">
</picture>

Even though they may not be exactly sized to the device (given the wide variety of screen sizes available), setting some simple viewport breakpoints and applying a few parameters can get you most of the way there with much less overhead than generating different original images for each size.

You can continue to expand the number of breakpoints as needed, depending on what you know about your users' devices.

Even with this simple implementation of <picture>, we've covered the basics, adjusting a single image as needed to provide the most compelling version of the image for each target size.

However, with a few additions to this code, it's possible to make <picture> a powerful tool for automating art direction across your entire image set, not just a single isolated photo.

Automated Art Direction

In the examples above, the cropping was straightforward because the meaningful content was in the middle (which is the default for fit=crop).

However, if the most relevant part of the image isn't centered, you can still use imgix's crop modes to programmatically adjust where the cropping starts, without having to manually output pre-cropped versions for different aspect ratios.

imgix offers two modes that crop based on image content: crop=faces and crop=entropy. They work similarly by evaluating the image and either detecting faces or areas of high contrast and then cropping with those at the center.

There's more detail about how to use these modes in our guides about making avatars and point-of-interest cropping.

Let's see how using <picture> and key imgix features like text overlays and watermarks can create a fully-branded set of images that crop and change to fit any device screen.

Every version of these images is being created from an Origin Image file on-the-fly in response to the viewport size and cached, which greatly minimizes both image storage and any performance hit that <picture> might normally cause.

Cropping

View faces/entropy cropping examples in the CodePen

See the Pen Picture Element & Art Direction with imgix by imgix (@imgix) on CodePen.

In the CodePen example, the images adjust to the viewport in size and aspect ratio, and the cropping style varies based on what is necessary at those dimensions to keep President Obama centered.

Depending on the image variation, this is done with crop=faces, crop=entropy, crop alignment (crop=top, etc.) and sometimes rect to zoom in on a portion of the image at smaller sizes.

The logo watermark and photo credit are also adjusted for size and padding to fit the viewport changes and change position to avoid overlapping the subject.

Scaling Text and Watermarks

Any text overlays, blends, or watermarks that you add to your images can be scaled and adjusted along with the image. Here's an example that takes advantage of <picture> to art direct even more dramatically.

View watermark/blend examples in the CodePen

Adding DPR Support

If you want to support multiple pixel resolutions within <picture>, you can do so by adding DPR variations to each srcset. For example, if we wanted to support a higher-density device for our original example, the code would look like this:

<picture>
  <source
    srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=1 1x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=2 2x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=3 3x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=4 4x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=1280&dpr=5 5x"
   media="(min-width: 1280px)"
  >
  <source
    srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=1 1x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=2 2x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=3 3x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=4 4x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=768&h=1024&fit=crop&dpr=5 5x"
    media="(min-width: 768px)"
  >
  <source
    srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=1 1x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=2 2x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=3 3x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=4 4x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=568&h=320&fit=crop&dpr=5 5x"
    media="(min-width: 480px)"
  >
  <img srcset="https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=1 1x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=2 2x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=3 3x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=4 4x,
            https://assets.imgix.net/blog/unsplash-kiss.jpg?w=320&h=568&fit=crop&dpr=5 5x">
</picture>

Notice again that there's no need to create new versions of the image—just create a copy of the source, add a dpr parameter to the URL, and label each one with the appropriate pixel-density descriptor (1x, 2x, etc.).

Your original image is all that's needed to create infinite variations as your needs and designs change.

Summary

imgix is a powerful ally in approaching the complexity of responsive imagery in rapidly-changing designs. With simple parameter changes, you can address new design containers, devices, and device resolutions programmatically instead of reprocessing your entire image catalog.

We also support forward-thinking approaches such as Client Hints that are attempting to simplify responsive design and implementation.

Create a free account today to take advantage of imgix.

Relevant imgix Parameters

• crop | Crop Mode
• dpr | Device Pixel Ratio
• fit | Resize Fit Mode
• rect | Source Rectangle Region

Other Resources

• Media Queries: Curated selection of responsively-designed websites using media queries. Useful for looking at different approaches to art direction.

• Responsive Images 101: Intro series from Cloud Four Design covering all of the methods of doing responsive imagery and their tradeoffs and use cases

• Focal Point Cropping for Responsive Art Direction: Learn how to use <picture> with imgix's focal point cropping parameters to make your images compelling at any size.