ogatomo21
@ogatomo21 (小川 智也)

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

.htaccess でWEBPの分岐が機能しない

解決したいこと

.htaccessで /assets/ フォルダに来たJPEG・PNGを /assets/avif/ のAVIFもしくは /assets/webp/ のWEBPにリダイレクトしてさせていてHTTPのAcceptヘッダーを元に分岐させています。avifへのリダイレクトはいけたのですが対応していないiPhone SE(第一世代,iOS15.8.2)のSafariだと対応していないのにも関わらずAVIFへリダイレクトされ画像が正常に表示できません。有識者の方教えてください。

発生している問題・エラー

画像が表示されず、直リンで見ても四角い何もない画像が出るだけ。

該当するソースコード

.htaccess
<IfModule mod_mime.c>
	AddType	image/webp	.webp
	AddType	image/avif	.avif
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On

    # /assets/ディレクトリ内のリクエストのみ処理
    RewriteCond %{REQUEST_URI} ^/assets/ [NC]

    # AVIFサポートのチェック
    RewriteCond %{HTTP_ACCEPT} image/avif

    # JPEG画像に対するリクエストをAVIFにリダイレクト
    RewriteCond %{REQUEST_FILENAME} (.*)\.jpg$ [NC]
    RewriteCond %{DOCUMENT_ROOT}/assets/avif/$1.avif -f
    RewriteRule ^assets/(.*)\.jpg$ /assets/avif/$1.avif [L,T=image/avif]

    # PNG画像に対するリクエストをAVIFにリダイレクト
    RewriteCond %{REQUEST_FILENAME} (.*)\.png$ [NC]
    RewriteCond %{DOCUMENT_ROOT}/assets/avif/$1.avif -f
    RewriteRule ^assets/(.*)\.png$ /assets/avif/$1.avif [L,T=image/avif]

    # WebPサポートのチェック
    RewriteCond %{HTTP_ACCEPT} image/webp

    # JPEG画像に対するリクエストをWebPにリダイレクト
    RewriteCond %{REQUEST_FILENAME} (.*)\.jpg$ [NC]
    RewriteCond %{DOCUMENT_ROOT}/assets/webp/$1.webp -f
    RewriteRule ^assets/(.*)\.jpg$ /assets/webp/$1.webp [L,T=image/webp]

    # PNG画像に対するリクエストをWebPにリダイレクト
    RewriteCond %{REQUEST_FILENAME} (.*)\.png$ [NC]
    RewriteCond %{DOCUMENT_ROOT}/assets/webp/$1.webp -f
    RewriteRule ^assets/(.*)\.png$ /assets/webp/$1.webp [L,T=image/webp]
</IfModule>

<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>


自分で試したこと

端末のキャッシュクリアや画像の変更、ChatGPTなどに質問

0

1Answer

この(これ以外も)RewriteCond条件束がそもそも無意味で、しかも.htaccessだけでは無理です。スクリプト系での処理を検討するべきです。

# RewriteRuleと被ってる、不要
RewriteCond %{REQUEST_FILENAME} (.*)\.jpg$ [NC]

# 単に"$1.avif"という名前のファイルを追ってだけので意味が無い(正規表現として成り立ってない)
RewriteCond %{DOCUMENT_ROOT}/assets/avif/$1.avif -f
0Like

Comments

  1. @ogatomo21

    Questioner

    とりあえず分岐させるようだったロゴファイルをSVGで作り直してなんとか見れるようになりました。今後はpictureタグやスクリプトの利用も考えます。ありがとうございました。

Your answer might help someone💌