WordPressでavif形式の画像がクリック時にダウンロードされてしまう場合の対処法

以下のようにavif形式画像をリンクしている場合、クリック時にダウンロードしてしまうという場合の対処法です。通常はリンククリックでモーダル表示されるように設定していますが、今回はなぜかダウンロードしてしまうという現象に陥りました。

<a href="/sample.avif"><img src="/sample.avif"></a>

結論から言えば、サーバー側がavifファイルのMIMEタイプを認識できていないためです。

ということで、.htaccessファイルに以下の行を追加します。これはApacheを使用しているサーバーの場合です。

# AVIF MIMEタイプの追加
AddType image/avif .avif

Nginxの場合はサーバー設定ファイルにtypes { image/avif avif; }を追加してサーバー再起動で完了。

自分の運営しているサイトではFirelight Lightboxというプラグインでモーダル表示させていたので、設定の「FancyBox Classic: Images」にある「Autodetect」の項目に.avifを追加しておきます。

とりあえずこれで解決します。