【Wordpress】JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

https://toreblog0928.com

ブログ

【WordPress】JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

この記事では、【JPEG・PNG形式の画像をWebP化してくれるWebP Express】について分かりやすく解説していきます。

WebP Expressとは…

  • 一般的なブログサイトの画像はJPEG形式かPNG形式
  • Googleは次世代形式となるWebPを推奨
  • JPEG形式かPNG形式の画像をWebP化してくれるプラグイン
  • 使い方と設定が簡単

難しい設定は不要です。

プラグインをインストールし有効化するだけでWebP形式で表示されます。

過去に書いたすべての記事の画像も一括で変換してくれるため、ひとつひとつの画像を修正する必要はありません。

ブログサイトの表示速度の改善対応を考えている人におすすめのプラグイン。

今回は、WebP Expressの設定方法を画像を使って解説していきます。

この記事の内容

  • WebP Expressの設定方法

WebP Expressのインストール方法

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】
  • WordPress管理画面
  • プラグイン
  • 新規追加
  • WebP Express」で検索

または、「WebP Express」よりダウンロードし、インストールします

WebP Expressの使い方

WebP Expressの設定は非常に簡単です。

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

上の画像と同じ部分にチェックを入れて、右上の「Save setting」を押すだけです。

たったこれだけの設定変更で、サイト内の画像のHTMLが自動的に書き換わるようになります。

WebPをサポートしているブラウザではWebPで、未対応ブラウザでは従来の画像形式で読み込みます。

その他の設定オプション

WebP(ウェッピー)の表示方法に関する6つの設定オプションが用意されています。

主要な設定箇所と内容について解説していきます。

  • Operation mode
  • General
  • .htaccess rules
  • Conversion
  • Alter HTML
  • Web service

Operation mode

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

Operation modeでは、画像応答モードを設定できます。

webPをサポートしているブラウザかどうかによって、レスポンスとして返す画像フォーマットを指定します。

デフォルトの「Varied image responses」のままで大丈夫です。

General

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

Generalでは、WebPに変換する対象の範囲を設定できます。

アップロードフォルダの画像だけを対象にするか、テーマの画像も対象にするか、JPG画像のみを対象にするかなどの設定が可能です。

Generalも変更する必要はなく、デフォルトのままで大丈夫です。

.htaccess rules

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

.htaccess rulesでは、.htaccessのリダイレクトルールについて設定できます。

「既存の変換された画像への直接リダイレクトを有効にするか」

「リクエストに応じてwebpファイルを作成するか」などの設定が可能。

.htaccess rulesもデフォルトのままで大丈夫です。

Conversion

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

Conversionでは、画像の圧縮率の設定ができます。

  • JPEG、PNGそれぞれの形式においてどれだけ画像を圧縮させるか
  • メタデータをWebPにも含めるかどうか
  • どの画像変換ライブラリを使用して圧縮させるか

といった設定をしますが、圧縮率を指定する必要がなければデフォルトのままで大丈夫です。

Alter HTML

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

Alter HTMLでは、HTMLコードの書き換え方法の設定ができます。

「Alter HTML?」にチェックした上で、2つの中から書き換え方法を選択します。

  • Replace <img> tags with tags, adding the webp to srcset.
    ・imgタグをpictureタグに置き換えsrcsetにwebpを追加する方法
    ・すべてのブラウザに同じHTMLを提供
    ・ページキャッシュ機能の利用が可能
  • Replace image URLs
    ・画像のURLを直接WebPのものに置き換える方法

デフォルトは❶の「Replace tags with tags, adding the webp to srcset.」になっています。

画像のURLを直接WebPに置き換える必要がなければ、そのままで大丈夫です。

Web service

JPEG・PNG形式の画像をWebP化してくれる便利なプラグイン【WebP Express】

Web serviceでは、クラウドのWebサービスを通じてwebp変換をできるように設定できます。

ラベルやAPIキーの設定、エンドポイントの確認ができます。

専門的な知識を持っている人以外は、デフォルトのままで大丈夫です。

まとめ

いかがでしたか?

この記事では、【JPEG・PNG形式の画像をWebP化してくれるWebP Express】についてまとめてみました。

WebP Expressとは…

  • 一般的なブログサイトの画像はJPEG形式かPNG形式
  • Googleは次世代形式となるWebPを推奨
  • JPEG形式かPNG形式の画像をWebP化してくれるプラグイン
  • 使い方と設定が簡単

インストールして有効化。

Alter HTMLにチェックを入れて設定を保存するだけで、すべての画像が置き換わりサイト表示速度の改善に繋がります。

サイト表示速度の改善策を模索している人に、おすすめのプラグインです。

よく読まれている記事

コピーライティング7つのコツ 1

コピーライティング覚えられないんですけど… そんな人のために、この記事では… ライティングスキルがなくても 人の心に訴える 文章を作る(書く)7つのコツ について、紹介していきます。 とくに、Twit ...

ブログで毎月10,000円の収益を生み出す9ステップ 2

この記事では、ブログで収益化を生み出すためにやるべきことを9つのステップに分けて解説していきます。 ブログを書いているのに全然稼げない… 1円の売り上げもつかない… ASPサービスの紹介ばかりで書きた ...

【kindle10冠&ベストセラー】反響を得るためにやったすべてのコト 3

たくさんの人の支えをいただき、自身が出版した【分かりやすい文章に変える40のコツ】、kindleストアで10冠&ベストセラーを達成しました。 この記事では、kindleストアでランキング上位を獲るため ...

【月々200円】通常1,500円の有料版Canva Proを5人でシェアしてお得に使う方法 4

この記事では、【有料版のCanva Proを5人でシェアしてお得に使う方法】を解説していきます。 無料版のCanvaでは物足りない… 有料版を使いたいけど1,500円は高い… お得に使える方法はないで ...

【Googleが掲げる10の事実】理解し実践することが一番有効なSEO対策 5

SEO対策は、なにをどうしたらいいですか?そもそもSEOってなんですか…? 多くのブロガーが悩まされる根源 それが… SEO この記事では、SEO対策の基本中の基本となる【 Googleが掲げる10の ...

-ブログ
-,