Hear from Slack, the ACLU, TED, & more at our customer summit in San Francisco Register
LOG IN SIGN UP
Documentation

Serving responsive images

  Last updated April 17, 2017

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="http://www.fastly.io/image.jpg?width=320&dpr=1.5 1.5x,
             http://www.fastly.io/image.jpg?width=320&dpr=2 2x"
     src="http://www.fastly.io/image.jpg?width=320"/>

Learn about srcset browser support and specification.

Art direction

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

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

Learn about <picture> browser support and specification.

Type-switching

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

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

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