WordPressが重い・遅い対策②：画像サイズ目安と最適化・圧縮⇒TinyPNGよりSquoosh

先日の以下の記事では、Google AdSenseの遅延読み込みでサイトの表示スピードを大幅に改善した実例及び設定方法をご紹介しました。

今回はページの表示スピードに大きく影響しながら、コードを編集せず、わりと簡単にできる画像・写真のサイズ調整・最適化や、画質をあまり落とさない画像圧縮の方法、そして万能に近い神アプリSquoosh及び人気のTinyPNGなどをご紹介します。

この記事の信頼性

ゆーさん

この記事を書いている僕（@Arc_to_Future）は、WEBサイト管理者養成コース（3ヶ月間フルータイム）でコーティング及びWordPressでのサイト構築ノウハウなどを学んだ後、見本となるサイトをいろいろ研究したり、日々研鑽中！

なお、当ブログは7記事でGoogle AdSense申請・翌日審査通過し、Amazonアフィリエイトの審査にも1発合格しており、共に収益を上げることができています。

サイトの横幅に適した記事画像やアイキャッチの幅・サイズ目安

では、早速本題に入ります。

まず、記事やアイキャッチに挿入する画像はどのぐらいの幅と高さにすればよいかが分からず、困っているWordPress初心者にが少なくないと思います。

僕もそうでした。最初の頃、スマホで撮った写真などをそのまま記事に載せてしまい、表示上あまり問題ないのですが、ページが非常に重くなって、調べてみたら、アップロードした画像が大きすぎたことがわかりました。

幅の目安：サイト横幅1000px前後⇒記事画像640前後

結論からお話します。

いろいろ試したり、見本となるサイトを研究した結果、以下の表のように、サイトの横幅が1000〜1200px、記事画像が640〜700pxのほうが多いようです。

ちなみに、当ブログは以前1060px→640pxだったのですが、この記事を書いている現在では1114px→694pxにしております。

画像ファイルサイズ目安：100kB以下、アイキャッチは極力20kB以下に

なお、画像ファイルのサイズは目安として100KB以下、できれば50KB以下が望ましいとされています。

特にアイキャッチ画像は一番最初に読み込まれますので、僕の場合極力20kB以下に抑えるよう心がけています。

下は僕のまだ最適化していない記事「【効率化】テレワーク・オンライン授業・動画時代に必須？！OneNote使用歴15年以上の僕の活用術」の悪い例です。

ファイルサイズ47.5kBのアイキャッチ画像の読み込み時間（710ms）が結局当ページの中一番長かったことがわかります。もしこれは普通のスマホ写真の2、3Mとなると、読み込み時間がさらに長くなることは想像がつきます。

アイキャッチ画像の読み込み時間が一番長かった悪い例

記事画像やアイキャッチの幅・サイズの調整方法

サイトの横幅に適した記事画像やアイキャッチの幅・サイズ目安がわかったところで、実際どのように画像の幅・高さを調整したり、画像ファイルサイズを減らしたりするかを見ていきましょう。

イチオシの画像幅・サイズ調整・圧縮無料アプリ：「Squoosh」

まず一番オススメの画像の幅・サイズ調整・圧縮アプリとして、「Squoosh」を挙げたいと思います。

Mac版Squooshの初期画面

「Squoosh」はGoogleが開発した無料WEBアプリで、ブラウザ上で使うのもいいし、MacやWindowsPCにアプリとしてダウンロードして使うのもできて、またスマホでも使えるし、しかもサクサク動くので、本当にオススメできる便利アプリです！

ブラウザバージョン

【Squooshの使い方】アップロードはドラッグあるいはコピー・ペーストだけ

Squooshの使い方も非常に直感的にわかりやすいです。

編集したい画像をSquooshの初期画面の真ん中にドラッグしたり、あるいはコピーしてSquooshにペースト（貼り付ける）だけです。これは以下の理由で地味に便利で、大好きな機能の1つです。

【Squooshの使い方】幅・高さを決め、変換可能フォーマットを選び、圧縮率を決めて、リアルタイムで確認

以下のgif図は本記事のアイキャッチをSquooshで編集した時に撮ったものです。

画面右側の設定欄に、以下の通り設定しました。

• 「Edit」＞「Resize」→「Width」：694（高さは幅に合わせて自動的に適用してくれる；変更する必要がなければ「Resize」をOFFのままでよい）
• 「Compress」：デフォルトの「MozJPEG」で、「Quality」の数値（圧縮率）を75％のままにしてあります（数字を直接変えたり、数値バーを動かしたりして自由に調整でき、画像の圧縮効果もリアルタイムで「圧縮前（左の赤い◀）」と「圧縮後（右の青い▶）」で確認できます）。

以上の設定で、右下にあるように、サイズ調整した結果、容量が38％減の17.9kBの画像を右側のボタンでダウンロードできます。

Squooshで画像の圧縮前後のリアルタイム比較

Squooshと有名画像圧縮Webサービス「TinyPNG」との比較

以上、Squooshを使用して、画像をリサイズ、圧縮する方法を実例でご紹介しました。

実は似ているWebサービスとして、「TinyPNG」も非常に人気です。

TinyPNGの初期画面

ただし、以下のいくつかの点において、TinyPNGよりSquooshの使い勝手がいいと思って、今はメインに使っています。

TinyPNGに比べ、Squooshが画像の幅・高さを指定できる（リサイズ）

Squooshはそのままコピー・ペーストができる点は自分の使用環境において非常に便利であると上にも書きましたが、画像の幅・高さを自由に指定できることも非常に便利です。

上の例でいうと、本記事のアイキャッチ画像は「o-dan」でダウンロードした無料写真素材で、「4722*3148」の大きいJPEG画像（ファイルサイズ549kB）でした。

TinyPNGではリサイズができないため、圧縮後は64％節約の200kBの画像になって、だいぶ小さくなりましたが、画像の幅・高さはまだ無駄に大きいため、さらに別の方法でリサイズする手間が増えます。

TinyPNGは圧縮のみでリサイズしない

TinyPNGに比べ、Squooshの変換可能フォーマットが多く、対応サイズも制限なし

Squooshは以上の実例で示したように、幅・高さも調整したうえ、わりときれいに圧縮でき、かつリアルタイムで確認できる以外、対応可能なフォーマットの多さも非常に優秀です。

以下のリストは僕が現在使っているMac版Squooshアプリの変換可能フォーマットです。

結構新しい「AVIF」やGoogleが推し進める「WebP」などのフォーマットも対応可能で、「PNG」と「JPG」しか対応しないTinyPNGに比べると、守備範囲の広さが驚きです。

しかも、TinyPNGは処理できる画像のサイズ制限が５MBのに対して、Squooshには特にそういう制限がないのもすばらしいですね。

Squooshの欠点：一括処理ができない；たまにTinyPNGのほうが画質を保つ

しかし、TinyPNGの方が20画像まで一括でアップロード→圧縮→ダウンロードができるのに対し、Squooshは一括処理ができないので、画像を多く処理する場合、TinyPNGの方がよいと思います。

さらに、画像にもよるのですが、TinyPNGのほうがやや画質をきれいにキープしてくれる場合もあるので、うまく使い分ける手もあると思います。

ちなみに、本記事のアイキャッチの場合、SquooshとTinyPNGとの間、圧縮後の画質の違いがありませんでした。

まとめ

以上、前回の「WordPressが重い・遅い対策①：第三者コードGoogle AdSenseの遅延読み込みで高速化」の続きで、ページの表示スピードに大きく影響しながら、コードを編集せず、わりと簡単にできる画像・写真のサイズ調整・最適化や、画質をあまり落とさない画像圧縮の方法、そして万能に近い神アプリSquooshと、バックアップWebサービスとしてTinyPNGなどをご紹介しました。

また、基本知識として、以下のように画像の幅及びサイズの目安としてあげさせていただきました。

幅の目安：サイト横幅1000px前後⇒記事画像640前後

画像ファイルサイズ目安：100kB以下、アイキャッチは極力20kB以下に

少しでもご参考になれば嬉しいです。