Serving responsive images

  Last updated June 29, 2018

The Fastly Image Optimizer allows you to generate optimized images for use in responsive websites. The examples below describe several common use cases to get you started implementing responsive images.

Adaptive device pixel ratios

Deliver a fixed-width image that can adapt to varying device-pixel-ratios

<img srcset="https://www.fastly.io/image.jpg?width=320&dpr=1.5 1.5x,
             https://www.fastly.io/image.jpg?width=320&dpr=2 2x"

Learn about srcset browser support and specification.

Art direction

Use the HTML5 <picture> tag to deliver different image crops at different browser viewport sizes.

  <source srcset="https://www.fastly.io/image.jpg?width=600&crop=16:9" media="(min-width: 600px)"/>
  <img src="https://www.fastly.io/image.jpg?width=320&crop=1:1"/>

Learn about <picture> browser support and specification.


Use the best file format for the browser and allow graceful fallback for non-supporting formats.

  <source type="image/webp" srcset="https://www.fastly.io/image.webp"/>
  <source type="image/png" srcset="https://www.fastly.io/image.png"/>
  <img src="https://www.fastly.io/image.jpg"/>

Learn about <picture> browser support and specification.

This article describes a product that may use third-party cloud infrastructure to process or store content or requests for content. For more information, see our cloud infrastructure security and compliance program.

Additional resources:

Back to Top