Zenn
📸

a-blog cms で WebP画像対応している場合に元画像を表示する方法

2023/12/05に公開
WebP
a-blog cms
tech

a-blog cms にはWebP画像の自動生成機能があります。
https://developer.a-blogcms.jp/document/reference/webp.html

WebP画像を利用することで画像の容量を大幅に減らすことができ、パフォーマンスの向上が期待できます。しかし、ときにはWebP画像ではなく元画像であるJPEGやPNGを表示したい場面もあるかもしれません。

そこで、今回は基本的にはWebP画像を表示したいが、特定のページだけ元画像を表示したいという場面に対応する方法を紹介します。

クエリパラメーターで、type=original を指定する

結論として、画像のURLにクエリパラメーターとして type=original を指定することでWebP画像ではなくJPEGやPNGなどの元画像を表示することができます。

例えば、Entry_Summaryモジュールでエントリーのメイン画像を元画像として表示したい場合は以下のように記述します。

<!-- BEGIN_MODULE Entry_Summary id="{{module_id}}" -->
	<!-- BEGIN unit:loop -->
	<!-- BEGIN entry:loop -->
	<!-- BEGIN image:veil -->
	<img 
	  src="%{ROOT_DIR}{path}[resizeImg(273,180)]?type=original"
	  alt="" 
	  class="acms-img-responsive"
	  width="273"
	  height="180"
	/>
	<!-- END image:veil -->
	<!-- END entry:loop -->
	<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

これだけです。

.htaccess で type=original を指定した場合はWebP画像を返さないように設定されている

仕組みの説明ですが、こちら実はa-blog cmsの機能ではなく、Webサーバーの .htaccess で type=original をクエリパラメーターで指定した場合はWebP画像を返さないようになっています。

a-blog cms ダウンロード時に同梱されている .htaccess を見てみましょう。以下は、Ver. 3.1.5時点での .htaccess です。

.htaccess
# webpフォーマット画像対応
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1]
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
    AddType image/webp .webp
</IfModule>

特に以下の記述が重要です。

.htaccess
RewriteCond %{QUERY_STRING} !type=original

↑ の設定により、type=original をクエリパラメーターで指定した場合はWebP画像を返さないようになっています。

いつ使うのか

とてもニッチな場面だと思うのですが、Satoriというライブラリを利用してOGP画像を自動生成する機能を実装していたときに使いました。

背景画像は a-blog cms のカスタムフィールドで設定できるようにしたいと考えていたのですが、どうやら Satori はWebP画像に対応していないみたいでエラーがでてしまいました。

https://github.com/vercel/satori/issues/311

そこで、type=original をクエリパラメーターで指定して元画像を表示させることで解決することができたというお話です。

まとめ

a-blog cms で WebP画像対応している場合に元画像を表示する方法を紹介させていただきました。とてもニッチな内容ですが、どこかでお役に立てると幸いです。

明日のa-blog cms Advent Calendar 2023 6日目は、株式会社データファームさんの記事です。是非お楽しみに！

Discussion