AMP CSS Images Library

Documentation and examples for opting images into responsive behavior: AMP CSS Images Library.

AMP Images

<amp-img
  alt="..."
  src="..."
  width="..."
  height="...">
</amp-img>

Responsive Images

The runtime may choose to delay or prioritize resource loading based on the viewport position, system resources, connection bandwidth, or other factors. The amp-img components allows the runtime to effectively manage image resources this way.

amp-img components, like all externally fetched AMP resources, must be given an explicit size (as in width / height) in advance, so that the aspect ratio can be known without fetching the image. Actual layout behavior is determined by the layout attribute.

<amp-img
  alt="..."
  src="..."
  width="..."
  height="..."
  layout="responsive">
</amp-img>
Thumbnail Images

You can use .img-thumbnail to give an image a rounded 1px border appearance.

<amp-img
  class="img-thumbnail"
  alt="..."
  src="..."
  width="..."
  height="...">
</amp-img>
Aligning Images

You can use .img-thumbnail to give an image a rounded 1px border appearance.

<amp-img
  class="img-thumbnail float-left"
  alt="..."
  src="..."
  width="..."
  height="...">
</amp-img>
<amp-img
  class="img-thumbnail float-right"
  alt="..."
  src="..."
  width="..."
  height="...">
</amp-img>
Grid Images
<div class="col-lg-4 col-md-12">
  <amp-img
    alt="..."
    src="..."
    width="..."
    height="..."
    layout="responsive">
  </amp-img>
</div>
<div class="col-lg-4 col-md-12">
  <amp-img
    alt="..."
    src="..."
    width="..."
    height="..."
    layout="responsive">
  </amp-img>
</div>
<div class="col-lg-4 col-md-12">
  <amp-img
    alt="..."
    src="..."
    width="..."
    height="..."
    layout="responsive">
  </amp-img>
</div>
<div class="col-6">
  <amp-img
    alt="..."
    src="..."
    width="..."
    height="..."
    layout="responsive">
  </amp-img>
</div>
<div class="col-6">
  <amp-img
    alt="..."
    src="..."
    width="..."
    height="..."
    layout="responsive">
  </amp-img>
</div>
Masonry Images
<div class="col-12">
  <div class="masonry">
    <div class="brick">
      <amp-img
        class="img-masonry"
        alt="..."
        src="..."
        width="..."
        height="..."
        layout="responsive">
      </amp-img>
    </div>
    <div class="brick">
      <amp-img
        class="img-masonry"
        alt="..."
        src="..."
        width="..."
        height="..."
        layout="responsive">
      </amp-img>
    </div>
    <div class="brick">
      <amp-img
        class="img-masonry"
        alt="..."
        src="..."
        width="..."
        height="..."
        layout="responsive">
      </amp-img>
    </div>
    <div class="brick">
      <amp-img
        class="img-masonry"
        alt="..."
        src="..."
        width="..."
        height="..."
        layout="responsive">
      </amp-img>
    </div>
  </div>
</div>

Bootstrap images documentation

Read more

AMP images documentation

Read more
We use cookies to optimize site functionality and give you the best possible experience.