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 element and how to implement it most effectively with imgix. <picture> 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 (resolution switching). adjust the image's resolution to the device 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 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. <picture> In this case, you do want to command the browser directly, in spite of the potential performance hit. Using imgix and for Art Direction <picture> imgix has two main benefits when using the 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. <picture> Second, it helps minimize the performance hit by optimizing the image and caching all of the different versions requested. The element is for some legacy browsers. You can use to add support for those clients. Note: <picture> not available Picturefill 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 , we've covered the basics, adjusting a single image as needed to provide the most compelling version of the image for each target size. <picture> However, with a few additions to this code, it's possible to make a powerful tool for automating art direction across your entire image set, not just a single isolated photo. <picture> 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 modes to programmatically adjust where the cropping starts, without having to manually output pre-cropped versions for different aspect ratios. crop imgix offers two modes that crop based on image content: and . They work similarly by evaluating the image and either detecting faces or areas of high contrast and then cropping with those at the center. crop=faces crop=entropy There's more detail about how to use these modes in our guides about and . making avatars point-of-interest cropping Let's see how using 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. <picture> 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 might normally cause. <picture> Cropping View faces/entropy cropping examples in the CodePen https://codepen.io/imgix/pen/ZQVXBY?embedable=true See the Pen by imgix ( ) on . Picture Element & Art Direction with imgix @imgix 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 alignment ( , etc.) and sometimes to zoom in on a portion of the image at smaller sizes. crop=faces crop=entropy crop=top rect 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 to art direct even more dramatically. <picture> View watermark/blend examples in the CodePen https://codepen.io/imgix/pen/NxoadL?embedable=true Adding DPR Support If you want to support multiple pixel resolutions within , you can do so by adding variations to each . For example, if we wanted to support a higher-density device for our original example, the code would look like this: <picture> DPR srcset <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 parameter to the URL, and label each one with the appropriate pixel-density descriptor ( , , etc.). dpr 1x 2x Your original image is all that's needed to create infinite variations as your needs and designs change. Summary 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. imgix We also support forward-thinking approaches such as that are attempting to simplify responsive design and implementation. Client Hints to take advantage of imgix. Create a free account today Relevant imgix Parameters | Crop Mode crop | Device Pixel Ratio dpr | Resize Fit Mode fit | Source Rectangle Region rect Other Resources Curated selection of responsively-designed websites using media queries. Useful for looking at different approaches to art direction. : Media Queries Intro series from Cloud Four Design covering all of the methods of doing responsive imagery and their tradeoffs and use cases : Responsive Images 101 Learn how to use with imgix's focal point cropping parameters to make your images compelling at any size. : Focal Point Cropping for Responsive Art Direction <picture>

Too Long; Didn't Read

Making security fun one episode at a time

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

Too Long; Didn't Read

imgix

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

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

Too Long; Didn't Read

imgix

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES