WordPressを使って多くのコンテンツを投稿すると、自然と扱う画像の枚数も増えていきます。
画像ファイルはサイトの表示速度を低下させるという問題があり、結果として離脱率が大きくなってしまうという課題が残ります。
しかし、画像の数を減らすのは見やすいサイトとは呼べなくなってしまいます。
そこで利用するのが、画像のサイズを圧縮してくれる「EWWW Image Optimizer」という無料プラグインです。
今回は、「EWWW Image Optimizer」の設定方法と使い方を紹介いたします。
【Autoptimize】WordPressで最初に入れたい無料プラグイン
当サイトではブログ作成にAFFINGER5(アフィンガー)を推奨していますが、実際にAFFINGER5(アフィンガー)を ...
続きを見る
EWWW Image Optimizerとは
「EWWW Image Optimizer」は、画像を劣化させることなく、画像をアップする際に自動で画像サイズを圧縮してくれるプラグインです。
「EWWW Image Optimizer」は新しい画像をアップロードするときに自動でサイズを圧縮してくれるだけでなく、すでにアップしている画像も一括で圧縮することができるので非常に便利です。
とはいえ、やはりはじめに設定しておく方が効率的なので、初めに環境構築しておくことをオススメします。
EWWW Image Optimizerの導入方法
管理画面のメニュー「プラグイン」>「新規追加」から、「EWWW Image Optimizer」で検索。「いますぐインストール」をクリックし、有効化します。
管理画面の左メニューの「設定」の中に「 EWWW Image Optimizer 」という項目が追加されています。
これをクリックすると詳細設定の画面にアクセスできます。
EWWW Image Optimizer の設定方法
ベーシック
黄色い下線を引いた「メタデータを削除」をチェックすることで、画像のメタデータを削除してくれます。結果、可能な限り画像のファイルサイズを小さくすることができます。
画像のメタデータとは、撮影場所やカメラ情報などを含む情報が記載されているデータの事です。
チェックする項目
- メタデータを削除
変換
黄色い下線を引いた「コンバージョンリンクを非表示」をチェックしてください。
チェックを入れておかないと「png→jpg」に変換したり「jpg→png」に勝手に変換をしてしまいます。
画像の拡張子を変えると画像の質が下がることがあるため、この項目には必ずチェックを入れ、変更を保存する様にしてください。
チェックする項目
- コンバージョンリンクを非表示
EWWW Image Optimizer の基本的な使い方
使い方で抑えておくべき操作は次の2つです。
ポイント
- 新規画像の圧縮
- 既存の画像を一括で圧縮
新規画像の圧縮
EWWW Image Optimizer は、インストールするだけで画像を新規投稿したら自動で圧縮してくれます。
どの程度圧縮されたのかは、左メニューの「メディア → ライブラリ」の画像一覧画面で確認することができます。
既存の画像を一括で圧縮
EWWW Image Optimizer では、過去にアップした画像をまとめて圧縮することが可能です。
左メニューから「メディア → 一括最適化」をクリックしてください。
一括最適化の画面に移るので、「最適化されていない画像をスキャンする」を選択してください。
応用編「WebP(ウェッピー)」を活用する
Googleも推奨している次世代の画像フォーマットである「WebP(ウェッピー)」を設定する方法をご紹介します。
次世代画像フォーマットとは?
次世代画像フォーマットとは従来のPNGやJPEGより圧縮性能の高い、新しい画像フォーマットです。
JPEG2000、JPEG XR、WebP(ウェッピー)などの種類があります。
それぞれに特徴がありますが、WebPはGoogleが開発している画像フォーマットであり、対応ブラウザもかなり増えてきていることを考慮すると今後の主流になる事が予想されます。
WebP対応ブラウザ
Google Chrome / Mozilla Firefox / Microsoft Edge / Opera
EWWW Image Optimizerを使って画像をWebPに変換する方法
「EWWW Image Optimizer」の設定画面から「WebP」タブを表示します。
そして「JPG、PNGからWebP」にチェックを入れます。最後に「変更を保存」で設定を保存します。
.htaccesファイルへの追記
設定をすると「WebP」タブのページ下部に.htaccessファイルに追記するためのコードが自動生成されます。
また、右下の方に赤の背景色でPNGという表示があります。
これはサイトを閲覧しているブラウザとサイト側がWebPに対応済みの場合は緑色、対応していない場合は赤色のボタンが表示されます。
注意
「リライトルールを挿入する」をクリックすると自動で.htaccessの末尾に構文が挿入されますが、.htaccessの冒頭に挿入する必要があるためこちらは押さないように注意してください。
.htaccessファイルの編集については、WordPressの設置にレンタルサーバを使用している場合、Web管理画面で.htaccessファイルのエディタが提供されていることがほとんどです。
また、FTPを用いてファイルをダウンロードしてテキストエディタで編集してからアップロードするという方法もあります。
ぼくはエックスサーバーを使用しているため、エックスサーバーを使って説明いたします。
エックスサーバーのサーバーパネルにログインし、「ホームページ」の「.htaccess編集」をクリックしてください。
ドメインを選択し、上記タブから「.htaccess編集」を選択してください。
.htaccessファイルに追記するコード
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
RewriteCond %{REQUEST_FILENAME}\.webp -f
RewriteCond %{QUERY_STRING} !type=original
RewriteRule (.+)\.(jpe?g|png)$ %{REQUEST_FILENAME}.webp [T=image/webp,E=accept:1,L]
</IfModule>
<IfModule mod_headers.c>
Header append Vary Accept env=REDIRECT_accept
</IfModule>
AddType image/webp .webp
※ 必ず「.htaccess」ファイルの冒頭に上記構文を挿入するようにしてください。
このコードの意味としては「ブラウザがWebPに対応しているなら画像ファイルをWebPで配信し、非対応なら元のフォーマット(JPEGやPNG)で配信する」という内容です。
つまり、ブラウザが対応している場合のみにWebPを使用するので、次世代フォーマットの設定をしたからといってWebP未対応のブラウザ使用者に悪い影響を与えることはありません。
WebP画像ファイルへの変換
全ての作業が終わったら上記の見出し「既存画像を一括で圧縮」の手順と同様に「最適化されていない画像をスキャンする」ボタンをクリックします。
WebPへの変換が終わったら「WebPタブ」を再び開いて、右下のボタンが緑色で「WebP」と表示されていることを確認します。
まとめ
「EWWW Image Optimizer」を活用することで、簡単にサイトの画像を圧縮することができ、サイト表示速度を向上させることができます。
SEO対策にもってこいの無料プラグインですので、ぜひ使ってみてください。
ぼくはAFFINGER5(アフィンガー)で記事を作成していますが、足りない部分はこのような無料プラグインを使用しています。
気になる方は、関連記事を参考にしてみてくださいね!
【Autoptimize】WordPressで最初に入れたい無料プラグイン
当サイトではブログ作成にAFFINGER5(アフィンガー)を推奨していますが、実際にAFFINGER5(アフィンガー)を ...
続きを見る
AFFINGER5とTHE THORを徹底比較!圧倒的な差が出た!?
アフィリエイトに特化したAFFINGER5(アフィンガー)とSEOに特化したTHE THOR(ザ・トール)。 ブログ作成 ...
続きを見る
【初心者向け】WordPressでブログ(アフィリエイト)を始める方法
はじめに 某有名YouTuberが「走り始めはアフィリエイトだった」と公言し、アフィリエイトのブームが到来しましたね。 ...
続きを見る