wordpressではSimplicity2のテーマをよく使っています。(このサイトもそう)
試しにAMP(β版)を有効にしたところ、AMPページで画像サイズがおかしくなって困ったのですが、原因がわかったので忘れないうちにメモ。
画像サイズがおかしくなる現象
元の画像はこれ↓
元の画像(400*300)
それがこう表示された↓
画像が縦に伸びてる？！というより正方形になってしまってる！
AMPページ
原因を探す
どうやら、AMP画像(amp-img)を生成するときに、画像サイズが300*300に固定されているみたい。
AMP画像のソース
というわけで、amp-imgを生成しているソース(lib/amp.php)を見てみた所、外部サーバー上の画像の場合に幅と高さが固定値(300*300)になるようになっていた。
しかし該当の画像は同じサーバー上にwordpressでアップロードしたもの。
いったい何故？？？
外部サーバー画像扱いになってしまう原因は？
処理を追いかけていくと、最終的にここにたどり着いた。
指定のURLにサイトアドレスが含まれているか判定している処理
サイトのURLと画像のURLを使って、同じサーバーなのか判定している。
ということは画像のURLがおかしい可能性が出てきた。
もう一度画像のソースを見てみると…。
AMP画像のソース
該当サイトのアドレスは「http～」のはずなのに「https」になっているし、
変な文字列「i2.wp.com」がくっついてる！！！
これでは画像URLが同じサイトのURLとして判定されません。
犯人はこいつ
画像のURLがおかしいせいでAMP画像がおかしくなっていることは判った。
では何故URLが書き換わってしまうのか。
こいつのせいだった。
jetpackのメディア設定
jetpackプラグインの設定にある「メディア」の「画像と写真をスピードアップ」を選択していると、画像のURLが書き換わるようだ。
詳細は調べていないが、この設定をOFFにすることでAMPでも画像がちゃんと表示された。
AMPページ
AMP画像のソース
jetpackプラグインをインストールした際に、「オススメの設定にする」みたいなボタンを押したせい。
今後は設定にも目を通すようにしたい。
