ブログの表示が、なんだか遅い。
そう感じながらも、原因が分からずに放置していました。サーバーを乗り換えるべきか、テーマを軽いものに変えるべきか——そんなことを考えていたのですが、調べてみたら答えはもっと手前にありました。
写真の保存形式が「PNG」になっていた。ただそれだけです。
アイキャッチ画像297枚をJPGに変換したところ、182MB → 35MBまで減りました。減った量は147MB、割合にして80%です。サーバーもテーマも、何ひとつ変えていません。
同じ状態のブログは、たぶん少なくありません。この記事では、私がどうやって原因にたどり着いたか、そして自分のブログを確認する方法をお伝えします。
「重い」の正体は画像でした
最初に疑ったのはサーバーでした。安いプランだから遅いのだろう、と。
ところが実際に測ってみると、サーバーが応答するまでの時間は0.1秒。これは十分に速い数字です。サーバーは悪くありませんでした。
問題はその後でした。ページ全体で読み込んでいるデータ量を調べたら、9MBありました。
9MBというのがどれくらいかというと、スマホで写真を10枚送るくらいの量です。それを、記事を1ページ開くたびに読者に読み込ませていたことになります。
内訳を見て青ざめました
何がそんなに重いのか、ひとつずつ測っていきました。
| 内訳 | サイズ |
|---|---|
| アイキャッチ画像 19枚 | 約7.5MB |
| ページの本体（文字やデザイン） | 約0.5MB |
| その他 | 約1MB |
8割以上が画像でした。
さらに1枚ずつ調べると、アイキャッチ画像が1枚600KB〜800KBもありました。適正なサイズは100KB前後なので、6倍から8倍です。
原因は「PNG」という保存形式
重かった画像のファイル名を見ると、すべて.pngで終わっていました。
画像の保存形式には、主に次の2つがあります。パソコンが苦手な方も、ここだけ覚えていただければ大丈夫です。
JPG（ジェイペグ）
写真に向いた形式です。人の目には分からない程度に情報を間引いて、ファイルを小さくします。風景や人物の写真、グラデーションのある画像はこちらが適しています。
PNG（ピング）
イラストや図に向いた形式です。情報を一切間引かずに保存するので画質は完璧ですが、そのぶんファイルがとても大きくなります。背景を透明にできるのが特長です。
私が間違えていたこと
私のアイキャッチは、背景に色のグラデーションが入ったデザインでした。これはPNGが最も苦手とするタイプの画像です。
PNGは「色が少しずつ変化する部分」を記録するのが不得意で、ファイルサイズが一気に膨らみます。まさにこれが起きていました。
そして厄介なのは、見た目では違いが分からないことです。PNGでもJPGでも、画面上はまったく同じに見えます。だから何年も気づきませんでした。
実際に変換してみた結果
過去に投稿した記事のアイキャッチ、297枚すべてをJPGに変換しました。
| 変換前（PNG） | 変換後（JPG） | |
|---|---|---|
| 1枚あたり | 約600KB | 約108KB |
| 297枚の合計 | 182MB | 35MB |
| ページ全体 | 9MB | 2.2MB |
1枚あたり82%減りました。
そして肝心の見た目ですが、変換前後を並べて比べても、私には違いが分かりませんでした。画質は保ったまま、重さだけが消えたことになります。
あなたのブログを確認する方法
難しい道具は要りません。3分で終わります。
手順1 アイキャッチを右クリックする
自分のブログの記事を開いて、アイキャッチ画像の上で右クリックしてください。メニューが出たら「名前を付けて画像を保存」を選びます。
保存する画面に、ファイル名が表示されます。ここで拡張子（最後の3文字）を見てください。
.pngで終わっている → 要注意です.jpgまたは.jpeg→ 問題ありません
手順2 ファイルサイズを見る
実際に保存して、そのファイルを右クリック →「プロパティ」でサイズが分かります。
- 100KB前後 → 適正です
- 300KB以上 → 見直したほうがよいです
- 500KB以上 → かつての私と同じ状態です
スマホの場合は、画像を長押しして保存すると、写真アプリでサイズを確認できます。
これから投稿する画像をJPGにする
過去の画像を直しても、これから同じ形式で投稿し続けたら元に戻ってしまいます。入り口を変えることが一番大事です。
Canvaを使っている場合
ダウンロードするときに、ファイルの種類を選ぶ画面が出ます。ここで「JPG」を選んでください。初期設定はPNGになっていることが多いので、毎回確認が必要です。
WindowsのペイントやMacのプレビューの場合
「名前を付けて保存」のときに、ファイルの種類でJPGを選べます。
スクリーンショットの場合
パソコンのスクリーンショットは、標準ではPNGで保存されます。ここが盲点でした。画面を撮ってそのまま投稿していると、自動的にPNGになります。
一度ペイントなどで開いて、JPGとして保存し直してから投稿してください。ひと手間ですが、これだけで数百KB変わります。
ただし、PNGのままがよい場合もあります
すべてをJPGにすればいい、という話ではありません。次の場合はPNGを選んでください。
- 背景を透明にしたい画像（ロゴなど。JPGは透明を扱えません）
- 文字がびっしり入った図や表（JPGだと文字の輪郭がぼやけることがあります）
- 色数の少ないイラスト（PNGのほうが小さくなる場合があります）
判断に迷ったら、「写真っぽいものはJPG、図やイラストはPNG」と覚えておけば十分です。
なぜ、重いと困るのか
ここまで読んで、「見た目が同じなら、重くてもいいのでは」と思われたかもしれません。
実は、表示の遅さは2つの面で損をします。
読者が待ってくれない
Googleの調査では、表示に3秒以上かかると多くの人がページを離れるとされています。せっかく検索から来てくれても、記事を読む前に戻ってしまうということです。
特にスマホは通信が不安定なことも多く、9MBのページはなかなか開きません。
検索順位にも影響する
Googleは表示速度を検索順位の判断材料のひとつにしています。同じくらいの内容の記事なら、速いほうが有利になります。
つまり、画像を軽くするだけで、読者にもGoogleにも優しくなれるということです。
気づけてよかったこと
正直に言うと、私はずっと「記事の中身を良くすること」だけを考えていました。表示速度は、専門的で難しい世界の話だと思っていたのです。
でも実際の原因は、画像を保存するときに選ぶたった1つの項目でした。技術的な知識も、お金も要りませんでした。
もし今、自分のブログが遅い気がしているなら、まずアイキャッチを右クリックしてみてください。.pngで終わっていたら、そこに改善の余地があります。
思っているより、簡単に軽くなります。
まとめ
- ブログが重い原因は、画像の保存形式であることが多い
- 写真やグラデーションのある画像にPNGを使うと、6〜8倍重くなる
- JPGに変えても、見た目はほとんど変わらない
- 私の場合、297枚の変換で182MB → 35MB（80%減）になった
- 確認方法は、アイキャッチを右クリックして拡張子を見るだけ
- これから投稿する画像をJPGにすることが、いちばん大事
在宅で記事を書いていると、書くことに手一杯で、こういう設定まで手が回らないものです。私もそうでした。
でも一度直してしまえば、あとは保存形式を選ぶだけです。今日から投稿する1枚を、JPGにするところから始めてみてください。
