【ワードプレスサイト表示速度改善】画像圧縮しないと最大4倍の負荷がかかることをみんな知らない件

ワードプレスと画像容量の関係

ワードプレスはシステムということを知ろう

ワードプレスは誰でも気軽にwebサイトを更新することができるシステムです。そんなん知ってるわ！と思うかもしれませんが、このシステムであるという点を念頭に置かないと今後のサイト運営で「なんでできないの？」と意固地になってしまうことがあります。

システムだからできないことはできないんだね。って捉えられるスタンスを持つことは重要です。

画像容量の与える影響は4倍

さて、先程ワードプレスはシステであると説明しましたが、皆さんは記事に載せたい画像を気軽にアップロードしてますよね。

しかも、そのアップロード画像のサイズまで自動で選ぶことができますね。画像サイズが大きければ最大で、[サムネイル、中、大、オリジナル]のサイズを選ぶことができます。

画像選択の時に、1枚の画像をワードプレス側で勝手にリサイズして選べるようにしてくれていると思っていませんか？

実はこれ、画像1枚を4枚の画像として自動アップロードされているんですよ。

実はワードプレス内では、上記の図のようにアップロードした画像はサイズごとにデータベースに出力されます。制作陣に言われて初めて知ったと同時に、確かに画像ファイルを予め用意しないとデータの吐き出しなんて出来ないよなと気付きました。

ですので、最適化していない画像をバンバン上げていくとサイトはどんどん重くなってしまうということです。

画像最適化する手段

TinyPNGを使用する

タイニーピングと読みます。タイニーピングは画像の品質を落とさず画像容量を落とすことが出来る最強のwebサービス。なぜ最強かというと、完全無料だから。

タイニーピングは「画像圧縮 パンダ」で検索しても出てきます。

こちらにワードプレスにアップする前の画像をアップロードし、ダウンロードするだけでOK。画像によっては1/4近く圧縮することが可能です。ワードプレスにアップロードする前は画像1枚でも絶対にやるべきでしょう。

何度も圧縮をかけると画像が荒くなるので1回やれば大丈夫です。

画像最適化プラグインを入れる

画像最適化プラグインにもCompress JPEG & PNG imagesやEWWWImageOptimizerなどがありますが、プラグイン自体がワードプレスに負荷を与えるものなので、先述した試作を行っているなら入れる必要はないと考えます。

ただ、最適化していない画像もあるという場合は、プラグインを入れて最適化をかけた方が良いでしょう。プラグイン不使用時は無効状態にしておくようにしましょう。

PNGを使いすぎない

画像容量はJPGかPNGかによって大きくことなります。画像サイズの小さいものであれば、JPGもPNGも対して変わらないと思いますが、記事内に挿入する画像サイズでは大きく差が出ます。それぞれの使用場面を以下にまとめました。

画像サイズは統一しておく

これは非常に大切。
サイトのコンテンツが表示される領域（横幅）は大体の限界値が決まっています。特にブログはスマホから流入がほとんどなので、画像の横幅は768pxあれば十分です。

768pxはスマホ画面に移行する時の基本サイズを指します。最近では820pxも増えているようですが、近年のiPhonも小さいので768pxが無難です。

また、PC表示でも大体のサイトはサイドバーが付いていると思うので横幅が足りないなんてことは起きないでしょう。よく自慢の一眼レフで撮った写真をそのままアップロードする人がいますが、4000px以上のサイズをアップロードするなんて自殺行為でしかありません。

自身のブログコンテンツにアップロードする画像サイズを事前に決めておき、canvaなどでリサイズしてからアップロードするようにしましょう。

アイキャッチ画像だけ1200×630px以上が望ましい

記事のアイキャッチに使う画像だけは大きいサイズにする必要があります。というのもSNSはもちろん、Google砲と呼ばれるディスカバーに掲載されるには1200×630px以上の大きい画像が必要と推奨されているからです。

まとめ

実は知らないワードプレスの仕様についてのお話でした。意外と知らない人も多かったのではないでしょうか。気軽にアップロードしていた画像が4つのサイズに振り分けられるって結構恐ろしい話ですよね。

サイズがそれぞれ異なるので単純に容量が4倍とは言えませんが、4つに出力されるという意味では4倍ですね。サイト運営していく上で”面倒”ではありますが、チリも積もれば…ですので更新や新規追加する際はしっかり画像の最適化を行っていきましょう。