- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-07-22T03:57:35+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
#author("2020-07-22T04:34:35+09:00;2020-07-22T03:57:35+09:00","default:tgoto","tgoto")
#ref(https://oncologynote.com/img/5b041d2a93.png,nolink,WEBP画像のフォールバック)
JPGやPNGなどの画像をWEBP形式にすることによってファイル容量を減らすことができ、ひいては通信速度の向上によりPagespeed insightsのスコアの改善を期待することができます。しかしWEBP画像は現時点ではSafariに対応しておらず（近日中にMacとiOSのSafariはWEBP対応の予定）、IEでも開くことができません。このためWEBP画像を使用する場合は非対応ブラウザでは適切なfallbackを設定しておいて従来のJPGやPNGを表示できるようにしてあげなければなりません。
今回はrefプラグインで画像を保存しているフォルダに同名のWEBP画像があるかどうかを探してみて、もしWEBP画像あってかつ対応ブラウザであればWEBP画像を表示し、WEBP画像が存在しないか非対応ブラウザの場合にはもとどおりのJPG画像かPNG画像を表示するという改造を行いました。
*WEBP画像のフォールバックとは
#ogp(https://amp.dev/ja/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/)
高速化のためにWEBP画像を表示できるようにamp-imgを設定しつつ、もしWEBP画像が存在しなかったり非対応ブラウザの場合はJPGやPNGなどの互換性の高いファイル形式を表示できるようにしておくことです。amp-imgの場合は設定は簡単で、amp-imgタグの中にamp-imgタグを入れてfallbackと記載しておくだけです
><amp-img alt="Mountains"
> width="550"
> height="368"
> layout="responsive"
> src="/img/image.webp">
> <amp-img alt="Mountains" fallback
> width="550"
> height="368"
> layout="responsive"
> src="/img/image.jpg"></amp-img>
></amp-img>
AMPページではなく通常のHTMLページでもAMPライブラリを読み込んでいればこの方法を使うことは可能といえば可能ですが、非AMPページではpictureタグを使うのが一般的かと思います。pictureタグはIEなどは非対応なので考慮する必要があります。
><picture>
> <source srcset="image.webp" type="image/webp">
> <source srcset="image.jpg" type="image/jpeg">
> <img src="image.jpg">
></picture>
また、上記の真ん中の行は削除しても画像表示可能です。
><picture>
> <source srcset="image.webp" type="image/webp">
> <img src="image.jpg">
></picture>
#ogp(https://qiita.com/mikimhk/items/abb525c304cf49f30350)
*具体的なref.inc.phpの改造内容
参考までに、当サイトでは基本的に画像を/img/フォルダに保存しています。また、AMP対応のためにもともとrefプラグインはAMP対応改造を実施していました。
*具体的な改造内容
**設定項目PLUGIN_REF_WEBP_FALLBACKの新設
まず「フォルダにWEBP画像を探してみてファイルがなければfallbackするか」を設定する項目を作っておきます。40〜41行目に下記の項目を新設しました。フォルダにWEBP画像を探してみるならTRUE、この改造を使用しないならFALSEです。
// フォルダにWEBP画像を探してみてファイルがなければfallbackするか
define('PLUGIN_REF_WEBP_FALLBACK', TRUE); // FALSE, TRUE
>// フォルダにWEBP画像を探してみてファイルがなければfallbackするか
>define('PLUGIN_REF_WEBP_FALLBACK', TRUE); // FALSE, TRUE
** 358-363行目
358行目付近の具体的な画像のHTMLタグ出力部を下記のように改造します。
***AMP化改造を済ませた時点のrefプラグイン（改造途中）
PLUGIN_REF_URL_GET_IMAGE_SIZEをTRUEにしておく必要があります。
if ($is_image) { // 画像
$params['_body'] = "<amp-img src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img>";
if (! $params['nolink'] && $url2)
$params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
} else {
$icon = $params['noicon'] ? '' : FILE_ICON;
$params['_body'] = "<a href=\"$url\" title=\"$info\">$icon$title</a>";
}
> if ($is_image) { // 画像
> $params['_body'] = "<amp-img src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img>";
> if (! $params['nolink'] && $url2)
> $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
> } else {
> $icon = $params['noicon'] ? '' : FILE_ICON;
> $params['_body'] = "<a href=\"$url\" title=\"$info\">$icon$title</a>";
> }
***FALLBACKの設定後のrefプラグイン（改造後）
if ($is_image) { // 画像
if ( PLUGIN_REF_WEBP_FALLBACK ) {
$urlwebp = pathinfo($url, PATHINFO_DIRNAME ) . '/' . pathinfo($url, PATHINFO_FILENAME ) . '.webp'; //同じディレクトリにwebp画像があるか探す
$params['_body'] = "<amp-img src=\"$urlwebp\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info><amp-img fallback src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img></amp-img>"; //webp画像fallback
} else {
$params['_body'] = "<amp-img src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img>";
}
if (! $params['nolink'] && $url2)
$params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
} else {
$icon = $params['noicon'] ? '' : FILE_ICON;
$params['_body'] = "<a href=\"$url\" title=\"$info\">$icon$title</a>";
}
> if ($is_image) { // 画像
> if ( PLUGIN_REF_WEBP_FALLBACK ) {
> $urlwebp = pathinfo($url, PATHINFO_DIRNAME ) . '/' . pathinfo($url, PATHINFO_FILENAME ) . '.webp'; //同じディレクトリにwebp画像があるか探す
> $params['_body'] = "<amp-img src=\"$urlwebp\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info><amp-img fallback src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img></amp-img>"; //webp画像fallback
> } else {
> $params['_body'] = "<amp-img src=\"$url\" layout=\"intrinsic\" alt=\"$title\" title=\"$title\" $info></amp-img>";
> }
> if (! $params['nolink'] && $url2)
> $params['_body'] = "<a href=\"$url2\" title=\"$title\">{$params['_body']}</a>";
> } else {
> $icon = $params['noicon'] ? '' : FILE_ICON;
> $params['_body'] = "<a href=\"$url\" title=\"$info\">$icon$title</a>";
> }
なお、ほかに画像を出力するOGPプラグインなどもこの改造を実施しています。
#ogp(https://oncologynote.com/?12173bf026)
#ogpi(https://oncologynote.com/?12173bf026)