WagtailでJPEGとWebPの画像クオリティを変更する

Wagtailではテンプレート上に表示される非可逆圧縮の画像クオリティを指定することができます。JPEGとWebPはデフォルトではクオリティが85に設定されていますが、この設定を変えることで画像クオリティとトレードオフで圧縮率を調整することができます。

画像クオリティを変更するフィルター

JPEGとWebPの画像クオリティはそれぞれ、jpegquality-00とwebpquality-00というフィルターで変更することができます。末尾の00の部分でクオリティの数字を指定します。

テンプレート内での指定は以下のようになります。

<!-- sample_page.html -->

<!-- {% image %}タグを使えるようにする -->
{% load wagtailimages_tags %}

{% image page.photo_jpeg width-400 jpegquality-40 %} <!-- JPEG画像に対してクオリティを40に設定 -->
{% image page.photo_webp width-400 webpquality-50 %} <!-- WebP画像に対してクオリティを40に設定 -->

また、Pythonのコード内でも同様にクオリティを指定することができます。

# models.py

small_photo = photo.get_rendition('fill-200x200|jpegquality-70')
large_photo = photo.get_rendition('fill-800x800|webpquality-60')

注意点としては、PNGやGIFでは画像クオリティの指定はできないことです。上のサンプルでは、元画像がJPEGかWebPであることを前提としていますが、もしそれ以外のファイル形式であるか、どのファイル形式かわからない場合には画像のファイル形式も変更した上でクオリティの指定をしてください。

# models.py

# 画像のファイル形式も指定
small_photo = photo.get_rendition('fill-200x200|format-jpeg|jpegquality-70')
large_photo = photo.get_rendition('fill-800x800|format-webp|webpquality-60')

デフォルトのクオリティを設定する

JPEGとWebPのデフォルトのクオリティは85になっていますが、グローバルな設定で変更することができます。

settings.pyファイルにWAGTAILIMAGES_JPEG_QUALITYとWAGTAILIMAGES_WEBP_QUALITYを指定しましょう。

# settings.py

# Wagtailで管理している全てのJPEGとWebPのデフォルトのクオリティを指定
WAGTAILIMAGES_JPEG_QUALITY = 40
WAGTAILIMAGES_WEBP_QUALITY = 45

この設定はあくまでデフォルトの設定を指定しているだけなので、テンプレート上やPythonファイル上で個別に指定したフィルタには適用されません。つまり、個別の画像にクオリティを指定した場合にはそちらの方が優先されることになります。

また、過去にアップロードした画像に対しても新しく指定したデフォルトのクオリティは適用されないため、もし全ての画像に同様のクオリティを適用したい場合にはDjangoのDBシェルを実行して全てのRenditionを削除してください。

# Wagtailプロジェクトのルートフォルダで実行
# DjangoのDBシェルに入る
$ python manage.py shell

>>> from wagtail.images.models import Rendition # Renditionモデルをインポート
>>> Rendition.objects.all().delete() # 全てのRenditionを削除

ちなみにJPEGに関しては、画像の圧縮率と視覚的なクオリティのトレードオフを鑑みてGoogleがクオリティ85を推奨しています。そのため、通常のメディアやWebサービスの運営では画像クオリティはデフォルトのままで良いと思います。一方で、写真共有サイトやポートフォリオサイトなど、写真のクオリティが非常に重要なサービスの場合には今回紹介した方法で画像クオリティの調整をするのが良いと思います。