サーバー側の画像リサイザーを使用して、画像を正しいサイズで自動的に提供しています。
画像リサイザーは、リクエスト URL からサイズ変更のパラメーターを取得するので、画像の URL をもう少しきれいにするために、いくつかの .htaccess 書き換えルールを設定しました。
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w1140-h640-c16x9-q100-p1/v2/photos/$1 [R=301]
上記を使用http://example.com/photos/homehero/file.jpgして、コードで使用でき、正しいサイズの写真が返されます。これはそのままで完全に機能し、リサイザーは生成後に画像をサーバーに自動的にキャッシュするため、サイトはかなり高速です. 現在、5 種類のサイズの画像があります。
画面サイズと帯域幅を考慮して、モバイル ユーザー向けに、幅と高さを縮小し (w1140-h640上記)、品質も縮小した別の画像セット (上記) を提供したいと思います。q100
書き換えルールの 2 番目のセットでユーザー エージェントを検出する書き換え条件を追加しました。これは、元のルールを下回っています。たとえば、次のとおりです。
RewriteCond %{HTTP_USER_AGENT} "(android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w570-h320-c16x9-q50-p1/v2/photos/$1 [R=301]
しかし、これはうまくいかないようです。最初のブロックの上に 2 番目のブロックを配置しようとしましたが、どちらも機能しませんでした。また%{HTTP_USER_AGENT} "!(android|、「通常の」書き換えルール ブロックの前にユーザー エージェント ( ...)の not フラグを使用しようとしましたが、それはうまくいきませんでした。動作しません。
StackOverflow をグーグル検索して検索したところ、似ているがそうではない質問が見つかったので、これが .htaccess で実際に達成できるかどうか疑問に思っています 私の完全なルールブロックは以下にあります。どんな助けでも大歓迎です。
#Image Resizer Standard sizes
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w1140-h640-c16x9-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/tile-small/(.*)$ /v2/imgr/w504-h252-c6x3-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/hero/(.*)$ /v2/imgr/w1140-h200-c57x10-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/productshot/(.*)$ /v2/imgr/w1140-h640-c16x9-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/gallerythumb/(.*)$ /v2/imgr/w160-h90-c16x9-q100-p1/v2/photos/$1 [R=301]
# mobile site redirection
RewriteCond %{HTTP_USER_AGENT} "(android|blackberry|googlebot-mobile|iemobile|iphone|ipod|opera mobile|palmos|webos)" [NC]
RewriteRule ^.*photos/homehero/(.*)$ /v2/imgr/w570-h320-c16x9-q50-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/tile-small/(.*)$ /v2/imgr/w504-h252-c6x3-q50-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/hero/(.*)$ /v2/imgr/w570-h100-c57x10-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/productshot/(.*)$ /v2/imgr/w570-h320-c16x9-q100-p1/v2/photos/$1 [R=301]
RewriteRule ^.*photos/gallerythumb/(.*)$ /v2/imgr/w160-h90-c16x9-q100-p1/v2/photos/$1 [R=301]