画像はWebPに変えるのが正解か｜軽くする順番を決める

「表示が遅い原因は画像だと分かり、形式を変えましょうと提案された」「1枚が3メガバイト近い画像が、何枚も載っている」——表示の速さを指摘された現場で起きるやり取りです。形式を変えることは、最初にやる手ではありません。順番を間違えると、作業だけ増えて数字が動きません。この記事では、何から手を付けるかの順序を整理します。

重いのは形式のせいではないことが多い

画像が重い理由は、大きく3つに分かれます。1つ目は、表示する大きさよりも寸法が大きいこと。2つ目は、圧縮の度合いが緩いこと。3つ目は、形式が古く効率が悪いことです。この順に効き方が大きく、3つ目から手を付けるのは順番が逆になります。

実例で考えます。記事の中で幅800ピクセルで表示している写真が、もとは幅4,000ピクセルで保存されているとします。この場合、形式を変えても余分な情報を送り続けます。寸法を800ピクセルに合わせるだけで、容量はおおむね20分の1以下に落ちます。形式の変換で得られる効果とは桁が違います。

圧縮の度合いも見落としがちです。写真を書き出すときの品質の設定を最高にしていると、人の目には見分けがつかない差のために容量が倍以上になります。写真であれば、品質を8割程度に落としても見た目の違いはほとんど分かりません。この1手だけで、半分近くまで落ちることがあります。写真を撮った端末から直接上げている場合は、位置の情報や撮影の設定まで一緒に入っていることもあり、書き出し直すだけで無駄が落ちます。

形式の変換が効くのは、この2つを終えたあとです。寸法を合わせ、圧縮の度合いを詰めた状態から、さらに2割から3割を削る手として意味があります。順番を守れば、変換したのにあまり変わらないという結果を避けられます。逆に順番を無視すると、作業の割に効かない結論だけが残ります。

この順番は、社内への説明でも効きます。「新しい形式に対応します」という説明は、技術の話に聞こえて判断されません。「1枚3メガバイトの写真を200キロバイトにします」なら、誰でも意味が分かります。作業の名前ではなく、削れる量で説明する。これだけで、承認の速さが変わります。

手を付ける順	やること	効きの目安
1	表示する大きさに寸法を合わせる	数分の1から数十分の1
2	圧縮の度合いを詰める	半分程度まで
3	形式を新しいものに変える	さらに2割から5割
4	画面の幅で出し分ける	携帯電話での受信量を大きく削減

WebPとAVIFは何が違うのか

2つとも、動画の符号化の技術を静止画に転用した形式です。WebPは比較的古くからあり、扱える道具が多く、変換も速いのが特徴です。AVIFは新しく、同じ見た目でより小さくできますが、変換に時間がかかります。この差が、選び方の分かれ目になります。

圧縮の効きは、AVIFのほうがはっきり有利です。従来のJPEGと比べておおむね半分、WebPと比べてもさらに2割から3割小さくできるとされています。写真の枚数が多いサイトでは、この差が受信量の合計に大きく響きます。画像が主役のメディアなら、AVIFを検討する価値があります。

一方で変換の時間は、AVIFのほうが長くかかります。WebPの2倍程度かかる場合があると言われています。記事を公開するたびに変換が走る仕組みでは、この差が公開の待ち時間になります。画像を大量に一括で変換する場面では、処理が終わらないという問題に変わります。

2026年の時点では、どちらも対応を待つ段階は終わっています。主要な閲覧の道具と基本の仕組みは対応済みで、対応の割合は9割半を超えています。つまり「まだ早い」という理由で見送る段階ではありません。残る判断は、変換の手間をどこまでかけるかだけです。

両方を用意して選ばせる形が定石

どちらかを選ぶのではなく、複数を用意して閲覧の道具に選ばせるのが実務の定石です。同じ画像をAVIF、WebP、そして従来の形式の3つで書き出しておき、頁の側で候補を並べます。対応している道具は軽い形式を選び、対応していない道具は従来の形式を受け取ります。

この形の利点は、代替の用意が同時に満たされることです。1つの形式に賭けると、対応していない環境で画像が表示されません。候補を並べておけば、その心配がなくなります。古い環境からの閲覧が一定量ある法人向けのサイトでは、この安心が効きます。

書き方は、picture の要素の中に形式ごとの候補を並べ、最後に従来の img を置く形になります。多くの配信の仕組みでは、この記述を自動で作る機能が用意されています。自分で書くのは、仕組みに任せられない特別な画像だけで十分でしょう。

注意したいのは、3つの形式を用意すると保存する容量は増える点です。配信する量は減りますが、サーバーに置く量は3倍近くになります。画像が数万枚あるサイトでは、保存の費用と配信の費用のどちらが重いかを先に確かめてください。

写真と図で使い分けが変わる

形式の選び方は、絵柄によって変わります。写真のように色が連続しているものは、圧縮で情報を捨てる形式が向いています。一方で、図やグラフのように線と平らな色でできているものは、情報を捨てない形式のほうが軽く、しかもきれいに出ます。

実務でよく起きる失敗が、図を写真向けの形式で書き出すことです。文字の輪郭がにじみ、線の周りに汚れが出ます。容量も、線画なら情報を捨てないほうが小さくなることが多いでしょう。見た目が悪く、容量も大きい。両方で損をします。

逆に、写真を情報を捨てない形式で書き出すと、容量が数倍に膨らみます。「きれいに残したいから」という理由で写真をPNGで保存している例をよく見ます。画面で見る用途なら、写真は圧縮する形式で十分です。印刷に回す素材だけ、別に保管してください。

図やグラフについては、拡大しても崩れない形式という選択肢もあります。線と文字でできた図なら、この形式にすると容量が小さく、どの大きさでもきれいに出ます。ただし複雑な図では逆に重くなるため、書き出して容量を比べてから決めてください。

• 写真は圧縮する形式、線画や図は情報を捨てない形式か拡大に強い形式
• 図を写真向けの形式で書き出すと、文字がにじみ容量も増える
• 印刷用の素材は、画面用とは別に保管する

画面の幅に応じて出し分ける

形式を変えても、携帯電話に大きな画像を送っていれば効果は限られます。画面の幅が400ピクセル程度の端末に、幅1,600ピクセルの画像を送るのは無駄です。これを解くのが、画面の幅に応じて出す画像を変える指定です。

書き方は、候補となる画像の一覧とその幅を srcset に並べ、どの場面でどの幅で表示するかを sizes に書きます。この2つがそろって初めて、閲覧の道具が正しい候補を選べます。srcset だけ書いて sizes を省くと、画面いっぱいに表示する前提で選ばれてしまいます。

効き方は、形式の変換より大きくなる場合があります。幅1,600ピクセルの画像を400ピクセルに落とせば、容量はおおむね16分の1です。形式の変換で得られる2割から5割とは比較になりません。携帯電話からの閲覧が多いサイトなら、ここを先に手当てすべきです。

sizes の書き方でつまずく人が多いので、考え方を整理します。ここに書くのは表示される幅で、画像そのものの幅ではありません。本文の幅が最大680ピクセルで、画面が狭いときは画面いっぱいに広がる。そういう見え方をそのまま書き写すだけです。レイアウトを変えたときは、この記述も直す必要があります。

多くの配信の仕組みは、画像を上げた時点で複数の寸法を自動で作り、この指定も自動で入れます。つまりすでに効いている可能性があるということです。確認は、公開された頁の画像の記述を見て、候補の一覧が入っているかを確かめます。入っていなければ、設定か仕組みの側に原因があります。

遅延読み込みとの関係を整理する

画面に入るまで画像を読み込まない仕組みは、受信量を抑える手として広く使われています。ただし、これを全部の画像に付けると逆に表示が遅くなることがあります。最初の画面に出る大きな画像に付けると、読み込みの開始が遅れて、表示までの時間が伸びます。

使い分けの目安は明快です。最初の画面に出る画像には付けない。下にスクロールして初めて見える画像には付ける。記事のアイキャッチは多くの場合で最初の画面に出るので、ここに付けているなら外してください。

配信の仕組みが自動で全画像に付ける設定になっていることもあります。この場合、最初の画像だけ除外する指定を入れます。多くの仕組みには、先頭の何枚かを除外する設定が用意されています。ここを確かめるだけで、表示の速さの指標が動くことがあります。

なお、遅延読み込みを付けた画像は画像の検索で拾われにくくなる、という懸念が語られることがあります。正しく実装されていれば拾われますが、画面を組み立てる処理に頼りすぎた実装では見つけられないことがあります。画像の検索から流入がある場合は、確認してください。

変換をどこでやるか

形式の変換をする場所は、3つあります。1つ目は上げる前に手元で変換する方法。2つ目は配信の仕組みが自動で変換する方法。3つ目は配信の途中で変換する方法です。運用の負荷と柔軟さが、それぞれ違います。

手元で変換する方法は、仕組みに依存しないのが利点です。書き出すときに形式を選ぶだけで済みます。ただし、書き手が複数いる場合に品質がそろいません。「誰が上げても同じになる」形にしたいなら、この方法は向いていません。

配信の仕組みが自動で変換する方法は、いちばん運用が楽です。画像を上げれば、軽い形式が自動で作られ、頁の記述も自動で入ります。欠点は、細かい調整ができないことと、変換の処理でサーバーに負荷がかかることです。

配信の途中で変換する方法は、画像を配る仕組みの側で変換します。自社のサーバーに負荷がかからず、閲覧の道具に応じて最適な形式を返せます。費用がかかりますが、画像が多いサイトでは結果として安くなることもあります。

選び方の目安を1つ挙げるなら、書き手が何人いるかです。1人で運用しているなら、手元での変換で足ります。3人以上が記事を書くなら、仕組みに任せないと品質がそろいません。人が増えるほど、注意力に頼る運用は崩れていきます。

測ってから直す、を守る

画像の作業は、やった感じが出やすいのに数字が動かないことがあります。だからこそ、直す前に測り、直したあとに測る手順を守ってください。測る対象は、頁全体の受信量と、最も大きな要素の表示にかかる時間です。

受信量は、閲覧の道具に付いている開発用の画面で確かめられます。頁を開いたときに何が何バイト届いたかが一覧で出ます。ここで画像だけを絞り込めば、どの画像が重いかが一目で分かります。上位5枚を直すだけで、多くの場合は目に見えて改善します。

表示にかかる時間については、実際の利用者から集めた数字と、試験的に測った数字の2種類があります。直したあとに動くのは試験のほうが先で、実際の利用者の数字は1か月ほど遅れて反映されます。この時差を知らないと、効いていないと誤解します。

報告の場では、受信量の削減幅を先に出すのが伝わりやすいでしょう。「頁の重さが4メガバイトから900キロバイトになった」は、誰にでも意味が分かります。指標の数値だけを出すと、それが良いのか悪いのか判断されません。数字は、比べられる形にして出してください。

やってはいけない直し方

画像を軽くする作業には、やってはいけない型があります。共通しているのは、見た目や使い勝手を犠牲にして数字だけを良くすることです。指標を追うあまり、読者にとって悪い頁になってしまう例は珍しくありません。

• 圧縮を効かせすぎて、製品写真の質感が分からなくなる
• 図の文字がにじむほど圧縮する
• 最初の画面に出る画像に遅延読み込みを付ける
• 軽くするために画像を減らし、説明が伝わらなくなる
• 1つの形式だけにして、対応していない環境で表示されなくする

とくに1つ目は、法人向けで致命的です。製品の写真は、質感や仕上げが判断材料になります。軽くしたことで表面の様子が分からなくなれば、問い合わせが減ります。表示が0.3秒速くなる代わりに商談が減るなら、その取り引きは損です。

4つ目も見落としがちです。受信量を減らす最短の手は、画像を消すことです。しかし図解を消せば、文章だけで理解させることになります。指標は良くなり、読者の理解は落ちます。何のために軽くするのかを見失わないでください。

よくある質問

既存の記事の画像は全部変換すべきですか

必要ありません。流入の多い上位の記事から順に手を付ければ、全体の受信量の大部分は改善します。読まれていない記事の画像を変換しても、配信量はほとんど変わりません。更新の機会に合わせて直すのが現実的でしょう。

変換すると画質は落ちますか

設定によります。同じ見た目を保ったまま容量を減らす設定も、容量を優先して見た目を落とす設定もできます。製品写真は前者、背景の飾りは後者で構いません。用途ごとに設定を分けてください。

古い環境の利用者はどうなりますか

候補を並べる書き方にしておけば、対応していない環境には従来の形式が届きます。1つの形式だけに置き換えると、表示されない環境が出ます。法人向けでは古い環境からの閲覧が残るため、候補を並べる形を選んでください。

画像の名前や説明の文は関係ありますか

容量には関係しませんが、画像の検索と読み上げには関係します。形式を変えるときにファイル名を連番に置き換えてしまうと、画像の検索での手がかりが減ります。説明の文も、変換の作業で消さないよう気をつけてください。

表示の速さは検索の順位に効きますか

表示の速さは評価の要素のひとつとされていますが、内容の適合ほど大きくは効きません。速くしたのに順位が動かないのは普通のことです。順位のためではなく、読者が離脱しないために直すと考えてください。

アイキャッチと本文の画像は役割が違う

同じ「記事の画像」でも、アイキャッチと本文の中の画像では求められる条件が違います。アイキャッチは、一覧や共有の場で小さく並ぶことが前提です。本文の画像は、読んでいる途中で内容を補うために置かれます。この2つを同じ基準で作ると、どちらも中途半端になります。

アイキャッチに必要なのは、小さくしても何の絵か分かることとほかの記事と見分けがつくことです。細かい図や長い文字は入りません。寸法は大きめに用意し、縦横の比は表示される枠に合わせます。圧縮は少し強めにしても、小さく表示されるため気づかれません。

本文の画像に必要なのは、拡大して確かめられることです。画面の写真なら文字が読めること、製品の写真なら質感が分かること。ここは圧縮を控えめにします。そのぶん寸法は表示に合わせて絞り、全体の重さを抑えます。

運用としては、この2つで書き出しの設定を分けて持っておくのが早いでしょう。アイキャッチ用と本文用の2つの設定を書き出す道具に登録しておけば、毎回考えずに済みます。書き手が複数いる場合は、この設定を共有するだけで品質がそろいます。

同じ画像を使い回せる形で保管する

画像を軽くする作業を続けていると、同じ図を何度も作り直していることに気づきます。製品の構成図、業務の流れの図、比較の表。これらは記事、資料、登壇の画面で繰り返し使います。作り直しをやめるだけで、制作の時間が目に見えて減ります。

使い回すには、編集できる元のファイルを残すことが前提です。書き出した画像だけが残っていると、数字を1つ直すために全部を作り直すことになります。元のファイルと書き出した画像を対にして保管し、名前で対応が分かるようにしてください。

名前の付け方は、先に決めておかないと必ず崩れます。主題、版、用途、寸法の4つを並べる形にすれば、半年後でも探せます。日付だけの名前や、連番だけの名前にすると、中身を開くまで分かりません。

保管の場所は、1か所に集めるのが原則です。担当ごとの手元に散っていると、交代した時点で使い回せなくなります。画像は担当の資産ではなく会社の資産として扱う。この整理ができていると、軽量化の作業も一度で全体に効きます。

資料や印刷物の画像は別に考える

画面向けに軽くした画像を、そのまま資料や印刷物に流用しないでください。画面用に幅800ピクセルまで落とした写真を印刷に回すと、輪郭がぼやけます。用途ごとに素材を分けて保管するのが基本です。

保管の仕組みとしては、もとの素材を1か所にまとめ、そこから用途ごとに書き出す形にします。画面用、資料用、印刷用の3つを同じ場所に混ぜて置くと、半年後に「どれが原本か」が分からなくなります。名前の付け方を先に決めておいてください。

資料に貼る画像については、容量の問題が別の形で出ます。写真を高い品質のまま何十枚も貼った資料は、配るときに送れないほど重くなります。この場合は、資料を作る道具の側で画像を圧縮する機能を使うのが手早いでしょう。

印刷に回す素材については、色の指定の違いにも注意が必要です。画面用の色の指定で作った画像を印刷すると、鮮やかな色がくすんで出ます。印刷を前提とする素材は、作る段階で印刷用の設定にしておくほうが確実です。

担当が交代しても続く形にする

画像の軽量化は、一度やって終わりではありません。新しい記事が公開されるたびに、重い画像が入る余地があります。つまり作業ではなく、手順として残す必要があります。一度整えたのに半年で元に戻る、という例は非常に多いでしょう。

残し方の基本は、人の注意力に頼らないことです。「重い画像を上げないように気をつける」では続きません。配信の仕組みの側で上げた画像を自動で変換し、自動で複数の寸法を作る形にすれば、書き手が何も意識しなくても品質がそろいます。

仕組みで防げない部分だけを、手順書に残します。図を書き出すときの形式の選び方、アイキャッチの寸法、遅延読み込みを付けない画像。この3つ程度に絞れば、書き手が覚えられる量に収まります。

そして定期的に測る日を決めることです。3か月に1回、上位10本の記事の受信量を測るだけで、劣化に気づけます。気づくのが遅れると、また全部を直す作業に戻ります。測る日を予定に入れておくのが、いちばん安いやり方です。

手を付ける順番の決め方

最後に、実際の進め方を整理します。全部を一度にやらないことが要点です。効きが大きく、手間が小さいものから順に進めます。

着手前に確かめること

作業に入る前に、次の項目を確かめてください。ここを飛ばすと、直したのに効かない、または直したことで別の問題が出る形になります。

• 表示している幅と、実際に配信されている画像の寸法を比べたか
• 図を写真向けの形式で書き出していないか
• 画面の幅に応じた出し分けが、すでに効いていないか
• 最初の画面に出る画像に遅延読み込みが付いていないか
• 製品写真の圧縮の度合いを、見た目を確かめてから決めたか
• 候補を並べる形にして、対応していない環境への備えがあるか
• 変換を仕組みに任せられるか、手作業になるかを把握しているか
• 直す前の受信量を記録したか

とくに3つ目は、先に確かめる価値があります。多くの配信の仕組みは、すでに複数の寸法を作って出し分けています。これに気づかずに手作業で寸法を作り始めると、同じことを二重にやることになります。公開された頁の記述を1回見るだけで済む確認です。

まとめ

画像を軽くする作業は、形式の変換から始めるものではありません。効きが大きい順に、寸法を表示の大きさに合わせる、圧縮の度合いを詰める、形式を新しいものに変える、画面の幅で出し分ける、という順番になります。この順を守れば、少ない手間で大きく落ちます。

形式については、WebPは扱いやすく変換が速い、AVIFはより軽いが変換に時間がかかる、という違いがあります。どちらかを選ぶより、候補を並べて閲覧の道具に選ばせる形が実務では安全です。そして直す前と後を測り、3か月後に確かめる日を決めておいてください。

※本記事にはAIが活用されています。編集者が確認・編集し、可能な限り正確で最新の情報を提供するよう努めておりますが、情報の完全性、正確性、最新性、有用性等について保証するものではありません。本記事の内容に基づいて行動を取る場合は、読者ご自身の責任で行っていただくようお願いいたします。