Simplicity2を使用したAMPページの画像サイズがおかしくなる原因

wordpressではSimplicity2のテーマをよく使っています。(このサイトもそう)
試しにAMP(β版)を有効にしたところ、AMPページで画像サイズがおかしくなって困ったのですが、原因がわかったので忘れないうちにメモ。

広告

画像サイズがおかしくなる現象

元の画像はこれ↓

元の画像

元の画像(400*300)

それがこう表示された↓
画像が縦に伸びてる?!というより正方形になってしまってる!

AMPページ

AMPページ

原因を探す

どうやら、AMP画像(amp-img)を生成するときに、画像サイズが300*300に固定されているみたい。

AMP画像のソース

AMP画像のソース

というわけで、amp-imgを生成しているソース(lib/amp.php)を見てみた所、外部サーバー上の画像の場合に幅と高さが固定値(300*300)になるようになっていた。

しかし該当の画像は同じサーバー上にwordpressでアップロードしたもの。
いったい何故???

外部サーバー画像扱いになってしまう原因は?

処理を追いかけていくと、最終的にここにたどり着いた。

サイトアドレスが含まれているか判定しているソース

指定のURLにサイトアドレスが含まれているか判定している処理

サイトのURLと画像のURLを使って、同じサーバーなのか判定している。
ということは画像のURLがおかしい可能性が出てきた。
もう一度画像のソースを見てみると…。

AMP画像のソース

AMP画像のソース

該当サイトのアドレスは「http~」のはずなのに「https」になっているし、
変な文字列「i2.wp.com」がくっついてる!!!
これでは画像URLが同じサイトのURLとして判定されません。

犯人はこいつ

画像のURLがおかしいせいでAMP画像がおかしくなっていることは判った。
では何故URLが書き換わってしまうのか。

こいつのせいだった。

jetpackのメディア設定

jetpackのメディア設定

jetpackプラグインの設定にある「メディア」の「画像と写真をスピードアップ」を選択していると、画像のURLが書き換わるようだ。
詳細は調べていないが、この設定をOFFにすることでAMPでも画像がちゃんと表示された。

AMPページ

AMPページ

AMP画像のソース

AMP画像のソース

jetpackプラグインをインストールした際に、「オススメの設定にする」みたいなボタンを押したせい。
今後は設定にも目を通すようにしたい。

広告

シェアする

フォローする