Webサイトの表示速度を上げるには、画像ファイルを圧縮するのが効果的です。
WordPressならプラグインを使うことで、手軽に画像を圧縮できます。しかし、プラグインや画像の種類によって圧縮率が変わるため、最適化するにはちょっとしたコツの習得が必要です。
本記事では、WordPressの画像圧縮プラグインと、サイトの表示速度を上げるためにやるべきことを紹介します。
目次
WordPressの画像圧縮プラグインとは
画像圧縮プラグインとは、画像のファイルサイズを小さくできる(最適化)プラグインのことです。
テクノロジーの進化によって、カメラの解像度は上がり続けています。例えば、iPhone14 Pro Maxのカメラは4800万画素となっており、細かいディテールまで再現できるのが特徴です。
ただ、写真は高解像度になるに比例してファイル容量も大きくなるため、ウェブ上でそのままアップすることはおすすめできません。
インスタグラムやツイッターなどのSNSアプリ、LINEやメッセンジャーといったメッセージアプリでは高解像度の写真をアップしても自動的に圧縮がかかります。なので、ユーザーは基本的に何も気にせず写真を送りあったりアップできたりするわけです。
しかし、自分のブログやウェブサイトだとそうはいきません。必ず画像をアップする前に、ご自身で圧縮するのが基本です。容量が大きいままアップすると、サイトの訪問者に迷惑をかけてしまいますからね。
ただ、毎回ご自身で画像圧縮するのは手間と感じる人もいます。そのお気持ちはよくわかります。そんな時に役立ってくるのが、プラグインだというわけです。
画像を圧縮するべき理由
画像を圧縮する理由は、サイトの表示速度を上げるためです。表示速度が上がると、2つのメリットが得られます。
- 訪問者の負担軽減
- SEOに有利
ページの表示速度が早いと、訪問者のストレスやデバイスへの負荷を軽減できます。つまり、快適なネットサーフィンを提供できるのです。
過去に巨大企業が行った調査結果が興味深いです。
- Google
表示速度が0.5%遅くなると、検索数が20%減少する - Amazon
表示速度が0.1秒遅くなると、売上が1%減少する - フォレスターリサーチ
サイトのパフォーマンスに不満を感じた場合、79%のユーザーは二度とそのサイトでショッピングしない
このように「速く表示される」ということは、売上に関わる重要項目と言えます。
2つ目は、SEOに良い影響がある点です。軽いコンテンツは利用者にとって利便性が高いため、検索順位を上げやすいと言われています。
Googleでは「1ページの容量は1,600KB(1.6MB)未満」に抑えることを推奨しており、理由は「3G回線でもダウンロードできるデータ容量」に基づいているそうです。
Aim to keep your total byte size below 1,600 KiB. This target is based on the amount of data that can be theoretically downloaded on a 3G connection while still achieving a Time to Interactive of 10 seconds or less.
参考: Web.dev
1,600KBと聞くと、大きな容量に感じるかもしれませんが、1280万画素のカメラで撮影した写真の容量は大体4,600KB(4.6MB)となり、1枚でオーバーしてしまいます。高解像度の画像をそのまま使うのがいかにまずいかが分かります。
表示速度で売上が変わるという調査結果と、Googleが推奨するデータ容量を考えると、画像の圧縮はサイト運営者にとって必須の作業と言えるでしょう。
画像の圧縮方法による違いを理解する
画像の圧縮方法は、プラグイン以外にもWebサービスや画像編集ソフトなどで行なえます。
圧縮方法 | 特徴 |
プラグイン | 自動圧縮で手間がかからない。ファイル形式によって圧縮率が変わる。 |
ウェブサービス | インストール不要で使える。指定したサイズに圧縮できる。一括圧縮できるサービスもある。 |
画像編集ソフト | 1枚ずつ圧縮する必要があるが、細やかな調整ができる。 |
プラグインは自動圧縮できるので、手間がかからないのがいいところです。しかし、画像のファイル形式や、使うプラグインによって圧縮率が変わるため、1枚1枚の画質にこだわるのであれば、ウェブサービスか画像編集ソフトによる圧縮の方がいいでしょう。
ウェブサービスを使うメリットは、1枚1枚圧縮率を気にしながら行えること。プラグインよりは多少手間がかかりますが、ご自身でPhotoshopなどの画像編集ソフトを立ち上げて圧縮するよりはずっと手間がかかりません。
ウェブサービスの画像圧縮前・後の比較記事もありますので、一度参考にしてみると良いでしょう。
ブログやWebサイトにアップする写真や画像の容量は軽いに越したことはありません。容量が小さいと、サイトの表示速度も上がり、ユーザーの負担も小さいからです。 5Gの時代に神経質になる必要まではないですが、「これはさすがに・・・」というケースもあります。 例えば、スマホで撮影した写真をそのま...
Photoshopをはじめとした画像編集ソフトの良いところは、人の手による細やかな調整ができることでしょう。プロのウェブデザイナーであれば、画質と容量のトレードオフで、最適解に圧縮するのがセオリー。そんな時には画像編集ソフトの出番でしょう。ただし、人力なので手間はかかります。
圧縮と同時に「リサイズ」もするべき
画像を圧縮する際は、リサイズも同時に行いましょう。
リサイズとは画像の大きさをコンテンツに最適化することを言います。横幅4,000pxの画像を使っても、コンテンツの幅が800pxなら3,200pxも無駄になってしまうのです。
圧縮後の目安
圧縮後のファイル容量の目安は、画像の縦横のサイズによって変わってきます。例えば、記事のアイキャッチならそれほど大きくないので100KB以下、フル幅サイズのヘッダー画像なら大きなサイズになってくるので400KB以下を目指すと良いでしょう。
不必要に画像サイズを大きくするのではなく、ちょうど良いサイズにトリミングして、容量を削減するのがポイントです。
WordPressでおすすめの画像圧縮プラグイン4選
WordPressで人気の画像圧縮プラグインを4つに厳選して紹介します。
- EWWW Image Optimizer
- TinyPNG
- Imagify
- WebP Converter for Media
EWWW Image Optimizer
EWWW Image Optimizerは、恐らく最もメジャーな画像圧縮プラグインです。
対応フォーマット | JPEG、PNG、GIF、PDF、WebP |
一括処理 | ◯ |
リサイズ | ◯ |
過去画像の一括圧縮 | ◯ |
無料かつ制限なく使える唯一の圧縮プラグインになります。
特にJPEGの圧縮精度が高いです。PNGやその他の形式の画像は、WebサービスでJPEGに変換してからWordPressにアップロードしてください。
以前、WordPressが重くなる理由としてプラグインが原因の一つであると記事を書かせていただきました。 WordPressが重い!!その原因を発見するプラグイン「P3 (Plugin Performance Profiler)」 ただし、他にもWordPressが重くなる理由に画像...
TinyPNG – JPEG, PNG & WebP image compression
TinyPNGは、圧縮率の高い人気のプラグインです。
対応フォーマット | JPEG、PNG、WebP |
一括処理 | ◯ |
リサイズ | ◯ |
過去画像の一括変換 | ◯ |
Webサービスも提供しているので、合わせて利用することもできます。
無料プランの上限は月500枚まで。PNGの圧縮に強いので、過去にアップロードしたPNG画像を圧縮する際に便利です。
リサイズにも対応している高機能な圧縮プラグインになります。
2020/02/28 情報を更新いたしました。 個人法人に限らずWEBサイトを運営していると、規模の大小があっても画像を多く活用しているでしょう。ただ、サイト内に画像が増えすぎると容量が大きくなり、ページの読み込みのスピードが落ちてしまいます。サイトを閲覧してもらうために読み込みスピードを最速...
Imagify
Imagifyは、次世代フォーマットに対応した圧縮プラグインです。
対応フォーマット | JPEG、PNG、GIF、PDF、WebP |
一括処理 | ◯ |
リサイズ | ◯ |
過去画像の一括変換 | △ |
次世代フォーマットのWebPが登場して、Imagifyがすぐに対応したことを考えると、対応力の速いプラグインと言えるでしょう。また、PDFの圧縮にも対応しているのが特徴的です。
しかし、最近のアップデートにより「使いにくくなった」という声がたくさん上がっています。特にAIを使った自動圧縮が不評です。筆者自身、Imagifyを使っていましたが、使いにくくなったのでEWWW Image Optimizerに戻しました。
無料プランの上限も月200枚(20MB)までと厳しめなので、他のプラグインを利用することをおすすめします。
WebP Converter for Media
「WebP Converter for Media」は画像圧縮とは違うのですが、画像の容量を削減してくれるプラグインです。どうやって容量を削減するかというと、Googleの開発の超軽量な画像フォーマット「.webp」に変換して、容量を削減するやり方です。すでに圧縮している画像に対しても削減効果があるのが特徴です。
他の圧縮系プラグインとはまったく別のアプローチでの容量削減方法ですが、効果のほどはというと、かなりあります。どれくらい削減できるのか、こちらの記事で解説していますのでご参考ください。
「画像を軽量化するためにWebP対応を行いたい」 しかし、「WebP」は古いブラウザに対応していないため、直接使用するのは現実的ではありません。 そのため、対応ブラウザには「WebP」、未対応ブラウザでは従来の形式の画像(JPEG等)を配信するのが理想的です。ただし、このような振り分けは...
対応フォーマット | JPEG、PNG、GIF |
一括処理 | ◯ |
リサイズ | ☓ |
過去画像の一括変換 | ◯ |
おすすめは?
画像圧縮できるWordPressプラグインはいくつもありますが、この中でおすすめなのが「EWWW Image Optimizer」、もしくは「WebP Converter for Media」です。
圧縮系では「EWWW Image Optimizer」がもっとも使いやすく、しかも無料というのもいいですね。
「他のプラグインと比較して圧縮率が低い」といった声もありますが、気になる方は事前にWebサービスで圧縮・リサイズしてJPEG形式におくことで解決されます。例えば、次の手順です。
- BULK RESIZEでリサイズ・圧縮・フォーマットをJPEGに統一
- WordPressにアップロード
- EWWW Image Optimizerが自動で再圧縮
これで1枚100KB以内を目指しましょう。
また、変換系では「WebP Converter for Media」一択でしょう。WebPファイルに変換するため、すでに圧縮している画像にも有効です。ただし、リサイズには対応していないため、あらかじめご自身で最適なサイズにリサイズしてアップしておく必要はあります。
画像圧縮プラグインの導入と合わせて覚えておくべきこと
- 無駄に画像を挿入する必要はない
- 最適なファイル形式は時代と共に変わる
- 画像のファイル名にも気を使おう
無駄に画像を挿入する必要はない
そもそも画像を挿入する必要があるのか。
記事で画像を多用しがちな傾向にある人は、ここに画像が必要なのか?を問いながら使う必要もあるかもしれません。
画像はひと目で伝えたいことを伝える。視覚的な効果は確かにあります。しかし、記事内容とは関連のない画像を挿入している場合は、容量の無駄になっているともとれます。読者目線で、不要だと思える画像は外してしまいましょう。
最適なフォーマットは時代と共に変わる
テクノロジーが進化するにつれ、画像のフォーマットも増えてきました。
- JPEG
- GIF
- PNG
- WebP
- AVIF
「より軽く劣化が少ないフォーマット」としては、Googleが開発したWebP(ウェッピー)があります。次世代フォーマットとして2010年頃からスタートしました。現在では主要ブラウザで対応したため、Web画像フォーマットのスタンダードになりつつあります。下画像は、左側がJPEGで右側がWebPです。
どちらも画像の劣化具合は変わりませんが、ファイルサイズはJPEGが862KBに対し、WebPは704KBまで圧縮されました。このような違いがあるので、サイトの表示速度を速くしたい方は、フォーマットの進化をチェックする必要があるのです。
また、2019年より新しいフォーマットとしてAVIFが誕生しました。AVIFはWebPよりも圧縮率が高く、画像の劣化も少ないのが特徴です。下の画像は左側がWebPで、右側がAVIFになります。
WebPは704KBに対し、AVIFは261KBとかなり差が出ています。劣化具合はどちらも同じくらいです。「軽いサイト」を作ろうと考えるならAVIF形式にするのがベストでしょう。
画像ファイルのフォーマットといえば、JPEGやPNGなどが思い浮かびますが、これらはいずれも90年代に生まれたものです。 そこから20年後の2010年にはWebP、2019年にはAVIFという次世代拡張子が登場しました。軽量かつ高画質な拡張子です。Web上に画像をアップする際は、軽量であること...
WordPressのプラグインを使えば、過去にアップロードした画像のフォーマットを一括で変更できます。時代に合ったフォーマットを選んで、画像の最適化を図りましょう。
画像のファイル名にも気を使おう
画像のファイル名は、検索エンジンのクローラーがチェックする項目です。
クローラーにとって分かりやすいファイル名にしておくと、上位表示に一役買ってくれるでしょう。
ファイル名をつける際は、以下の点に気をつけてください。
- 英単語を組み合わせる(2〜3語で)
- 半角英数とハイフンで作る
- 画像に関連するタイトルをつける
例えば、下画像を見てください。こちらの画像ファイルにタイトルをつけるとしたら、どんなものが好ましいでしょうか。
- dog-running.jpg
- わんわん.jpg
英単語を組み合わせて画像にタイトルをつければ問題ありません。ファイル名はなるべく日本語ではなく英語で命名し、アップしましょう。
まとめ
WordPressで軽いコンテンツを作るには、画像の最適化が欠かせません。
- 容量の目安:アイキャッチなど1枚100KB以下、ヘッダーは1枚400KB
- 1ページの容量目安:1,600KB以下
上記のポイントを守りつつ、より劣化の少ない画像にするには時代に合ったフォーマットを使うことが大切です。2022年現在はWebP形式をおすすめします。当サイトでもこのプラグインを使っています。
WordPressのプラグインを使えば、手軽かつ効率的に画像を圧縮できます。便利なプラグインを上手に使って、快適に動作するサイトを目指していきましょう。
コメント