サイトの表示速度を早くする「EWWW Image Optimizer」プラグインでjpeg画像をWebPへ変換

WEBサイトで使用している画像によって、サイトの読み込み速度が遅くなってしまいイライラすることってありますよね・・・。純粋にユーザーにとっても表示に時間がかかるサイトは離脱しやすいので、すぐに改善した方が良いですよね。そんな時は画像ファイルを圧縮して表示速度を早くする対策が必要です。

DesignChips

ページ内に何枚も画像を掲載している記事は読み込むのに時間がかかってしまいます・・・。そんな時は画像ファイルを圧縮してストレスを軽減するのが効果的！

WordPressを利用しているのであれば、「EWWW Image Optimizer」というプラグインがおすすめ。過去にアップロードした画像も一括で圧縮できるので、今すぐ画像ファイルを軽くしてサイトの表示速度を改善しましょう。

EWWW Image Optimizerとは？

「EWWW Image Optimizer」とは、WordPress用の画像最適化プラグインと呼ばれるもので、使いたい画像をアップロードする際に、自動的に画像を圧縮してファイルサイズを軽くしてくれる便利なプラグインです。

ページ内にいくつも画像ファイルを表示しているサイトでは、ページの読み込みに影響がでてきますが、それらの画像ファイルを少しでも軽くしてくれることにより、ページの読み込みを早くする効果があります。サイトのパフォーマンスアップが期待できます。

また、将来的に画像形式の主流が「WebP」になる可能性も高くなってきています。EWWW Image Optimizerでは、WebP変換も可能になっているので、jpgやpng意外にもWebPを利用するなど検討していきましょう。

EWWW Image Optimizerを使用するメリット

EWWW Image Optimizerを使用するメリットは大きく３つあります。

画像を自動的に軽量化してくれる

WordPressのメディアに画像を追加するだけで、自動的に画像の軽量化がされるようになります。自動的にというのが手間なくて助かります。

WebPへの変換ができる

WebPフォーマットは、他の画像形式よりも画質を維持したまま、ファイルサイズが小さくて済みます。

EXIF情報の削除機能がある

画像ファイルには、様々なメタデータという情報が含まれており、膨大な情報をファイルに蓄積しています。その情報を「EXIF情報」と言い、デジタルカメラやスマートフォンで撮影した際に記録される「撮影日時、カメラの種類、レンズの種類、絞り、シャッタースピード、位置情報」などがそれにあたります。これらのメタデータを削除してくれますので、プライバシー保護とセキュリティ対策にも効果があります。

EWWW Image Optimizerプラグインをインストール

ダッシュボードの「プラグイン」→「プラグインを追加」

EWWW Image Optimizerと検索するとプラグインが表示されます。「今すぐインストール」をクリックしたら「有効化」します。

初期設定

有効化してそのまま利用するだけでも、画像圧縮機能が有効化されますが、より圧縮を最適化するには次の初期設定をしておくと良いでしょう。

はじめに表示されるオプション画面では、以下の３項目にチェックを入れます。

• サイトを高速化
• 保存スペースを節約
• 今は無料モードのままにする

この３つにチェックを入れることで、サイトの読み込み速度アップとストレージの節約になります。

次の画面では、以下の２項目にチェックを入れます。

• メタデータ削除
• 遅延読み込み
• WebP変換

WebP変換の下に画像の「幅の上限」と「高さの上限」を入力する項目がありますが、こちらをどちらも「0」に設定します。

次に、ダッシュボードの「設定」→「EWWW Image Optimizer」をクリックし、設定画面を開きます。

「必須」タブに「ルディクロスモード」というボタンがあるので、クリックします。

すると設定画面が変わり、「変換」タブが表示されるので、「変換リンクを非表示」にチェックを入れてください。

次に「必須」タブにある「メタデータを削除」と「WebP変換」」にチェックを入れてください。メタデータとは、画像に含まれる「撮影データの日時や場所、器材情報など」を指します。そじてWebP変換（ウェッピー変換）とは、画像の圧縮率が高く、ファイルサイズの小さい画像フォーマットのことを言います。

ブラウザによってまだWebPフォーマットに対応できていないものもありますが、現在ではGoogleが推奨する「次世代フォーマット」として広く使われるようになっています。このWebPフォーマットを利用することにより、サイトの表示速度が速くなりますのでこの機会にWebPフォーマットを取り入れていきましょう。

「WebP変換」にチェックを入れると、下図のようなコードが表示されます。コードの右下に「PNG」と赤いマークが表示されている場合は、まだWebP設定がされていないことを指します。

WebP設定の方法は２つあります。

• リライトルールを挿入するボタンで一発完了
• サーバー内の「.htaccess」ファイルに直接コードを追記する

もし「リライトルールを挿入する」で行う場合でも、念のためサーバー内の「.htaccess」をバックアップ保存してからボタンをクリックするようにしてください。万が一不具合が出た場合には、バックアップファイルで復元できますので、面倒臭がらずに確実に行いましょう。

いずれかの方法で「WebP変換」の設定が完了したら、実際に変換作業をしていきます。今後アップロードするメディアファイル等は、自動的にWebPに変換されますが、これまでアップロードしてきたものを一括でWebPに変換する作業になります。

「リライトルールを挿入する」または、コードを直接「.htaccess」に追記したら、上図のように『挿入成功』WEBPマークが表示されます。

過去にアップロードした画像を圧縮する

「メディア」→「一括最適化」を選びます。
すると一括最適化画面になり「最適化されていない画像をスキャンする」ボタンが表示されます。

スキャンが完了すると、最適できる画像の数が表示されるので、最適化しておきましょう。

※作業が完了するまで画面は閉じないようにご注意ください。

基本的な設定はこれで完了です。

実際の画像ファイルを確認してチェック

サイト上に掲載されている画像がWebPに変換されているかを確認します。確認するには、サイト上の画像を右クリックで「名前をつけて画像を保存」を押します。

ファイル名のところの拡張子が「.webp」になっていればOKです！ファイルの種類も「WEBPファイル」になっていますね。

今後画像をメディアにアップロードする際に、自動的に画像の最適化してくれます。表示速度がどのくらい変化したかをご自身でも確認してみてください。