ホームページの画像を圧縮する方法｜無料のやり方と、2.1MBの図を7通りに圧縮して比べた容量

画像の圧縮は、見た目をほぼ保ちながら、保存や転送に必要な画像ファイルの容量を小さくすることです。 サイトでは「表示する大きさに縮小→形式を選ぶ→画質を下げすぎない範囲で圧縮」の順に進めます。写真はJPEGかWebP、透過や図はPNGかWebPを選び、実際の見え方で判断します。 当社で約2.1MBの図を試すと、幅1200ピクセルに縮めてWebP画質82にしたものが約80KB（約4%）で最も小さくなりました。

商品写真やバナーの多いページは、画質設定だけでなく、画像の寸法や読み込み方も合わせて見直します。

画像の圧縮とは

画像の圧縮とは、色や模様を記録する方法を工夫したり、情報を減らしたりして、ファイル容量を小さくする処理です。画素情報を復元できる「可逆圧縮」と、減らした情報を復元できない「非可逆圧縮」に分かれます。ホームページでは、写真や図の用途に合わせて方式を選び、見た目と容量の両方で仕上がりを判断します。

「可逆」は、縮小や切り取りなども含め、加工前の状態にすべて戻せるという意味ではありません。先にピクセル数を減らしていれば、可逆圧縮で保存しても、失った細部が復元されることはありません。

画像の縮小は縦横のピクセル数を減らす操作で、サイトの軽量化では圧縮と組み合わせて使います。

画像を圧縮する方法｜無料のやり方

無料で始めるなら、形式と画質を比較できるSquooshか、利用中の端末に備わる標準アプリを使います。

ここでの無料は、無償のWebアプリと、所有する端末の標準機能を追加購入せずに使う方法を指します。Officeの「図の圧縮」は利用ライセンスが前提で、無料のWeb版で使える機能ではありません。

無料のWebアプリ「Squoosh」で画像を圧縮する手順

1. Squoosh公式アプリを開き、処理する画像を読み込みます。
2. 「Resize」を有効にし、「Maintain aspect ratio」で縦横比を保ちながら寸法を指定します。
3. 「Compress」で、JPEG系やWebPなど、画像の用途に合う出力形式を選びます。
4. 「Quality」などの設定を調整し、比較表示で文字や輪郭、商品の模様を確かめます。
5. 変更後の容量を確認し、「Download」のボタンから公開用の画像を保存します。

画質の数値は、形式やツールが違うと意味も異なり、同じ値で同じ見た目になるとは限りません。

macOSのプレビューで縮小と品質を調整する手順

1. 「プレビュー」で画像を開き、「ツール」→「サイズを調整」を選びます。
2. 「画像を再サンプル」を選択し、「縦横比を固定」を有効にしてピクセル単位で幅と高さを調整します。
3. 「ファイル」→「書き出す」を選び、「フォーマット」でJPEGなどを指定します。
4. JPEGでは品質を調整し、新しい名前や保存先を指定して「保存」を選びます。

印刷用の解像度情報だけを変える操作と区別し、保存後の幅と高さのピクセル数を確認してください。Appleのサイズ変更ガイド

Windowsのペイントとフォトを使う手順

1. 「ペイント」で画像を開き、Microsoftの公式案内にある「ホーム」→「サイズ変更」を選びます。
2. ピクセル単位かパーセント単位を選び、掲載場所に合わせて新しい寸法を指定します。
3. 保存するときにJPEGやPNGなどの形式を選び、元画像とは分けて保存します。

アプリの更新によって配置が異なる場合は、タブの位置よりも「サイズ変更」という機能名を探します。フォトでの切り取りは、写真を選び、「画像の編集」→「切り取り」の順に進める操作です。

フォトの圧縮や品質調整について、全端末で共通する詳しい手順は、公開情報では確認できません。

iPhone・スマホで画像を圧縮する

iPhoneでは、これから撮る写真の保存形式を選ぶ設定と、すでにある画像を書き出す操作を分けて使います。

高効率の形式（HEIF・HEIC）は撮影用で、サイトに載せる形式とは別に判断します。

「フォーマット」はHEIF撮影に対応する端末だけに表示されます。

1. 「設定」→「カメラ」→「フォーマット」の順に開きます。
2. 省スペースの形式を使う場合は「高効率」、JPEGで撮る場合は「互換性優先」を選びます。

既存画像は、iPhoneの「プレビュー」が利用できる環境で、次のように書き出せます。

1. 「プレビュー」で画像を開き、ファイル名の横のアクションメニューボタンを選びます。
2. 「書き出す」を選択し、JPEGまたはHEICのファイルフォーマットを選びます。
3. 「サイズ」のスライダを動かし、容量と品質のバランスを調整します。
4. 書き出しの設定を確かめてから保存します。

書き出した後は掲載先での表示も確かめます。Appleの書き出し・圧縮手順

Excel・Wordの画像を圧縮する

Excel・Word・PowerPointの画像は、対応するデスクトップ版の「図の圧縮」で、文書内の容量を減らせます。

Windows版Officeでエクセルやワードの画像を圧縮する手順

1. Excel・Word・PowerPointで対象のファイルを開き、圧縮する画像を選びます。
2. 「図の形式」→「調整」→「図の圧縮」の順に選び、設定画面を開きます。
3. 選択中の画像だけを処理する場合は、「この画像だけに適用する」をオンにします。
4. 「解像度」で用途に合う設定を選び、「OK」を押してからファイルを保存します。
5. 保存後に文書を開き直し、画像内の文字や商品の細部と、ファイル容量を確認します。

「解像度」は、資料の用途に合わせて選びます。Microsoftの圧縮手順

Mac版も「ファイル」→「画像の圧縮」から選べます。Web版のMicrosoft 365では使えません。トリミング部分の削除は戻せないので、原本を残します。

サイズ（ピクセル）と容量の関係

画像のサイズは縦横のピクセル数、容量は保存や転送するデータ量で、表示する大きさに合わせて両方を調整します。

ページ上で小さく表示しても、大きな元画像を配信していれば、読み込むデータ量はそのまま残ります。

Googleの説明では、500×500 CSSピクセルの枠は、通常の画素密度なら500×500ピクセルが対応例です。画素密度を示すDPRが2の画面では、1,000×1,000ピクセルの画像が対応例として挙げられています。

LPの画像は「掲載枠の幅」から決める

LPの画像は、まず掲載枠の幅をCSSピクセルで測り、高密度の画面（DPRが2）向けにはその2倍のピクセル数を目安に書き出します。上のGoogleの対応例と同じ考え方です。

縦と横を半分にしても、容量が同じ割合で減るとは限りません。形式や画質設定でも変わるので、縮小後のファイルで確かめます（下の当社の実験では、縮小だけで約40%になりました）。

表示条件に合う画像を配信するには、幅の異なる候補を用意し、HTMLのsrcsetとsizesで伝える方法があります。srcsetは画像候補と各横幅、sizesは掲載枠の幅を示し、ブラウザが画面密度なども踏まえて選びます。制作担当者には、スマホ向けに小さな画像を固定するのではなく、表示条件に応じて配信するよう依頼します。Googleのレスポンシブ画像解説

JPEG・PNG・WebPの違いと選び方

写真はJPEGかWebP、透過や図はPNGかWebPから比較し、文字や線の再現性と容量で採用形式を決めます。

操作画面や価格表では、PNGや可逆WebPも候補にし、読むために必要な情報を優先してください。

Googleは、非可逆WebPが同等のSSIMという画質評価指標のJPEGより25〜34％小さい比較結果を示しています。この数値は比較条件のある結果であり、自社の画像すべてが同じ割合で軽くなる保証ではありません。GoogleのWebP公式概要

線や図形で作ったロゴにはSVGも候補になりますが、写真をそのまま保存し直して軽くする形式ではありません。

AVIFは掲載先で扱えるかを確認し、WebPへの変換の操作は、別の記事『JPG・PNGをWebPに変換する方法』で扱います。

サイトの表示速度との関係

画像を軽くすると取得時間を減らせますが、表示速度を改善するには、読み込みの開始時期と表示領域も確認します。

LCPは、最初の画面内で最大の画像やテキストなどが表示されるまでの時間を測る指標です。最も容量の大きい画像が必ず対象になるわけではないため、まず計測結果から対象の要素を特定します。

LCP画像には遅延読み込みを付けない

最初の画面に見える主要画像、特にLCP画像には、読み込みを後回しにするloading="lazy"を付けません。loadingを省略するかeagerを使い、重要な画像にはfetchpriority="high"の指定も検討します。

highは遅延読み込みを解除しないため、lazyとの併記や、すべての画像への指定は避けます。ページ下部の画像は遅延読み込みの候補にし、画面に近づいた段階で取得するようにします。Googleの遅延読み込み解説

width・heightで画像の場所を確保する

HTMLの画像にwidthとheightを指定すると、ブラウザが読み込み前に画像の縦横比を把握できます。これにより、画像が届いたときに文章や購入ボタンが押し下げられる、表示のずれを抑えやすくなります。

次は、HTMLの画像に指定する属性の説明例で、寸法は1,200×800ピクセルの画像を想定しています。

width="1200"
height="800"
loading="eager"
fetchpriority="high"

寸法は実際の画像に合わせ、画面幅に応じた伸縮はCSSで設定するよう、制作担当者に伝えます。Googleの表示のずれを防ぐ解説

画像が軽くなっても、JavaScriptの処理が終わるまで隠されていれば、表示時刻が変わらない場合があります。圧縮だけでLCPが改善しないときは、取得開始の遅れや、取得後から表示までの待ち時間も調べます。

圧縮しすぎで起きること

圧縮を強めすぎると、文字のにじみや商品の細部の消失が起きるため、容量と一緒に読めるかどうかを確認します。

非可逆圧縮では色の情報が粗く扱われる場合があり、色文字と背景の境界などで変化が目立つことがあります。画像全体の色が変わった場合は、圧縮率だけでなく、色空間やICCプロファイルの扱いも確認します。

圧縮後の画質を目で確かめる手順

1. 加工前の原本を残し、同じ寸法で形式や画質設定を変えた候補を作ります。
2. 原本と候補を並べ、同じ場所の文字、輪郭、商品色、細かな模様を見比べます。
3. 細部を拡大して確認し、価格や注記に読み間違いが起きないかを確かめます。
4. 実際の掲載サイズでも確認し、パソコンとスマホで文字や商品の質感を確かめます。
5. 商品の拡大表示があるページは、その表示でも必要な細部が残っているか確認します。
6. 公開後のページを開き、意図した画像が配信されているかを確認して採用します。

圧縮済み画像の保存を繰り返さず、修正するときは原本から作り直し、実際の使い方で見た目を判断します。

当社の図を7通りに圧縮して比べた結果

同じ図でも、形式と画質と寸法の組み合わせで、容量は約2.1MBから約80KBまで変わりました。

当社が記事用にAIで作った図解1枚（PNG・2016×1344ピクセル・約2.1MB）を、無料のImageMagickとGoogleのcwebpで圧縮して測りました。表と日本語の文字が中心の図で、メタデータは外しています。

分かったことは3つ。

1. ロスレスのWebPは、画質を保つぶん減り方が小さい（約63%）。
2. 寸法を縮めるだけでも約40%になり、縮小と非可逆圧縮を組み合わせると最も小さくなった。
3. 画質82から40に下げても、減ったのは約65KBだけだった。

元・画質82・画質40の同じ部分を等倍で並べると、この図では画質40でも文字のにじみは目立ちませんでした。ただし、平らな色の図だからで、写真や細かい模様の画像で同じ結果になるとは限りません。

当社は記事の図を2016×1344で作り、WebPの画質82にしてから載せています。過去にはPNG約1.2MBの図が約47KBになった例もあります。

画像圧縮の前後で表示速度を確認する方法

変更前後の比較では、画像の転送量とLCPを分けて記録し、端末や通信などの計測条件をそろえます。

PageSpeed Insightsでは、実ユーザーの体験と、Lighthouseによるシミュレーション診断を分けて読めます。実ユーザーのデータは過去28日間の集計なので、公開直後の修正結果がすべて反映されるわけではありません。

これらは実ユーザーの計測値の75パーセンタイルで評価します。GoogleのPageSpeed Insights解説

1. 変更前のページを計測し、LCPの対象要素と、重い画像の候補を記録します。
2. 対象画像の寸法、形式、容量を残し、主要画像の遅延読み込みも確認します。
3. 縮小と圧縮、必要な読み込み設定を反映し、公開したページの見た目を確かめます。
4. 同じ端末・画面幅・通信・キャッシュ条件で計測し、転送量とLCPを比較します。
5. 公開後は実ユーザーのデータも追い、初回表示とスクロール時の問題を確認します。

容量の削減率と表示時間の改善率は一致しないため、制作会社には公開後の比較まで依頼してください。

画像の役割やテキストで載せる情報は、ホームページの作り方とLPの構成で整理できます。

よくある質問（FAQ）

画像圧縮の判断に迷ったら、安全性、必要な画質、一括処理の条件、掲載先の形式対応を分けて確認します。

無料の圧縮サイトは安全ですか？

無料か有料かだけで判断せず、画像の処理場所、送信する情報、保存や削除に関する説明を確認してください。Squooshは画像をサーバーへ送らず端末内で圧縮しますが、アクセス分析や圧縮前後の容量値の収集は説明されています。未公開の商品写真などは社内の扱いに従い、必要に応じて端末の標準アプリで処理します。SquooshのPrivacy

画像は何KBにすればよいですか？

すべての画像に共通する最適な容量はなく、掲載サイズと内容に対して、画質と容量のバランスを判断します。商品拡大用の写真と小さなロゴに同じ上限を当てず、文字や質感を残せる範囲で軽くしてください。

画像を一括で圧縮するにはどうすればよいですか？

サイト用の画像なら、当社の実験でも使った無料のImageMagickで、フォルダ内をまとめて処理できます。例は、幅1200ピクセルに縮めてWebP画質82で、先に作ったoutフォルダへ書き出す指定です。

magick mogrify -path out -resize 1200x -strip -quality 82 -format webp *.png

写真・ロゴ・文字入りの図を同じ設定で一括処理せず、代表の1枚で見え方を確かめてから広げてください。

ホームページの画像はWebPにすべきですか？

WebPは写真にも透過画像にも使える有力な候補ですが、変換後の容量と見た目、掲載先での動作を確かめて選びます。文字や線の多い画像では、PNGや可逆WebPも候補にし、必要な情報が残るかを比べてください。