「次世代フォーマットでの画像の配信」をプラグイン EWWW Image Optimizer でスピード解決する方法

PageSpeed Insights 改善シリーズの新作です。

▼該当記事

今回は、「次世代フォーマットでの画像の配信」についてお伝えいたします。

EWWW Image Optimizerとは

EWWW Image Optimizerとは、画像を圧縮して表示速度を高速化するプラグインです。
ただ圧縮するではなく画像を劣化させることなく画像サイズを圧縮してくれます。

プラグインをインストールしておくだけで、新しくアップロードする画像を自動的に圧縮してくれる優れもの!!

また既存の画像も一括で圧縮できるので、SEO対策には欠かせないプラグインです。

EWWW Image Optimizerが出来る事

そんなEWWW Image Optimizerは画像を圧縮してくれるほかに、次世代フォーマット画像WebPへの変換作業もできるという優れものです。

そう!「次世代フォーマットでの画像の配信」問題はEWWW Image Optimizerを利用した次世代フォーマット画像WebPへの変換という事で解決です。

WebPとは

WebP(ウェッピー)とは次世代フォーマット画像の一つで、高圧縮でありながら、高解像度を維持できるGoogleが開発した画像拡張子です。ファイルの拡張子は「.webp」と表示されます。

jpegと同じ解像度にも関わらず、30%近く容量が軽く、アニメーションの表現もでき、PNGのような透過表現にも対応しています。まさに次世代の画像フォーマットですね。

では、早速にインストールしていきましょう。

インストール方法

プラグインの新規追加で検索窓にewwwと入れると検索結果に出てきます。

今すぐインストール】をクリックし、有効化すれば完了です。

設定方法

プラグインからEWWW Image Optimizerを探して【設定】をクリックします。

初期設定

上側のチェックボックスは目指す目標を選択します。
選択した方に最適な設定を推奨してくれるようになります。
今回はサイト表示スピードの向上が目的なので【サイトの高速化】にチェックを入れます。

下側のチェックボックスは有料のサポートが必要か、無料モードの選択になりますので【今は無料モードのままにする】にチェックを入れて【】を押します。

基本的にはデフォルト状態のチェック項目のままで問題ありません。

  • メタデータを削除
    メタデータとは簡単に言えばデータのデータです。作成日やサイズなど、写真の場合は撮影した位置情報もメタデータです。
  • 遅延読み込み
    遅延読み込みはファーストビュー以外の画像を後から後から表示します。初期表示の高速化になりますのでチェックしておいてください。
  • WebP変換
  • 1920幅の1920高さの上限で設定してください。
  • 埋め込みヘルプ
    チェックあり。
  • 著名の報告
    チェックなし。

以上を確認して頂いて【設定を保存】を押します。

完了】を押せば初期設定は以上です。

基本設定

不足している寸法を追加にチェックするとレイアウトシフト対策になります。
不都合が起きたらチェックを外しましょう。

また、ブログで使用する画像幅を均等にする場合は画像のリサイズの幅を設定してください。
アップロードする画像が指定したピクセルより大きければ自動的にリサイズしてアップロードしてくれます。ただ大きく表示したい画像もリサイズされてしまうので注意しましょう。

WebPの設定

アップロードする画像を自動的にWebPに変換する設定です。

WebP変換】にチェックを入れると、その下に.htaccessに書き足すコードが出てきます。これはWebP非対応のブラウザに対し、jpgやpngを代用する設定になります。

.htaccessはftpを使用して編集をします。ftpの使用方法は下記の記事を参考にしてください。

▼参考記事

新しいブラウザはほぼWebPに対応していますが、古いブラウザや非対応のブラウザのために画像を表示できるようにする設定です。

コードは# END WordPressの直前にペーストすればOKです。
ペーストが完了したら保存しましょう。

.htaccessの編集が完了したら【リライトルールを挿入する】を押します。

緑色でWebPに変更されれば完了です。
変更を保存】を押して設定を保存して下さい。

以上でこれからアップロードする画像は次世代フォーマット画像へ自動的に変換されます。

画像のWebP変換と圧縮

次はアップロード済みの画像の変換・圧縮作業に移ります。
引き続き設定画面での作業です。

設定画面の上の方にある【一括最適化】を選択します。

最適化されていない画像をスキャンする】を選択します。
※一括最適化はWordPressダッシュボードのメディア→一括最適化があります。どちらから作業しても大丈夫です。

最適化できる画像が〇〇点ありますと出るので【〇〇点の画像を最適化】を押します。

完了になれば最適化終了です。

まとめ

簡単な操作で次世代フォーマットの画像に一括変換でき、アップデートする画像も自動で次世代フォーマットに変換してくれとても便利です。

もし、上手く設定出来ない時はエクセレントまでご相談頂ければと思います。

▼該当サービス
ホームぺージレスキューサービス

ホームへージ制作サービス

フルオーダーメイドのSEO対策

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策が得意なホームぺージ制作会社エクセレント

筒井 章年

Web制作歴25年。1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でWeb集客の立案やコンサルティングを担当しています。集客問題を解決できるノウハウをわかりやすくご紹介いたします!

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. Instagram(インスタグラム)の魅力的なプロフィールの書き方を解説します

  2. Instagram(インスタグラム)まとめ記事 プロフィールについて

  3. Instagram(インスタグラム)とは?いまさら聞けないInstagramの基礎知識

  4. あなたのビジネスをインスタ集客×ブログ接客で売上を3倍にする方法

  5. インスタグラム(Instagram) まとめ記事 業種別 インスタグラム運用の参考になるアカウントを紹介します

  6. Instagramのショッピング機能(Shop Now)の審査が通らない原因や再審査方法を紹介します。

  7. Instagram(インスタグラム)インスタショップ-Shop Now-の設定方法 【2022年最新版】

  8. インスタグラム(Instagram) まとめ記事 ストーリーズ投稿動画とは? ストーリーズ投稿についての基礎知識を解説します

  9. インスタグラム(Instagram) まとめ記事 リール動画とは? リール動画についての基礎知識を解説します

  10. インスタグラムマーケティングとは?Instagram運用に向いている企業と向いていない企業

  1. Instagram(インスタ)のリールの音源を保存して活用する方法

  2. Instagramのリール動画やTicktockやYoutubeのショート動画にたくさんの会社が力を入れている理由

  3. Instagram(インスタグラム)で集客を始める時に知っておくべき集客のコツ12選

  4. 初心者が知っておくべき基本的なSEO対策とは?上位表示に必要なやり方・方法について解説します。

  5. 検索意図とは?SEO対策で重要な調べ方と考え方を解説します。

  6. ホームページが検索結果に表示されない時の原因と対処方法を徹底解説!

  7. 【2022年版】Web集客の種類とその方法を集客にお困りのあなたに分かりやすく解説します

  8. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  9. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  10. これを見れば完璧!Google Maps API 取得方法をご紹介します。

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP