Adding images to AMP pages

AMP pages require special attention when you'd like to use JavaScript. With the right code, it is possible to embed 360 spins, image zooms, media galleries and responsive images in AMP Pages.

You can also serve your Sirv images as static images, with all their benefits: image optimization, optimal format and Sirv CDN.

Responsive images on AMP Pages

Your images will be automatically served by the Google AMP Cache as semi-responsive versions. Images are not pixel-perfect like Sirv responsive images but they'll be approximately sized for the users screen, using srcset attributes.

You can let AMP do this automatically, or you can specify which image sizes to serve to different screen sizes. The example below shows how to choose the responsive image sizes in your AMP page, using w (or h) in the image URL to specify image dimensions.

<amp-img alt="Specialized bike"
  src="https://demo.sirv.com/test-bike.jpg?w=1000"
  width="1000"
  height="1184"
  layout="responsive"
  srcset="https://demo.sirv.com/test-bike.jpg?w=640 640w,
          https://demo.sirv.com/test-bike.jpg?w=320 320w">
</amp-img>

Additional AMP image optimization

The Google AMP Cache also performs most of the other image optimization benefits that Sirv delivers by default. Images with the amp-img tag will inherit:

• Selective metadata removal (Sirv will have already done this).
• Conversion to next-gen image formats such as WebP (Sirv will have already done this).
• Reduction in image quality if the request includes the Save-Data header.