画像の最適化：ホームページの画像を軽くする方法（WebP・圧縮・サイズ）

ホームページの画像を軽くする（画像の最適化）には、4つの作業があります。①画像の大きさ（縦横の画素数）を、表示する大きさに合わせて縮める。いちばん効くのはこれです。②形式を選ぶ。写真はWebPかJPEG、さらに軽くするならAVIF、ロゴや図はSVGかPNG。③圧縮の度合いを、見た目が崩れない範囲で調整する。④画面の外にある画像は、見えそうになってから読み込む（遅延読み込み）。

WordPressなら、遅延読み込みは標準で入っていて、本文の最初の数枚には付けない仕組みもあります。自分でやることは、アップロードする前に写真を縮めること、本文に入れるときに「フルサイズ」を避けること、ページの一番上の大きな画像を遅延読み込みにしないこと、の3つが中心です。あわせて、画像の内容を文章で伝える代替テキスト（alt）も入れておきます。

まず、自社の画像が本当に重いかを確かめる

画像が重さの原因になっているかは、PageSpeed Insights（Googleの無料の診断。pagespeed.web.dev）で分かります。ページのURLを入れて「分析」を押し、「携帯電話」の結果の改善項目に「画像配信を改善する」が出ていれば、どの画像を、どれだけ軽くできるかが一覧で出ます。Chromeの説明では、推定で4KiB以上軽くできる画像が対象です。古い版の解説では「適切なサイズの画像」という名前で出てくる項目です。

当社が2026年10月9日に自社の記事ページ（「クロール済み – インデックス未登録」の記事）を1回測ったときは、改善項目に画像の項目は出ていませんでした。画像以外が原因のページもあるので、測ってから手を付けてください。重さの原因の見分け方はホームページが重い・表示が遅いときの原因と直す順番に、結果の読み方はPageSpeed Insightsの使い方と見方にまとめました。

WordPressでは、管理画面の「メディア」で画像を開くと、ファイルの大きさと縦横の画素数が表示されます。数MBある写真や、横幅が数千画素ある写真が並んでいたら、縮める候補です。

いちばん効くのは大きさ：表示する幅に合わせて縮める

スマホやデジタルカメラで撮った写真は、横が数千画素あるのがふつうです。ところが、ホームページの記事の本文に表示される幅は、それよりずっと小さいことがほとんどです。大きな写真をそのまま載せると、表示されない分の画素まで訪問者に読み込ませることになります。Chromeの説明も、画面に表示される大きさより大きな画像は送らないのが理想だとしています。

WordPressには、これを助ける仕組みがいくつか入っています。

5.3から、縦か横が2,560画素を超える画像をアップロードすると、2,560画素に収まるように自動で縮めた版を作り、それを一番大きいサイズとして使います（元のファイルも残ります）。
アップロードした画像から、いくつかの大きさの版を自動で作ります。4.4からは、本文の画像にそれらの版の一覧（srcset）を付け、ブラウザが画面に合った大きさを選べるようにしています。

ただし、2,560画素でも、記事の本文には大きすぎることが多く、テーマやページ作成の道具で背景に敷いた画像などは、この仕組みの外にあることがあります。次の手順で、もとの写真から小さくしておくのが確実です。

アップロードする前に、パソコンの画像編集の道具で写真を縮めます。目安は、その画像が表示される一番大きい幅の2倍程度までです。スマホなどの高精細な画面は、1つの点を複数の画素で描くため、表示幅ちょうどだと少しぼやけて見えることがあるからです。
本文に画像ブロックで入れたら、ブロックの設定の「解像度」（英語表示では Resolution）で、「大」など表示に足りるサイズを選びます。Chromeの説明は、WordPressでは十分な場所がない限り「フルサイズ」の画像は避けるよう書いています。
すでにアップロードした大きな画像は、「メディア」で画像を開き、「画像を編集」から縮小できます。WordPress.org の説明では、縮小はもとの画像に対して縦横比を保ったまま行われ、拡大はできません。切り抜きや回転の前に縮小するのがよい、とされています。

なお、本文の画像の表示の大きさ（ブロックの「幅」「高さ」）は、WordPress.org の説明どおり、たいていは「自動」のままで構いません。表示を小さくしても、読み込むファイルが軽くなるわけではない点に注意してください。

形式の選び方：写真・図・ロゴ・動く画像

画像の種類	向く形式	気をつけること
写真	WebP、JPEG	WebPは同程度の画質のJPEGより平均25〜35%小さい（MDN）
写真をさらに軽く	AVIF	JPEGより約50%小さい（MDN）。古いブラウザでは表示されない
ロゴ、アイコン、図	SVG、PNG	SVGは写真には向かない
画面の写し（スクリーンショット）	PNG	写真用のJPEGにすると文字がにじみやすい
動く画像	動画（MP4、WebM）	大きなアニメーションGIFは効率が悪い

数字は MDN（Mozilla が運営するウェブ技術の解説サイト）によるもので、すべての画像でその分だけ小さくなる保証ではありません。WordPress の公式の発表も、WebPはJPEGやPNGより平均でおよそ30%小さい、AVIFは同じ画質でJPEGより最大50%小さくなりうる、という書き方をしています。

Google 検索は、WebPもAVIFも検索に使える画像の形式として挙げているので、形式を変えて検索で不利になることはありません。

WordPressで WebP・AVIF を使うとき

WordPressは5.8からWebPを、6.5からAVIFを、JPEGやPNGと同じようにアップロードして使えるようになりました。ただし、サーバーの画像処理の仕組みがその形式に対応している必要があります。対応しているかは、「ツール」→「サイトヘルス」の「情報」タブで、メディアの処理に関する項目（英語表示では Media Handling）に、対応している形式の一覧として出ます。WebPやAVIFが入っていなければ、サーバーの管理者に相談します。

WebPでアップロードすると、自動で作られる小さい版もWebPになります。一方、5.8の公式の発表の時点では、アップロードしたJPEGを自動でWebPに変える機能は本体に入っていませんでした。手軽なのは、パソコンでWebPに変換してからアップロードすることです。変換の機能を持つプラグインを使う方法もありますが、入れる前に、表示が崩れないか、ほかの高速化の機能と重ならないかを確かめます。

圧縮：どこまで画質を落とすか

JPEGやWebPには、画質を少し落とす代わりにファイルを小さくする圧縮（非可逆圧縮）があり、その度合いを選べます。Chromeの説明は、画質を多少犠牲にして、形式ごとに圧縮の度合いを調整するよう勧め、そのための道具の例として Squoosh（ブラウザで使える画像の圧縮の道具）を挙げています。

どこまで落とすかの判断は、数字より目で見る方が確かです。

縮めて圧縮した画像を、スマホで実際の表示の大きさで見て、顔、文字、細かい部分がつぶれていないかを確かめます。
施工事例や客室の写真のように、写真そのものが選ばれる理由になる画像は、画質を優先します。軽くするのは、まず大きさ（画素数）の方で行います。
飾りの写真や背景の画像は、思い切って圧縮して構いません。

遅延読み込み：WordPressは標準で付けている

遅延読み込みは、画面の外にある画像を、訪問者がスクロールして近づくまで読み込まない仕組みです。HTMLでは画像に loading=”lazy” という指定を付けます。web.dev の説明では、対応していないブラウザはこの指定を無視するだけで、害はありません。

WordPressは5.5から、幅と高さの指定がある本文の画像などに、この指定を自動で付けています。さらに6.3からは、ページの最初の方にある画像（既定では3枚まで）には付けず、ページで一番大きく表示されそうな画像には、優先して読み込ませる指定（fetchpriority=”high”）を付けるようになりました。つまり、WordPressの本文の画像については、自分で何かを足す必要はふつうありません。

気をつけたいのは、ページの一番上の大きな画像です。web.dev は「LCP 画像を遅延読み込みしないでください。」と書いています（LCPは、ページで一番大きな画像や文章が表示されるまでの時間で、Googleが重視する指標の一つです。コアウェブバイタルとは）。テーマの機能や高速化のプラグインが、独自の遅延読み込みで一番上の画像まで後回しにしていると、かえって遅くなります。確かめ方は次のとおりです。

確かめたいページをChromeで開き、何もないところで右クリックして「ページのソースを表示」を選びます。
出てきた画面で、ページの一番上の大きな画像のファイル名を探します（Ctrl＋F か ⌘＋F で検索できます）。
その画像の img のところに loading=”lazy” が付いていないかを見ます。WordPressの標準の仕組みでは、一番上の画像には loading=”lazy” ではなく fetchpriority=”high” が付くことが多く、同じ画像に両方が付くことはありません。
一番上の画像に loading=”lazy” が付いていたら、テーマやプラグインの遅延読み込みの設定を見直します。

YouTubeなどの埋め込み（iframe）にも、WordPressは5.7から、幅と高さの指定があれば遅延読み込みの指定を付けます。ただ、埋め込みの形によっては付かないこともあります。

幅と高さの指定で、表示のずれを防ぐ

画像に幅と高さの指定（width と height）がないと、ブラウザは画像が届くまで場所を空けておけないため、画像が表示された瞬間に下の文章がずれます。web.dev は、すべての画像に幅と高さを指定するよう勧めていて、遅延読み込みをする場合は特に大事だとしています。このずれは、Googleの指標ではCLS（表示中のずれ）として数えられます。

WordPressの「メディア」から本文に入れた画像には、WordPressが幅と高さの指定を補います。ずれが起きやすいのは、HTMLを直接書いて貼った画像や、外部のサービスから読み込む画像、後から差し込まれる広告や埋め込みです。こうしたものには、幅と高さを書くか、表示する場所の大きさを先に決めておきます。

代替テキスト（alt）の書き方

代替テキストは、画像が表示されないときや、目の不自由な人が読み上げの道具を使うときに、画像の代わりに伝わる文章です。ファイルの軽さには関係しませんが、Googleが画像の内容を理解する手がかりにもなります。

WordPressでは、画像ブロックの設定の「代替テキスト」の欄に書きます。WordPress.org の説明では、ブロックで書いた代替テキストはそのページの画像だけに効き、「メディア」の画像の詳細で書いたものは、その画像をほかで入れるときの既定の文になります。

Googleの説明は、代替テキストを、ページの内容に沿った、情報が豊富で役に立つものにし、キーワードを詰め込まないよう求めています。良い例として、「子犬」より「『取ってこい』遊びをするダルメシアンの子犬」のように、画像の内容を具体的に書いたものを挙げています。W3C（ウェブの標準を決める団体）の手引きでは、飾りだけの画像は代替テキストを空にし、画像の中の文字はその文字を書き、リンクやボタンになっている画像は行き先や働きを書く、としています。

画像	代替テキストの例
施工事例の外観写真	木造2階建ての外観。南側の道路から見たところ
料金を画像にした表	画像の中の料金と条件をそのまま書く（できれば画像ではなく文章で載せる）
「電話で相談」のボタンの画像	電話で相談する
見出しの横の飾りの線	空にする（WordPressの版によっては、装飾として扱う設定がある）

料金や営業時間、住所のように、検索した人が知りたい情報を画像の中にだけ書くのは避けます。検索にも読み上げにも伝わりにくく、スマホでは拡大しないと読めないことがあるからです。

すでに載せている画像は、どこから直すか

全部の画像を一度に直す必要はありません。効く順に手を付けます。

各ページの一番上の大きな画像（メインビジュアルや記事のアイキャッチ）。表示の速さの指標に一番響く場所です。
トップ、サービスや料金、問い合わせなど、問い合わせにつながる主なページの画像。
PageSpeed Insights の「画像配信を改善する」で、軽くできる量が大きいと出た画像。
これから載せる画像。アップロードの前に縮める、という決まりを社内で一つ作っておくと、重い画像は増えなくなります。

画像を差し替えるときは、縮めた画像を新しくアップロードしてブロックの画像を置き換え、表示を確かめてから古い方を整理します。古いファイルを消す前に、ほかのページで使っていないかを確かめてください。Googleビジネスプロフィールに載せる写真は、ホームページとは別の決まり（大きさや形式）があります（Googleビジネスプロフィールの写真）。

当社の関わり方

当社は、ホームページの運営に加わり、検索から問い合わせが来るところまでを見ています。画像の重さは、その途中で詰まっていれば直す項目の一つです。一方で、施工事例や事務所の様子など、写真が選ばれる決め手になる業種もあり、軽さのために写真の力を削りすぎないことも大事にしています。どの画像から直すか、写真の見せ方ごと見直すかで迷ったら、相談するからお知らせください。

参考にした公式の説明

※内容は2026年10月時点の各公式の説明で確かめたものです。WordPressの画面の表示名は、版や言語の設定によって変わることがあります。