Adding images to AMP pages

On this page

AMP doesn't permit third party JavaScript, so its not possible to embed 360 spins, image zooms or Sirv's truly responsive images (scaled to the exact pixel) in an AMP page. However, you can still embed your Sirv images as static images.

You'll also still benefit from Sirv's dynamic imaging capability, 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.

Was this article helpful?

Get help from a Sirv expert