WordPressに限らずブログやメディアを運営している人は、少なからず画像を使用していますよね。
ある程度ブログで使用する画像が増えてくると
「あれ？サイトが重くなった気がする」
「アナリティクスの読者の直帰率が最近上がってきちゃってる」
そんな悩みが出てきている方も多いでしょう。
この記事では、そんなあなたの重くなったWordPressサイトを高速化するために最適な画像圧縮ツール「Squoosh」と画像ファイルサイズを圧縮してくれるプラグイン「EWWW Image Optimizer」を紹介＆解説していきます。
画像圧縮ツールSquooshの使い方
Google Chrome Labが開発した「Squoosh（ スクーシュ ）」という画像圧縮ツールの使い方をわかりやすく解説していきます。
この「Squoosh（ スクーシュ ）」を使うことによって簡単に画像のリサイズやファイルサイズの圧縮等をおこなうことが出来、WordPressサイトの高速化に繋がりますので必ず使い方をマスターしましょう。
Squoosh（ スクーシュ ）↓
https://squoosh.app/
画像のアップロード方法
エクスプローラーを開いて圧縮させたい画像をドラッグ＆ドロップするだけで取り込むことができます。
もしくは「select an image」というリンクをクリックするとエクスプローラーが開き、そこから画像を選ぶことも可能です。
Squooshの見方&解説
①元画像のファイルサイズ
ここのサイズが高ければ高いほど読み込みに時間がかかり、サイト表示スピードが落ち込みます。
②現在の設定での圧縮した場合のファイルサイズ
ここでのサイズは①の元画像の1/3ほどになっています。
③画像のクオリティレベル
画像のクオリティレベルを変えることができます。0から100まで調整できて、初期値は75です。
ファイルサイズをより小さくしたい場合は75より小さくします。しかし数値によってはかなり画像が劣化するので確認しながら調整をおこなって下さい。
さらに写真の真ん中には左右に動かせるラインがあり、左側は圧縮前の画像、右側は圧縮後の画像を見比べることができます。
画像のファイルサイズや画質のバランスをみながら、クオリティの調整をおこない、ベストなところで保存してください。
他には、jpgやpngといった拡張子の変更などもおこなえますので、png→jpgといった変更をおこないサイズ調整をおこなっていくことも一つのやり方です。
また、画像右側のResizeにチェックを入れると画像サイズ自体を小さくする事もできます。
上記の画像は、3872×2592となっていますが、500×332といったサイズに変更することも問題ありません。
ブログサイトの適した画像サイズを選ぶことによって、ファイルサイズも小さく出来るので、自分のブログにアップロードする画像のベストサイズを把握していくことは重要なので色々と試してみてください。
スクーシュをうまく使い、画像の最適化をおこない、サイト表示の高速化を目指してください。スクーシュはそれができる優秀ツールの一つですから。
EWWW Image Optimizerの使い方
まず最初にEWWW Image Optimizerってなんなの？という方のためにこのプラグインの役割を説明しておきます。
EWWW Image Optimizerはブログ内に取り込まれた画像を最適化、圧縮し、ブログの表示スピードをアップさせるためのプラグインです。
Googleでも推奨している新しい画像フォーマットWebPに対応していたり、画像に保存されている不要なメタデータ等も削除する機能もあるので、ブログう運営をおこなっていく上では必須といえます。
このスタディLogもEWWW Image Optimizerのプラグインの設定をおこなったことによって、PageSpeed Insightsでブログの速度スコアが上昇しました。
詳しくは下記の記事で説明しています。
EWWW Image Optimizerはこれから説明する基本的な設定方法を覚えておくだけで十分効果はあるので、この後も読み進めていって下さい。
EWWW Image Optimizerのインストール方法
①WordPress左サイドバーのプラグインの新規追加という項目をクリック
②プラグインを追加というページで上記画像②の検索窓に「EWWW Image Optimizer」と入力
③左上に現れたEWWW Image Optimizerの「今すぐインストール」をクリック
④インストールされると有効化というボタンに切り替わるので有効化ボタンをクリック
上記のやり方でインストールは完了です。
EWWW Image Optimizerの設定方法
プラグイン→インストール済みプラグイン→EWWW Image Optimizerの設定をクリック
それでは実際にEWWW Image Optimizerの設定をおこなっていきましょう。
基本的には基本タブの箇所を設定すればOK。他のところは初期設定のままで大丈夫なので全然難しくありません。
基本タブ内の設定
まず上記画像の基本タブ内にあるメタデータの削除にチェックが付いていることを確認して下さい。
メタデータの削除をおこなうことで、画像内にある露光量や撮影場所、焦点距離といった隠された余分なデータを削除してくれるので、画像のファイルサイズが軽くなります。
結果、サイトの高速化に繋がるということですね。
チェックが付いていなかった場合はチェックをつけて、下の変更を保存ボタンをクリックすれば完了です。
過去画像の一括最適化
WordPress左サイドバーのメディア→一括最適化という場所をクリックして下さい。
赤四角で囲っている「最適化されていない画像をスキャン」するというボタンをクリックします。
ボクのブログの場合は最適化出来る画像が19点あったので、そのすべてを一括で最適化させていきます。
ボタンを押すと、上記画像のように一つひとつの画像を圧縮して、ファイルサイズを減少させていってくれます。
以上がEWWW Image Optimizerの使い方です。簡単ですね。
まとめ
今回の記事では、画像圧縮ツール「Squoosh」とWordPressプラグインの「EWWW Image Optimizer」を使った画像の最適化について解説していきました。
この2つのツールを使うことによってあなたのブログも間違いなくサイト表示スピードがアップするので、必ず使用するようにしましょう。
ブログの高速化はユーザビリティを向上、SEOの観点からも必須事項なので、必ず取り組むようにしていって下さい。
最後までお読みいただきありがとうございました。
