【WordPress】画像サイズの圧縮方法について考える

こんすが、秋都鬼よすがです。

WordPressで作成するHPの掲載画像の圧縮方法について、どんな圧縮をするのができるだけ軽量にできるのかを試してみようと思ったので、自分のための備忘録を兼ねてメモしておこうと思います。

今回は主に記事のアイキャッチ画像を想定しており、ポートフォリオ用のイラストなどについては対象外とします。

画像形式について

JPG形式

大抵のイラスト作成ソフトや画像編集ソフトで対応しており書き出しが容易で、比較的軽量なため使用しやすい。

メリット

• 互換性が高い(基本的にどんな環境でも読み込み可能)
• 圧縮率が高いためファイル軽量化しやすい

デメリット

• 圧縮の際に画質劣化しやすい
• 文字やイラストでノイズが出やすい
• 透過ピクセルが使用できない

PNG形式

描画は精細で綺麗になるがファイル容量が重くなりがちでMBに到達しがちなため、ファイル容量制限のあるHP作成にあたっては多用できない。

メリット

• 劣化しづらい
• 文字やイラストが崩れにくい
• 透過ピクセルが使用できる

デメリット

• ファイル容量が重い
• 精細な写真などで容量増加しやすい

WebP形式

JPGやPNGに比べると新しい規格で画像編集を普段しない人からするとややマイナーなものの、JPGよりも軽量にすることもできて最近のHP構築では主流になりつつある？

メリット

• JPGより軽くなることがある
• 透過も対応

デメリット

• 古い環境では非対応の可能性もある
• 圧縮品質によっては描画が崩れることはある

余談だけど「ウェッピー」って読むらしい、ちょっと可愛い。

AVIF形式

WebPよりもさらに新しい規格でさらに軽量化ができるため、マイナーではあるものの将来有望。

ただし主要WEBブラウザがサポートするようになったのが2024年とかなり最近なため、ブラウザ以外のシステム上では非対応が理由で動作が不安定になることもあるかも？

メリット

• かなり軽量
• より高画質を維持しやすくなった

デメリット

• かなり新しい規格のため互換性問題がまだある
• エンコードが重い
• WordPress環境下でも非対応プラグインがある

SVG形式

イラストでのベクターレイヤーと同じような画像形式のため拡大縮小による劣化が発生しないが、仕様上写真やイラストのような画像は不向きなためアイキャッチにはあまりできないかもしれない。

サイト上で使用する記号やアイコン画像的な使い方であれば適格。

メリット

• かなり軽量
• 拡大しても劣化しない(ベクター形式なので拡大に合わせて輪郭が変わる)

デメリット

• 写真やイラストのポートフォリオには使用不可

お試し圧縮してみる

現状では軽量さと互換性の高さで選ぶならJPGかWebPが有用そうです。

PMG→WebPやJPG→WebPなどの形式変換をオンライン上で行ってくれるサイトが存在するので、よくわからない人はそういうオンラインツールを頼るとよさげ。

今回はこの記事のアイキャッチ画像を元に、いろいろ圧縮を図ってみようと思います。

前提として、アイキャッチ画像はCLIP STUDIO PAINT（以下CSP）で作成しています。

基本的にはCSPから直接JPGやWebPとして書き出しして、それをオンライン圧縮ツールにかけていく流れです。

もちろん、環境設定や画像の複雑さなどによって一概に一定の圧縮率に至るわけではないので、あくまで参考程度に今回のアイキャッチ画像における圧縮率のみ考えます。

①CSP→JPG

単純にCSPの「画像を統合して書き出し」機能でJPGとして書き出します。

最終ファイル容量：698KB

見た目：テキストの輪郭などに多少のにじみを感じますが、今回のアイキャッチ画像においては問題のない範囲です。

②CSP→WebP

CSPの「画像を統合して書き出し」機能で直接WebPとして書き出します。

最終ファイル容量：331KB

見た目：上記JPGファイルとほぼ変わらないように見えるクオリティでかなりの軽量化ができています。

③CSP→JPG→WebP

CSPの「画像を統合して書き出し」機能でJPGとして書き出した後、そのJPGをCSPで開いて再度「画像を統合して書き出し」機能でWebPに書き出します。

最終ファイル容量：418KB

見た目：前2つと特に変わったところは見受けられません。

④CSP→JPG→WebP(オンライン変換)

CSPの「画像を統合して書き出し」機能でJPGとして書き出した後、「画像コンバーター」というサイトでWebPにオンライン変換します。

最終ファイル容量：220KB

見た目：②とあまり違いがわからないくらいです。

CSPで直接書き出した②よりもやや軽くなりました。

⑤CSP→JPG→JPG(圧縮)

CSPの「画像を統合して書き出し」機能でJPGとして書き出した後、画像圧縮サイトでJPGのままオンライン圧縮します。

最終ファイル容量：188KB

見た目：遠目にはわかりづらいですが、拡大して見ると文字の内部にややガビガビしたノイズがあるように見えます。

かなり軽量化できた気はします、これでも十分いいかも。

⑥CSP→JPG→JPG(圧縮)→WebP(変換)

CSPの「画像を統合して書き出し」機能でJPGとして書き出した後、画像圧縮サイトでJPGのままオンライン圧縮し、さらに先程の画像コンバーターでWebPにオンライン変換します。

最終ファイル容量：234KB

見た目：⑤を変換したものなので文字の内部のガビガビが見えます。

JPG圧縮時点で188KBだったものが234KBに増えてしまったのでよくないですね。

結論

場合によっては⑥の手法で100KB未満に持ち込めることもあったり、オンライン変換の過程で設定を変えれば画質を落としてさらに軽量化できる余地はあります。

ただ変換に変換を重ねるとそれだけ画像劣化が起きる上に手間がかかるため、アイキャッチ画像を毎回丁寧に作成する方や画像編集自体あまりよくわからないなぁって方は⑤の手法でJPG圧縮のみに留めてもいいかもしれません。

アイキャッチはある程度カテゴリーごとに使いまわしする方は設定にこだわって圧縮の試行錯誤をしてみると後が楽かもしれません。

世の中のブログ記事たくさん書いている方はどのように画像容量のやりくりをしているのか聞いてみたいところですね。