どんなに最適化されたウェブサイトであっても、画像はページ上で最も読み込みの遅い要素の1つです。
WordPress を最大限に高速化するには、画像に特化した戦略、つまり WordPress の画像最適化を実施する必要があります。
本日の記事では、ファイルサイズを小さくして画像を最適化するための6つのヒントをご紹介します。
WordPressで高速なウェブサイトを実現したい方は、ぜひご一読ください。
WordPressで画像を最適化するコツ #1: 正しいファイル形式を選択する
Photoshopなどの画像編集ソフトを使用する場合、保存するファイル形式を指定することができます。
ネット上の画像は、JPEGとPNGという2つのファイル形式に該当するものが圧倒的に多いです。
では、どちらを使えばいいのでしょうか？それは、人それぞれです。
どちらの形式にも利点と欠点があり、その選択はシナリオによって大きく異なります。
- JPEG – JPEGは、写真や多種多様な色を表示するその他の画像に最適なオプションです。また、圧縮することができ、ファイルサイズを小さくするために品質を犠牲にすることができます。
- PNG – PNGは、グラフィック、図面、テキスト、およびいくつかのスクリーンショットのために勝つ。PNGはJPEGと異なり、透明度もサポートしています。このフォーマットは可逆圧縮を使用しているため、品質は高くなりますが、ファイルサイズも大きくなります。
通常、ファイル形式は、上記のように作業する画像の種類によって決まります。
では、いくつかのシナリオで検証してみましょう。
WordPressダッシュボードのフルサイズのスクリーンショットは、PNG形式では150kbですが、JPEG形式では259kbでした。
スクリーンショットは通常PNGの領域であることを忘れないでください。
JPEGは約75%もかさばります。
(編集部注。
PNGはほとんどのスクリーンショットで素晴らしい仕事をしてくれますが、ただ、すべてのスクリーンショットに使えるわけではありません。
数色以上を使用するスクリーンショット、つまりスクリーンショットのどこかに写真が含まれている場合は、やはりJPGの方がよいでしょう)。
ところが、休日に撮ったこの写真のフルサイズ版では、逆の結果が返ってきました。
JPEG形式の写真は1.26mb、PNGはなんと7.23mb。
つまり、PNGの方が550%以上も大きいのです（ヤバイ！）。
このように、画像のサイズにはファイル形式がいかに重要であるかがわかります。
もし必要なら、以下のルールを守ってください。
写真や複数の色が使われているものはJPEG、それ以外はPNGです。
2. 画像のサイズを変更する
画像のサイズを小さくすると、その分ファイルサイズも小さくなります。
例外はありません。
軽快なサイトを維持するためには、画像の物理的なサイズをできるだけ小さくすること、通常は、画像を表示したい寸法にすることです。
例えば、あなたのウェブサイトの最大幅が1000ピクセルであれば、1000ピクセルより広い画像をアップロードすることは許されません。
必要以上の大きさは、画像が不必要に大きくなり、WordPressで適切に画像の最適化を行うことが難しくなることを保証します。
WordPressのサムネイル機能で画像を小さく表示することができても、問題の画像の根本的なファイルサイズが変わるわけではありません。
もちろん、写真家などのアーティストが、フルサイズの高解像度作品にリンクするサムネイルを表示したい場合は例外です。
もう一度、どのような節約になるかをお見せしましょう。
先ほどの写真のフルサイズは、2592×1456ピクセルで1.26mbです。
しかし、この画像をいくつかの一般的な幅にリサイズすると、ファイルサイズがどれだけ縮小されるかを見てみましょう。
WordPressでの画像最適化の一例。
- 幅1200ピクセル。394kb
- 1000ピクセル幅：298kb
- 800ピクセル幅: 219kb
- 600ピクセル幅 154kb
ご覧の通り、まさに驚異的なサイズ削減が実現しました
時間をかけずに画像のリサイズを行うには、WordPressサイトにOptimoleをインストールすれば、自動ですべて行ってくれます。
さらに、最適な表示のための画像リサイズが付属しており、画像はフルサイズで読み込まれるのではなく、各ユーザーのビューポートに適応されることになります。
つまり、Optimoleは、どんなデバイスや画面サイズでも、完璧な画像サイズを読み込むのです。
3. 画像を切り抜く
画像のサイズを変更することは、ファイルサイズを小さくする手っ取り早い方法です。
画像の正確な複製が作成されますが、すべてが縮小されます。
画像の縮小を一定以上に行うと、一部の要素がほとんど見えなくなります。
特に、画像の焦点位置がはっきりしない場合は、問題が生じます。
クロッピングは、リサイズに代わる方法です。
画像全体を縮小するのではなく、写真にハサミを入れるように、画像の端っこを切り取ります。
写真にハサミを入れるように、画像の一部を切り取ることで、見せたい部分をより際立たせ、背景の邪魔な部分をすべて切り落とします。
ここでは、WordPressのスクリーンショットを使って、画像を単にリサイズするよりもトリミングする方が良いということを説明します。
リサイズした画像。
トリミングされた画像
もちろん、トリミングの利点は、リサイズと同様に、画像の寸法を縮小し、ファイルサイズを削減することです。
したがって、WordPressで画像を最適化する素晴らしい方法です。
4. 画質を落とす(非可逆圧縮)
画像のトリミングとリサイズが終わったら、画像を圧縮することでさらにファイルサイズを小さくすることができます。
PNGも圧縮できますが、特にJPEGに有効でよく使われる手法です。
さて、JPEGは非可逆圧縮と呼ばれるタイプの圧縮をサポートしています。
これは、ファイルサイズを小さくするために、画像データの一部を取り除くことを意味します。
例えば、隣り合う2つのピクセルの色がほんの少ししか違わない場合、それらを同じにすることで済ませることができます。
肉眼ではほとんどわからない程度の変化ですが、色数を少なくすることで、ファイルサイズを小さくすることができます。
画像編集ソフトでJPEGファイルを保存する際、「品質スコア」を0〜100の間で選択するよう求められることがあります。
これは、基本的に画質とファイルサイズのトレードオフの関係にあります。
- スコアが高いほど、圧縮率は低く、画質は高くなりますが、ファイルサイズは大きくなります。
- スコアが低いほど、圧縮率は高く、画質は劣りますが、ファイルサイズは小さくなります。
一般的に、品質スコアの小さな変化は、画像の全体的な品質にほとんど影響を与えません。
実際、訪問者がその違いを見分けるのは難しいでしょう。
このことを説明するために、以下の2つの写真を見てください。
一方は品質スコアが100、もう一方は80です。
WordPressでの画像最適化写真A。
写真B
Click here to reveal写真Bの品質スコアは100点です。
違いがわかりにくいですよね？しかし、ファイルサイズになると、その差は歴然です。
418kbと90kbの差です。
しかし、いつまでも品質を下げ続けることはできません。
ある時点で、品質の低下が表れてしまうからです。
下の画像は品質スコアが20です。
確かに、28kbしかないかもしれませんが、これを自分のサイトに掲載したいとは思いませんよね？
さて、完璧な圧縮レベルの黄金律は存在しません。
しかし、直感に反して、画像が複雑であればあるほど、WordPressで画像を最適化するために、画質を下げることができます。
プラグインを使った簡単な方法をお探しの場合は、最高のWordPress画像最適化プラグインをチェックして、それぞれがどのように機能するかを確認してください。
5. CDNで画像を配信する
オンラインでは、すべてが一瞬で行われますよね？実はそうではありません。
訪問者の位置とウェブサイトのサーバーの間の地理的な距離は、サイトの速度に影響を与えます – 距離が大きくなるほど、待ち時間が長くなります。
この遅延の問題を解決するために、CDNの導入を検討してください。
CDNは、世界中に散らばる複数のサーバーにお客様のウェブサイトを保存し、訪問者に地理的に最も近いサーバーに接続します。
遅延の問題は解決され、ウェブサイトはより速く提供されます。
WordPressを高速化したいのであれば、Optimoleプラグインに無料のCDNが付属していることをご存知でしょうか。
Optimoleをインストールし、有効化するだけです。
*これで、画像はあっという間に表示されます。
より複雑で優れたCDNソリューションについては、他の記事を参照してください。
6. 遅延ロードを取得する
デフォルトでは、WordPressのソフトウェアはすべての画像を平等に扱います。
しかし、これは明らかにリソースの非効率的な使い方であり、特にWordPressで画像の最適化を行いたい場合は注意が必要です。
結局のところ、ページの一番下にある画像は、ページの一番上にある画像よりもずっと後になってから見られることになるのですから、最初の画像が優先されるのは当然ではないでしょうか？
画像の優先順位付けは、まさにレイジーローディングが実現するものです。
ページ上部の画像が優先的に表示され、ページ下部の画像は、訪問者がページをスクロールしたときにのみ読み込まれます。
このため、遅延読み込みは、ウェブページの読み込みと同じように「ジャスト・イン・タイム」なのです。
もしあなたがWordPressを高速化するために遅延読み込みを使いたいなら、Optimoleは再びあなたに救いの手を差し伸べるでしょう。
このプラグインの素晴らしいところは、低画質画像のプレースホルダー機能、つまりフルサイズの画像が完全に表示されるまでの中間的な低画質画像の遅延ロードを提供している点です。
それも完全に無料です。
Over to you
以上で、WordPressの画像最適化に役立つ6つの簡単なヒントをご紹介しました。
ご覧のように、これらの戦略をいくつか組み合わせることで、画像のファイルサイズを大幅に削減することができます。
これにより、訪問者はあなたを気に入り、あなたのウェブサイトは大幅に速く読み込まれるようになります。
画像の最適化は、Optimoleのようなプラグインを使用すれば、非常に簡単です。
画像の最適化について質問がある場合は、以下のコメント欄で共有してください。
あなたのウェブサイトをさらに速くしたいですか？ WordPressを高速化する方法についての無料のメールコースをお忘れなく。
