WordPressに画像をアップロードしたら、ページの読み込みがやけに遅くなった。
そんな経験はありませんか?
画像が重いままだと、せっかく来てくれた読者がページを開く前に離れてしまうことも少なくないです。
この記事では、WordPress画像を軽くするための具体的な方法を、アップロード前の準備からプラグインの活用まで順を追って説明します。
WordPress画像が重いとどうなる?表示速度とSEOへの影響
WordPressで画像をそのまま使っていると、知らないうちにサイト全体のパフォーマンスが落ちていることがあります。
表示速度が遅くなると、読者だけでなく検索エンジンからの評価にも関わってくるんですよね。
ページ表示速度が遅いと読者の離脱率が上がる
ページが表示されるまでに3秒以上かかると、半数近くの読者がそのまま離脱すると言われています。
特にスマホからのアクセスが多いブログでは、画像の読み込みが大きなボトルネックになりがち。
1枚あたり数MBある写真をそのままアップロードしていませんか?
スマホで撮った写真は解像度が高く、1枚で3MB〜5MBになることも珍しくないです。
記事に5枚貼れば、それだけで15MB以上。
読者のスマホ回線では、これだけのデータを読み込むのにかなり時間がかかります。
私も以前、写真をそのまま貼っていた時期があって、PageSpeed Insightsで真っ赤な数字が出たのを見てびっくりしました。
Core Web Vitalsと画像サイズの関係
Googleが検索順位を決めるとき、ページの表示パフォーマンスを測る指標として「Core Web Vitals」を見ています。
その中でも「LCP(Largest Contentful Paint)」は、ページ内でいちばん大きな要素が表示されるまでの時間を計るもの。
ブログ記事では、アイキャッチ画像や本文中の大きな画像がLCPの対象になることが多いです。
画像が重いとLCPのスコアが悪くなり、検索順位に悪い影響が出る可能性があります。
つまり、画像を軽くすることはSEO対策としても大事なポイントなんですよね。
アップロード前にやるべき画像の軽量化テクニック
プラグインに頼る前に、アップロードする画像そのものを軽くしておくのがいちばん効果的です。
ここでは、WordPressに入れる前にできる3つの方法を紹介しますね。
画像サイズをWordPressの表示幅に合わせてリサイズする
WordPressのブログ記事で画像が表示される幅は、テーマにもよりますが多くの場合700px〜1200px程度です。
スマホで撮った写真は横幅が4000px以上あることも珍しくないので、そのままアップロードするのはファイルサイズの無駄遣い。
表示される幅に合わせて、あらかじめ1200px程度にリサイズしておくだけで、ファイルサイズはぐっと小さくなりますよ。
リサイズさんのようなブラウザ完結型のツールを使えば、幅を指定するだけでサクッとリサイズできます。
画像がサーバーに送信されないので、クライアントの写真や個人的な画像でも安心して使えるのが嬉しいところ。
JPEG・PNG・WebPの特徴と使い分け
画像のフォーマットによって、同じ見た目でもファイルサイズが大きく変わります。
JPEGは写真向きで、色数が多い画像を比較的小さなサイズで保存できるフォーマット。
ただし圧縮するたびに少しずつ画質が落ちていくのが弱点です。
PNGはイラストやスクリーンショットに向いていて、透過(背景を透明にする処理)にも対応しています。
ただしファイルサイズはJPEGよりかなり大きくなりがち。
WebPはGoogleが開発した比較的新しいフォーマットで、JPEGやPNGより同じ画質で30%ほどファイルサイズが小さくなります。
今のブラウザはほぼすべてWebPに対応しているので、特別な理由がなければWebPを選ぶのがおすすめですよ。
品質設定のベストバランスを見つけるコツ
JPEGやWebPで保存するとき、品質を100%にしている方は意外と多いんですよね。
でも実は、品質を80〜85%に下げても、見た目にはほとんど違いが分かりません。
一方で、ファイルサイズは30〜50%ほど減ることもあります。
品質を50%以下にすると、さすがにぼやけたりノイズが目立ったりしてくるので注意が必要です。
まずは80%あたりで試してみて、画質に問題がなければそのまま使う。
気になるところがあれば少しだけ上げる、というやり方がいちばん手早いです。
WordPress内で画像を軽量化できるプラグインの選び方
アップロード前にリサイズやフォーマット変換をしておくのが理想ですが、すでにWordPressに大量の画像がある場合はプラグインの力を借りるのも手です。
ここでは代表的なプラグインと、プラグインを使わない方法を見ていきます。
EWWW Image Optimizerで既存画像を一括圧縮する方法
WordPress画像の軽量化プラグインでいちばん知られているのが、EWWW Image Optimizerです。
インストールして有効化するだけで、新しくアップロードする画像を自動で圧縮してくれます。
さらに「一括最適化」機能を使えば、すでにアップロード済みの画像もまとめて圧縮できるのが便利なところ。
WebPへの自動変換にも対応しているので、フォーマットの切り替えもプラグイン側でまとめて対応できます。
無料版でも十分な圧縮ができますが、より高い圧縮率が必要なら有料プランも用意されています。
ただ、プラグインの数が増えるとサイト自体が重くなることもあるので、画像の軽量化は「アップロード前に済ませておく」のが基本。
プラグインはあくまで補助として使うと、サイト全体のバランスが保てますよ。
プラグインなしで済ませたい場合の代替手段
プラグインを増やしたくない方は、アップロード前に画像を処理しておくのがいちばん確実です。
リサイズさんのようなブラウザで動くツールなら、リサイズもフォーマット変換もまとめてできます。
複数枚の画像をドラッグ&ドロップで一括処理できるので、記事ごとにまとめて軽量化しておけばプラグインなしでも十分やっていけますよ。
WordPressの「メディア設定」で画像の最大サイズを指定しておくのも、地味だけど効果がある方法です。
やりがちな失敗と画像軽量化の注意点
画像を軽くしようとして、かえってトラブルになるケースもあります。
知っておくだけで防げるポイントを2つ紹介しますね。
圧縮しすぎて画質が劣化するパターン
ファイルサイズを小さくしたいからといって、品質を極端に下げるのは逆効果です。
特にJPEGで品質30%以下にすると、文字がにじんだりブロックノイズが出たりして、記事全体の印象が悪くなります。
Retinaディスプレイのような高解像度の画面で見ると、画質の劣化はさらに目立ちやすいので気をつけてください。
何度も書き出しを繰り返すと、そのたびに劣化が積み重なっていく点も覚えておきたいところ。
「元画像から1回だけ書き出す」が鉄則です。
元画像を残さずに上書きしてしまうリスク
圧縮済みの画像で元ファイルを上書きしてしまうと、あとから「やっぱりもう少し画質を上げたい」と思っても戻せなくなります。
EWWW Image Optimizerなどのプラグインにはバックアップ機能がありますが、デフォルトでオフになっていることもあるので設定を確認しておきましょう。
ローカルで作業する場合は、元画像を別フォルダにコピーしてから圧縮するのが安全です。
ちょっとした手間ですが、これをやっておくだけで「しまった」がなくなりますよ。
画像を軽くしてWordPressを快適に運用しよう
WordPressの画像を軽量化するには、「アップロード前のリサイズとフォーマット変換」と「プラグインによる一括圧縮」の2つが基本です。
特にアップロード前にひと手間かけるだけで、サイトの表示速度はかなり変わります。
品質は80〜85%を目安に、フォーマットはWebPを選んでおけば大きく外すことはないですよ。
画像をまとめて軽くしたいときは、リサイズさんでリサイズとフォーマット変換を済ませてからアップロードすると、プラグインに頼りすぎず快適に運用できます。