WordPressの画像圧縮：見た目を変えずに軽くする

画像が重いとページの表示が遅くなる：アップロード前のサイズを確認

スマホで撮ったばかりの写真は、1枚およそ3〜5MBあります。長辺は4000ピクセル前後で、ブログ記事やショップのページに載せるには明らかに大きすぎます。Webページで実際に表示される画像の幅は、ほとんどの場合800〜1600ピクセルです。表示幅に合わせれば、ファイルサイズは元の10分の1以下でも足ります。

WordPressはアップロード時にサムネイルや中サイズなど複数のサイズを自動で作りますが、元のファイルもサーバーに残ります。テーマや設定によっては、その大きな元画像がそのまま記事に使われることもあります。画像が重いと感じたら、まずアップロードする前に整えるのが確実です。

画像の容量の目安は、本文中の写真で200KB前後、ページ上部の大きなメイン画像でも500KB以内に収めると扱いやすくなります。あくまで目安なので、写真の内容によって前後します。

Web用の画像最適化は3段階：長辺、形式、画質の順で

画像を軽くする方法は主に3つあり、効く順番に並べると次のとおりです。

1. 長辺を縮める：4000ピクセルを1600ピクセルにすると、ピクセル数は約6分の1になります。もっとも効果が大きく、表示幅を超える分は画面上では見えないため、見た目にもほぼ影響しません。
2. 形式を選ぶ：同じ見た目でも、形式によってファイルサイズは大きく変わります。写真をPNGで保存しているなら、形式を変えるだけで一気に軽くなります。
3. 画質を下げる：最後の微調整です。画質を下げすぎると、空のグラデーションや肌にブロック状のノイズが出ます。

多くの人は画質のスライダーから触りますが、先に長辺を表示幅まで縮めておけば、画質はそれほど下げなくても目標の容量に届きます。

WordPressにアップロードする画像の形式：JPEG・WebP・AVIF・PNG

形式の選び方は、用途ごとに決めておくと迷いません。

• JPEG：どの環境でも確実に表示したいときの標準。メール添付や、古いシステムに渡す画像にも向いています。
• WebP：Web用のバランス型。同じ見た目ならJPEGより軽くなることが多く、現在の主要なブラウザで表示できます。WordPressでもそのままアップロードできます。
• AVIF：とにかく容量を優先したいときに。圧縮率は高い一方、書き出しに時間がかかり、古い環境では表示できないことがあります。
• PNG：透過が必要なときだけ。ロゴや、写真の背景を削除した商品画像など、背景を透明にしたい場合です。写真をPNGで載せると重くなります。

iPhoneのHEIC写真は、Webに載せる前にJPEGかWebPに変換しておきましょう。手順はHEICをJPGに変換する記事にまとめています。

写真のメタデータを削除して軽く、安全に：ICCプロファイルは残す

スマホで撮った写真には、画像そのもの以外の情報も入っています。撮影日時、カメラやスマホの機種名、設定値、そして位置情報がオンなら撮影場所の緯度・経度まで記録されています。

これらのメタデータを削除すると、ファイルが少し軽くなるうえ、自宅の場所などを意図せず公開してしまうことを防げます。ブログやショップに載せる写真では、削除しておくのが無難です。

ただし、ICCプロファイルだけは残してください。これは写真の色をどう解釈するかを示す情報で、消してしまうとブラウザによっては色がくすんだり、赤みが変わったりします。メタデータを丸ごと消すのではなく、色の情報だけ残して他を削除するのが正解です。

Airpicで画像を圧縮する手順

Airpicの画像圧縮なら、ここまでの3段階をブラウザ上で一度に設定できます。アカウント登録は不要で、画像圧縮は処理もダウンロードも無料です。CPUで処理するので、数秒で終わります。

1. 画像をドラッグするか、Ctrl+Vで貼り付けます。JPG、PNG、WebP、TIFF、HEIC、AVIFに対応しています。
2. 長辺の最大値を指定します。本文用なら1600ピクセル、横幅の狭いテーマなら1200ピクセルが目安です。
3. 形式を選びます。迷ったらWebP、互換性重視ならJPEG、容量最優先ならAVIFです。
4. 画質のスライダーで調整するか、目標サイズ（KB）を入力します。「200KB以内」のように決めているなら、目標サイズの指定が早道です。
5. メタデータを削除をオンにします。ICCプロファイルは保持されるので、色は変わりません。
6. 処理後の比較を確認して、ダウンロードし、そのままWordPressのメディアにアップロードします。

アップロードしたファイルは、ダウンロードから1時間後、遅くとも1日で削除され、学習に使われることはありません。小さすぎる画像を大きく見せたい場合は、圧縮の前に画像を高画質で拡大しておく方法もあります。形式ごとの詳しい違いは画質を落とさずにWeb用の画像を圧縮するガイドで解説しています。

FAQ

あわせて読みたい