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.
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.
<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.
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. Simply apply the parameters needed to adjust the size, cropping, and device pixel ratio if needed. Second, it helps minimize the performance hit by optimizing the image and caching all of the different versions requested.
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.
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 master 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.
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=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 a master 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.
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=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.
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.
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 Retina devices (which generally have a DPR of 2) for our original example, the code would look like this:
Notice again that there's no need to create a new set of Retina versions of the image—just create a copy of the source, add
dpr=2 to the URL, and label each one with the appropriate dpr setting (
2x, etc.). Your master image is all that's needed to create infinite variations as your needs and designs change.
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.
- Media Queries: Curated selection of responsively-designed websites using media queries. Useful for looing 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.