Google AMP Images Library

Google AMP Images

Each column is contained within rows, which are contained within a container. This grid is built mobile-first, so all columns will expand to the full container width on smaller screens.

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

Google AMP Images · Responsive

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 Google 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>

Google AMP Images · Thumbnails

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>

Google AMP Images · Aligning

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>

Google AMP Images · Grid

<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>

Google AMP Images · Masonry

<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>