ネットで稼ぐスキルを身に付けて独立を実現させる

輸入やアフィリエイトを実践してネットで収入を稼ぐことで独立を目指します。

  • ホーム
  • グーグルアドセンス
  • コンサル生の声
  • 椎名の経歴・実績
  • サイトマップ
  • お問い合わせ
ホーム › WordPress(ワードプレス)

WebPで「次世代フォーマットでの画像の配信」に合格する方法

WebPで「次世代フォーマットでの画像の配信」に合格する方法

ページ表示速度のスコアをチェックするPageSpeed Insightsで、「次世代フォーマットでの画像の配信」を改善して、「合格した監査」にする方法について紹介します。

「次世代フォーマットでの画像の配信」というのは、画像ファイルのフォーマットに「JPEG 2000」「JPEG XR」「WebP」を使用することです。

これまでの画像ファイルのフォーマットといえば、「PNG 」や「JPEG」が一般的でした。

それに対して次世代画像フォーマットは、「PNG 」や「JPEG」よりも圧縮性能が高いので、画像の質を落とさずに画像ファイルのサイズを小さくすることができます。

そのため、ページを表示するときの画像の読み込み速度が速くなり、ページの表示スピードも上がります。

 

ワードプレスで作ったサイトであれば、すでに「PNG 」や「JPEG」で画像ファイルをアップロードしていても、簡単に一括で画像ファイルを次世代フォーマットの「WebP」にすることができます。

そして、PageSpeed Insightsの「次世代フォーマットでの画像の配信」にも合格します。

この記事では、ワードプレスで使用している画像ファイルのフォーマットを「PNG 」「JPEG」から「WebP」に簡単に変換して、「次世代フォーマットでの画像の配信」に合格する方法について解説します。

目次

  • 1 プラグイン「EWWW Image Optimizer」をインストールする
  • 2 「EWWW Image Optimizer」の設定
  • 3 「EWWW Image Optimizer」で画像ファイルをWebP形式に一括変換する
  • 4 次世代フォーマットでの画像の配信を確認する
  • 5 まとめ

プラグイン「EWWW Image Optimizer」をインストールする

ワードプレスで画像を次世代フォーマットのWebPに変換するために「EWWW Image Optimizer」というプラグインを使います。

ワードプレスでおすすめのプラグインは「WordPress(ワードプレス)初心者におすすめプラグイン7選」にまとめています。

 

「プラグイン」-「新規追加」をクリック

ワードプレス管理ページの左メニューで「プラグイン」-「新規追加」をクリックします。

 

「EWWW Image Optimizer」と入力

「プラグインの検索」に「EWWW Image Optimizer」と入力します。

 

「今すぐインストール」をクリック

「EWWW Image Optimizer」の「今すぐインストール」をクリックします。

 

「有効化」をクリック

「有効化」をクリックします。

 

これでワードプレスで「EWWW Image Optimizer」が使えるようになります。

 

「EWWW Image Optimizer」の設定

次に「EWWW Image Optimizer」で画像ファイルをWebPに変換できるように設定していきます。

 

「設定」-「EWWW Image Optimizer」をクリック

ワードプレス管理ページの左メニューで「設定」-「EWWW Image Optimizer」をクリックします。

 

「Webp」をクリック

「Webp」をクリックします。

 

「変更を保存」をクリック

「ほかのブラウザでは元の画像を提供し、対応するブラウザ用では画像を次世代の形式に変換します。」をチェックして、「変更を保存」をクリックします。

 

「リライトルールを挿入する」をクリック

「リライトルールを挿入する」をクリックします。

 

「ルールが正常に検証されました」と表示

「ルールが正常に検証されました」と表示されて、右の画像が緑背景に白地のWEBPに変わります。

※SafariはWebpに対応していないので、画像は変わりません。FirefoxやChromeで確認してみてください。

 

「EWWW Image Optimizer」で画像ファイルをWebP形式に一括変換する

次に「EWWW Image Optimizer」で画像ファイルをWebP形式に一括変換します。

変換されるファイルは、ワードプレスのメディアライブラリにアップロードされているファイルになります。

※「EWWW Image Optimizer」の「上級者向け」の設定で、メディアライブラリ以外のフォルダにある画像を変換することもできます。

 

「メディア」-「一括最適化」をクリック

ワードプレス管理ページの左メニューで「メディア」-「一括最適化」をクリックします。

 

「最適化されていない画像をスキャンする」をクリック

「圧縮をスキップし、WebP 変換のみを試みます。」にチェックを入れて、「最適化されていない画像をスキャンする」をクリックします。

画像ファイルの圧縮も行う場合は、「圧縮をスキップし、WebP 変換のみを試みます。」にチェックを入れる必要はないです。

今回はWebP変換のみ行うので、チェックを入れています。

 

「画像を最適化」をクリック

最適化される画像数が表示されるので、「画像を最適化」をクリックします。

 

最適化の進捗状況が表示

 

最適化の進捗状況が表示されます。

 

「完了」と表示

画像ファイルの最適化が終わると「完了」と表示されます。

 

画像ファイルのWebP変換は、元の画像を残したまま、WebP形式の画像ファイルが新たに作られます。

※画像の圧縮も行う場合は、元画像が圧縮された画像で上書きされます。

作成されるWebPファイルの拡張子は「.wbep」です。

例えば、「aaa.jpg」という画像ファイルがあれば、新しく「aaa.jpg.wbep」というファイルが作成されます。

 

「EWWW Image Optimizer」を使うことで、画像ファイルのWebP変換が一括で行えるので便利です。

 

次世代フォーマットでの画像の配信を確認する

画像ファイルをWebPに変換したら、きちんと画像が表示されているかを確認します。

確認にはFirefoxの開発ツールを使います。

ブラウザをFirefoxにして、画像を変換したサイトを開きます。

 

「ツール」-「ウェブ開発」-「開発ツールを表示」をクリック

Firefox上部のメニューから「ツール」-「ウェブ開発」-「開発ツールを表示」をクリックします。

 

「ネットワーク」をクリック

表示された開発ツールの「ネットワーク」をクリックします。

 

ファイルタイプを確認

ファイルの「タイプ」が「webp」になっていることが確認できます。

 

「再読み込み」をクリック

もし一覧が表示されていない場合は、「再読み込み」をクリックします。

 

PageSpeed Lnsightsでチェックすると、WebP変換前は、

改善できる項目

改善できる項目に「次世代フォーマットでの画像の配信」がありましたが、

WebP変換後は、

合格した監査

「合格した監査」に「次世代フォーマットでの画像の配信」が移りました。

 

まとめ

PageSpeed Insightsで「次世代フォーマットでの画像の配信」の項目を改善して監査に合格することは、「EWWW Image Optimizer」を使うことで簡単にできます。

画像フォーマットをWebPに変換して最適化することで、サイトの読み込みスピードも上がります。

ですので、ページの表示スピードが遅いことで、訪問ユーザーが離脱してしまうことも避けることができます。

画像ファイルが最適化されていないと、特にスマホからのアクセス時に表示が重くなりがちなので、今回の記事を参考にして次世代フォーマットでの画像の配信を試してみてください。

PageSpeed Insightsのスコアを改善するためにも、「次世代フォーマットでの画像の配信」の項目は対策しやすいです。

PageSpeed Insightsのその他の項目の改善については「サイトページの表示速度を改善した7つの方法」での対策が効果的なので読んでみてください。

同じカテゴリーの記事

ブログのコピー禁止でコピペできないようにする防止対策ブログのコピー禁止でコピペできないようにする防止対策 WordPressおすすめプラグイン10選 超便利なので最初にインストール! WordPressでサムネイル付き関連記事を表示するプラグイン wumii(ウーミー)とYARPP どっちがおすすめ? エックスサーバーの契約方法と料金支払い手順&海外からの申し込み方法エックスサーバーの契約方法と支払い方法&海外在住者の申し込み手順 ワードプレス(wordpress)のおすすめプラグイン一覧 作り方と使い方 アフィリエイトに最適なワードプレステンプレートはSTINGER(スティンガー)アフィリエイトに最適なワードプレステンプレートはSTINGER(スティンガー) ワードプレスをSSL化(https化)する設定方法ワードプレスをSSL化(https化)する設定方法 ワードプレスブログの始め方と作り方WordPressブログのインストールと始め方【初心者講座】 海外在住者でも申し込めるレンタルサーバーはカゴヤ海外在住者でも申し込めるレンタルサーバーはカゴヤ(KAGOYA)がおすすめ! WordPress(ワードプレス)初心者におすすめプラグイン7選【2020年最新】WordPress(ワードプレス)初心者におすすめプラグイン7選! レンタルサーバー& プラン比較ランキングWordPressにおすすめのレンタルサーバー比較ランキング! ブログネタがない人必見!ネタ探しに困らなくなる7つの方法ブログネタがない人必見!ネタ探しに困らなくなる7つの方法

本日のおすすめ記事

【安全な副業】主婦が家にいてお金を稼ぐ方法TOP5

専業主婦にピッタリな自宅で稼ぐ安全な副業方法を完全解説します。 この方法で月10万円以上稼いでいる主婦の方はたくさんいますし、パソコンやスマホさえあれば誰でもできる100%安全な方法です。 実際に私の妻(専業主婦)も自宅で子育てし … 続きを読む

この記事を書いた人:椎名 大

椎名 大

アメリカのIT企業で働く傍ら、副業でネットビジネスを開始。ゼロからスタートして、1年半後には月収1000万円を達成。その後、アメリカで会社を設立して独立。現在はアドセンスのスペシャリストとして、コンサルティング、WEBを活用したマネタイズからWEBマーケティング、ツール開発まで日本、アメリカを中心に幅広く活動しています。

ネットビジネスをシンプルに捉えましょう!

  • 0
  • 0
  • 1
  • 1

カテゴリー:WordPress(ワードプレス)

前の記事:
ブログのアクセス数(PV)を増やす記事の書き方!5つのステップ解説
次の記事:
ブログで主婦の方が在宅副業10万円達成のご感想

コメントを残す コメントをキャンセル

ご質問&ご感想をお気軽にどうぞ!
メールアドレスが公開されることはありません。

著者:椎名 大

椎名 大

アメリカのIT企業で働く傍ら、副業でネットビジネスを開始。ゼロからスタートして、1年半後には月収1000万円を達成。その後、アメリカで会社を設立して独立。現在はアドセンスのスペシャリストとして、コンサルティング、WEBを活用したマネタイズからWEBマーケティング、ツール開発まで日本、アメリカを中心に幅広く活動しています。

実績

<実績>
開始3ヶ月で月収30万円達成
9ヶ月で月収100万円達成
コンテンツ販売で日給300万円達成
アドセンスで月収40〜60万円(毎月)
インフォトップ報酬1600万円達成
月収200万円自動化
月収1000万円達成

<コンサル>
月収10万円以上:90名以上
月収20万円以上:39名以上
月収50万円以上:12名
月収100万円以上:6名

<メルマガ>
読者数9000名突破
⇒ 無料メルマガ

<レポート>
トレティクス全書:メルぞう新着1位

⇒ 椎名の経歴・実績

カテゴリー

Googleアドセンス57
アフィリエイト35
WordPress(ワードプレス)17
  • WebPで「次世代フォーマットでの画像の配信」に合格する方法
  • ブログネタがない人必見!ネタ探しに困らなくなる7つの方法
  • WordPressにおすすめのレンタルサーバー比較ランキング!
  • 【2020年最新】WordPress(ワードプレス)初心者におすすめプラグイン7選!
  • 海外在住者でも申し込めるレンタルサーバーはカゴヤ(KAGOYA)がおすすめ!
  • WordPressを常時SSL化する作業手順まとめ!httpsにするには?
  • WPXクラウドでワードプレスブログを作る方法【初心者向け】
  • WordPressブログのインストールと始め方【初心者講座】
  • ワードプレスをSSL化(https化)する設定方法
  • アフィリエイトに最適なワードプレステンプレートはSTINGER(スティンガー)
  • ワードプレス(wordpress)のおすすめプラグイン一覧 作り方と使い方
  • エックスサーバーにワードプレスをインストールする方法と始め方
  • エックスサーバーの契約方法と支払い方法&海外在住者の申し込み手順
  • WordPressでサムネイル付き関連記事を表示するプラグイン wumii(ウーミー)とYARPP どっちがおすすめ?
  • WordPressおすすめプラグイン10選 超便利なので最初にインストール!
  • ブログのコピー禁止でコピペできないようにする防止対策
  • エックスサーバーのWordPress国外IPアクセス制限で特定IPのみ許可する方法
おすすめ無料ブログ9
SEO対策34
副業おすすめ12
輸入ビジネス12
ネットビジネスで稼ぐマインド13
コンサル生実績24
月収10万円実績構築プログラム8
椎名大について2

よく読まれている記事

  • Googleアドセンスのやり方と稼ぎ方

  • アドセンスで稼ぐ方法を知る!それが最も簡単な副業です。

  • 【安全な副業】主婦が家にいてお金を稼ぐ方法TOP5

  • アフィリエイトで失敗しないサーバー選び エックスサーバーの評価まとめ

  • 家にいながら50万稼ぐことはできるか実例!主婦・会社員・大学生向け

  • サーチコンソールの使い方と登録方法 初心者向けに完全解説!

  • 特化ブログで記事作成を外注化して収益を自動化させる方法

  • アフィリエイトブログで稼ぐやり方 おすすめ副業収入

  • WordPressにおすすめ!レンタルサーバー&プラン比較ランキング

  • WordPress(ワードプレス)ブログの始め方と作り方 初心者講座 -完全版-

おすすめの実践講座

アドセンスのやり方と稼ぎ方
主婦が安全な副業で月10万円を稼ぐ方法
アフィエイトに最適なサーバーはエックスサーバー

月別アーカイブ

椎名漫画

Follow Me

  • Facebook
  • RSS
  • Twitter
  • Youtube

Copyright © 2023 · SIB · All Rights Resered.

運営会社 · 特定商取引法に基づく表記 · プライバシーポリシー