AMP-HTMLでの画像の注意点
AMPでは、imgタグが使えないので、amp-img タグに置き換える必要がある。
例
<amp-img alt="alt"
src="url"
width="500"
height="322"
layout="responsive">
cssもamp-imgを指定すれば設定することができる。
layout属性をつけることで、CSSハックしなくても表示方法を変えることができる。例で指定している方法では、コンテナ要素に応じて幅を変えてくれるレスポンシブを指定している。また、media属性で、端末の幅に応じた表示を変えることができる。media="(max-width: 735px)"と指定すっれば、734px以下時の画像内容を指定できる。srcset もサポートしているので、そちらを使用してもできるが、アセット用意するのが面倒くさい場合は、これでもいい（のか？）
参考
カルーセル表示
横軸にスライドさせて画像を表示できるコンポーネント。雑記のからあげクンレビューなどで使用。
headに以下を追加
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
表示したい箇所にamp-carouselタグに表示したいamp-imgを入れ込んでいく。
<amp-carousel width="300" height="433">
//一つ目を指定
<amp-img alt="karaagekun_4_1.jpeg"
src="karaagekun_4_1.jpeg"
width="300"
height="433" lightbox>
</amp-img>
//二つ目を指定
<amp-img alt="karaagekun_4_2.jpeg"
src="/tantan/images/karaagekun_4_2.jpeg"
width="300"
height="433" lightbox>
</amp-img>
//三つ目を指定
<amp-img alt="karaagekun_4_3.jpeg"
src="/tantan/images/karaagekun_4_3.jpeg"
width="300"
height="433" lightbox>
</amp-img>
</amp-carousel>
オプションでオートプレイやループ、サムネイルボタンの表示などを行うことができる。コンポーネントの使い方ページにサンプルもある
参考
light box
画像を拡大表示させることができるlight box コンポーネントがあるので、それを使うと元画像のリンクを張らずとも拡大できる
headに以下を追加
<script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script>
あとは簡単。amp-img に lightboxと書き足すだけ。画像をタップ（クリック）すれば拡大表示される
<amp-img alt="karaagekun_4_1.jpeg"
src="/tantan/images/karaagekun_4_1.jpeg"
width="300"
height="433" lightbox>
</amp-img>
lightbox コンポーネントに気付くまで、元画像リンクはっていたけど、それだとAMPcacheされたときに折角爆速になっているのに意味がないことに気付いた。ちゃんとコンポーネント類のドキュメントは目を通さないとダメだね。
まだ時間ができたらまとめて追記していこうと思う