サポート » プラグイン » プラグインのWebP Expressを使って画像を表示させる方法を教えてください

  • 解決済 echizenya

    (@echizenya)


    いつもお世話になっています。
    下記の質問についてご存知の方がいらっしゃいましたらご教示を願います。

    【質問の主旨】

    プラグインのWebP Expressをインストールして有効化すると、これまで表示されていた画像が表示されなくなりました。どうすれば画像を表示できるようになるでしょうか?

    【質問の補足】

    1.
    WebP Expressの設定を有効化しただけの状態で「ヘルプが必要なページ」を確認すると、画像が表示されません。
    現在「ヘルプが必要なページ」は、WebP Expressの設定を有効化しただけの状態にしています。

    2.
    こちらのブログ記事では「Operation mode」で「Varied image responses」を選択し「Alter HTML」にチェックするように書かれています。この状態に変更して保存しても画像は表示されません。

    3.
    公式プラグインとして紹介されているWebP Expressのページを読みましたが、どのような操作をすれば画像を表示させられるかについて言及した箇所を見つけることはできませんでした。

    4.
    WebP Expressをインストール・有効化することで、/wp-content/webp-express/と言うディレクトリができました。こちらの記事で新しくディレクトリができることに言及されていますが、この内容をどのように応用したら画像が表示されるようになるのか分かりません。

    以上、ご確認よろしくお願い申し上げます。

    • このトピックは1 ヶ月前に  echizenya さんが編集しました。理由: 脱字があったため

    ヘルプの必要なページ: [リンクを見るにはログイン]

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • munyagu

    (@munyagu)

    こんにちは

    WebP Express の設定画面で WebP への変換方法を選択すると思うのですが、それはサーバーでサポートされている方法でしょうか?

    echizenya

    (@echizenya)

    @munyagu さん。
    いつもコメントありがとうございます。

    WebP Express の設定画面で WebP への変換方法を選択すると思うのですが、それはサーバーでサポートされいる方法でしょうか?

    ここでおっしゃている「WebP への変換方法を選択する」と言うのはこちらの画像のように、”Conversion”の項目のことを指しているのでしょうか?

    munyagu

    (@munyagu)

    GD が有効になっているのなら、サーバーでのサポートは問題ないものと思います。

    ishitaka

    (@ishitaka)

    こちらのブログ記事では「Operation mode」で「Varied image responses」を選択し「Alter HTML」にチェックするように書かれています。この状態に変更して保存しても画像は表示されません。

    「Varied image responses」の説明に、「In the “Varied image responses” mode, WebP Express creates redirection rules for images, such that a request for a jpeg will result in a webp – but only if the request comes from a webp-enabled browser.」とあります。

    mod_rewrite モジュールが組み込まれていないため、リダイレクトできないのではないでしょうか。

    @munyagu さん。
    いつもコメントありがとうございます。

    GD が有効になっているのなら、サーバーでのサポートは問題ないものと思います。

    了解しました。

    @ishitaka さん。
    いつもコメントありがとうございます。
    以下の2点についてご回答を申し上げます。
    特に2番目のコメントについてアドバイスいただけると幸いです。

    1.

    mod_rewrite モジュールが組み込まれていないため、リダイレクトできないのではないでしょうか。

    ヘルプが必要なページはサーバーとして「さくらのVPS」を用いています。アドバイスにもとづき、Apaceの設定ファイルに追記をしたり、ドキュメントルートディレクトリに.htaccessを新たに作成しました。

    # vi /etc/httpd/conf/httpd.conf
    G(最終行に移動)
    LoadModule rewrite_module modules/mod_rewrite.so
    
    # vi /var/www/html/.htaccess
    
    # BEGIN WebP Express
    <IfModule mod_rewrite.c>
      RewriteEngine On
    
      # Redirect to existing converted image in cache-dir (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteCond %{DOCUMENT_ROOT}/wp-content/webp-express/webp-images/doc-root/wp-content/$1.$2.webp -f
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/webp-express/webp-images/doc-root/wp-content/$1.$2.webp [NC,T=image/webp,E=EXISTING:1,L]
    
      # WebP Realizer: Redirect non-existing webp images to webp-realizer.php, which will locate corresponding jpg/png, convert it, and deliver the webp (if possible) 
      RewriteCond %{REQUEST_FILENAME} !-f
      RewriteRule ^/?(.+)\.(webp)$ /wp-content/plugins/webp-express/wod/webp-realizer.php [E=DESTINATIONREL:wp-content/$0,E=WPCONTENT:wp-content,NC,L]
    
      # Redirect images to webp-on-demand.php (if browser supports webp)
      RewriteCond %{HTTP_ACCEPT} image/webp
      RewriteCond %{REQUEST_FILENAME} -f
      RewriteCond %{QUERY_STRING} (.*)
      RewriteRule ^/?(.+)\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?%1 [E=REQFN:%{REQUEST_FILENAME},E=WPCONTENT:wp-content,NC,L]
    
      <IfModule mod_headers.c>
        <IfModule mod_setenvif.c>
          # Set Vary:Accept header for the image types handled by WebP Express.
          # The purpose is to make proxies and CDNs aware that the response varies with the Accept header. 
          SetEnvIf Request_URI "\.(jpe?g|png)" ADDVARY
          Header append "Vary" "Accept" env=ADDVARY
    
          # Set X-WebP-Express header for diagnose purposes
          # Apache appends "REDIRECT_" in front of the environment variables defined in mod_rewrite, but LiteSpeed does not.
          # So, the next line is for Apache, in order to set environment variables without "REDIRECT_"
          SetEnvIf REDIRECT_EXISTING 1 EXISTING=1
          Header set "X-WebP-Express" "Redirected directly to existing webp" env=EXISTING
        </IfModule>
      </IfModule>
    
    </IfModule>
    <IfModule mod_mime.c>
      AddType image/webp .webp
    </IfModule>
    
    # END WebP Express
    :wq
    # systemctl restart httpd.service

    操作・記述内容は以下の2つのブログ記事を参考にしています。

    2.
    1.の操作・記述をしたにも関わらず、ヘルプが必要なページでは現在も画像ファイルは表示されていません。

    一方でこちらの画像のように/wp-content/webp-express/webp-images を確認すると/webp-images より下にはディレクトリがありません。そのため上述した/var/www/html/.htaccessの内容では実際のディレクトリの内容と差があるような気がします。

    もし/var/www/html/.htaccessに記述する内容をご存知であれば、教えていただきたく思います。

    以上、ご確認よろしくお願い申し上げます。

    1 について

    mod_rewrite.so 自体が組み込まれていないのではないでしょうか?
    なお、Apache に関する質問は、Apache のフォーラムなどで質問された方が、的を得た回答を受けることができると思います。

    2. について

    In the “Varied image responses” mode, WebP Express creates redirection rules for images, such that a request for a jpeg will result in a webp – but only if the request comes from a webp-enabled browser.

    リクエストが WebP 対応ブラウザから送信された場合にのみ作成されるようです。リライトできていないのが原因ではないかと思われます。

    echizenya

    (@echizenya)

    @ishitaka さん。
    たびたびのコメントありがとうございます。

    mod_rewrite.so 自体が組み込まれていないのではないでしょうか?

    そうかもしれません。mod_rewrite.soの存在そのものがよく分かっていないので、他の質問投稿サイトで質問をしてみます。今回の質問については解決済みとさせていただきます。

    今後ともどうぞよろしくお願いします。

    echizenya

    (@echizenya)

    今回の質問は解決済みとします。

9件の返信を表示中 - 1 - 9件目 (全9件中)
  • このトピックに返信するにはログインが必要です。