Getting started
Basics
Domains & Origins
Performance

Configuration
Basics
Conditions
Dictionaries
Domains & Origins
Request settings
Cache settings
Headers
Responses
Performance
Purging
Custom VCL
Image optimization
Video

Security
Access Control Lists
Monitoring and testing
Securing communications
Security measures
TLS
Web Application Firewall

Integrations
Logging endpoints
Non-Fastly services

Diagnostics
Streaming logs
Debugging techniques
Common errors

Account info
Account management
Billing
User access and control

Reference

    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

    1
    2
    3
    
    <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"
         src="https://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.

    1
    2
    3
    4
    
    <picture>
      <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"/>
    </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.

    1
    2
    3
    4
    5
    
    <picture>
      <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"/>
    </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.
    Back to Top

    Additional resources: