- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2020-07-22T03:57:35+09:00;1970-01-01T18:00:00+09:00","default:tgoto","tgoto")
JPGやPNGなどの画像をWEBP形式にすることによってファイル容量を減らすことができ、ひいては通信速度の向上によりPagespeed insightsのスコアの改善を期待することができます。しかしWEBP画像は現時点ではSafariに対応しておらず（近日中にMacとiOSのSafariはWEBP対応の予定）、IEでも開くことができません。このためWEBP画像を使用する場合は非対応ブラウザでは適切なfallbackを設定しておいて従来のJPGやPNGを表示できるようにしてあげなければなりません。
今回はrefプラグインで画像を保存しているフォルダに同名のWEBP画像があるかどうかを探してみて、もしWEBP画像あってかつ対応ブラウザであればWEBP画像を表示し、WEBP画像が存在しないか非対応ブラウザの場合にはもとどおりのJPG画像かPNG画像を表示するという改造を行いました。
#ogp(https://amp.dev/ja/documentation/guides-and-tutorials/develop/style_and_layout/placeholders/)
参考までに、当サイトでは基本的に画像を/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
** 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>";
}
***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>";
}
なお、ほかに画像を出力するOGPプラグインなどもこの改造を実施しています。
#ogp(https://oncologynote.com/?12173bf026)