事前になるべく覚えておきたい感じ

ささっとタグ行ってもいいんですが、各タグに付与できるプロパティの話を先に少しだけできたらいいなって事で
まずはプロパティのお話をしましょう。

共通のプロパティについて

タグの羅列をする前に、共通のプロパティのお話を先にしておく必要がありそうなので
先にここで。プロパティってのは例えばimgタグであれば、widthやheight等がプロパティ扱いになりますね

fallback

読み込みが行われなかった時に表示されるものと覚えていただければ○です。

<amp-img alt="A view of the sea" src="images/sea.jpg" width="900" height="675" layout="responsive">
  <p fallback>画像の読み込みに失敗しました・・・</p>
</amp-img>

heights

画像サイズ(高さ)の切り替えを行います。
heights="【トリガーとなるブラウザサイズ】【トリガー外でのサイズ(高さ)】,【トリガー値を超えた場合の画像比率(高さ、%指定の場合はheightの指定値から計算】)"

<amp-img alt="A view of the sea" src="images/sea.jpg" width="900" height="675" layout="responsive" heights="(min-width:500px) 200px, 80%" ></amp-img>

これだけでは非常にわからんので以下

heights="(max-width:300px) A,B)"の場合

【ブラウザサイズが300px以上の場合は、Bの値がheightに適用される】
【ブラウザサイズが300px未満の場合は、Aの値がheightに適用される】

heights="(min-width:300px) A,B)"の場合

【ブラウザサイズが300px以上の場合は、Aの値がheightに適用される】
【ブラウザサイズが300px未満の場合は、Bの値がheightに適用される】

layout

その要素ってどんな感じなん？レスポンシブなん？みたいなのを指定できます。

<amp-img alt="A view of the sea" src="images/sea.jpg" width="900" height="675" layout="responsive" ></amp-img>

指定できる値は以下の通りです。レスポンシブの画像のあしらいなのか、そうじゃないのかを分けます。
レスポンシブの画像の場合はそのまま画像はアスペクト比に併せて縮小されます。
レスポンシブでない場合、ブラウザ幅を小さくさせると画像は切れます。(overflow:hiddenの形)

nodisplay	要素を非表示にします。display:none;と同じような動きと考えて下さい。
fixed	要素の幅と高さは固定となります。
responsive	そのままレスポンシブのように動作します。画面サイズに応じてアスペクト比を維持しながら拡大縮小を行います。
fixed-height	高さのみが固定となります。横並びのブロック等で使えそうっすね。ちなみに、widthの値は【指定無し】または他同一要素と同じ数値にする必要があります。
fill	親要素のwidth/heightに合わせる形をとります。
container	幅/高さに関しては子要素のものが基準となります。なので親要素に対してつけるものであり、コンテナとして配置したい場合に使用しましょう
flex-item	親要素がdisplay:flex;の場合、に子要素に付与します。まぁ、flex-itemなので、なんとなくわかりそうですが。親要素の領域を子要素の数だけわけわけして表示させます。

media

mediaqueryのような感覚で指定できます。
min-width: 650px:ブラウザサイズ650px以上で表示
max-width: 650px:ブラウザサイズ650px以下で表示
って事です。

<amp-img 
  alt="A view of the sea" 
  src="images/sea.jpg" 
  width="900" 
  height="675" 
  media="(min-width: 650px)" >
  </amp-img>
<amp-img 
  alt="A view of the sea" 
  src="images/sea.jpg" 
  width="900" 
  height="675" 
  layout="responsive" 
  media="(max-width: 649px)" >
</amp-img>

ちなみに画像サイズが同じで画像を一定のブラウザサイズで変えたい場合は上記より以下の手法のほうが手早く記述できるでしょう
この場合は、320wと640wのみの表示となります。
じゃぁsrcの画像どこいったんだよ・・・ってなりますが(´・ω・`)

<amp-img 
  alt="A view of the sea" 
  src="images/sea.jpg" 
  srcset="/img/wide.jpg 640w,
          /img/narrow.jpg 320w"
  width="900" 
  height="675" >
  </amp-img>

noloading

今読み込み中だぜー的なロードインジケータ、これを表示しない場合は、このプロパティを書いてあげます

<amp-img 
  alt="A view of the sea" 
  src="images/sea.jpg" 
  width="900" 
  height="675" 
  noloading >
  </amp-img>

on

イベントハンドラ的なもんです。
機能によって内容が違ってたりしますので、ここでは記述しません。

placeholder

親要素で何か(動画とかgifアニメでもなんでも)を読み込んでいる間に別の物を表示させたい場合に使用します。
親要素の読み込みが完了し表示できる準備が整い次第、この要素は削除され、親要素が表示されます。

<amp-anim src="images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300">
  <amp-img placeholder
    src="images/wavepool.png"
    layout="fill">
  </amp-img>
</amp-anim>

fallback

placeholderは読み込み前の表示でしたが、fallbackに関しては、読み込みが失敗した時に表示されるものです
これも同じく子要素に付与するプロパティとなります。

<amp-anim src="images/wavepool.gif"
  layout="responsive"
  width="400"
  height="300">
  <amp-img fallback
    src="images/wavepool.png"
    layout="fill">
  </amp-img>
</amp-anim>

sizes

responsiveが指定された要素に指定ができます。
指定方法は、mediaと同じ。imgに限らず他の要素にも適用できるようです。

< amp-img  src = "amp.png" 
    width = "400"  height = "300" 
    layout = "responsive" 
    sizes = "（最小幅：320px）320px、100vw" > 
</ amp-img >

width / height

説明不要！！！！！(๑´ڡ`๑)