ホームページの画像のサイズと形式｜重くしない書き出し方

ホームページの写真を自分で差し替えるとき、迷いやすいのが「どれくらいの大きさで、どの形式で用意すればよいか」です。撮ったままの写真をそのまま載せるとページが重くなり、逆に小さくしすぎると、スマートフォンや高精細な画面でぼやけて見えます。

この記事では、置く場所ごとの横幅の目安、JPEG・PNG・WebP・SVG の使い分け、重くしない圧縮の手順、ファイル名と代替テキストの付け方をまとめます。表示の速さを数字で測る方法はここでは扱わず、画像を用意する側の手順に絞ります。形式や仕様の説明は、2026年10月時点の Google と MDN の公開資料によります。

画像の「サイズ」には2つの意味がある

画像のサイズという言葉には、2つの意味があります。

呼び方	意味	単位	何に効くか
縦横の大きさ（解像度）	画像が何ピクセル×何ピクセルでできているか	px（ピクセル）	画面でくっきり見えるか
ファイルの大きさ（容量）	保存したデータの重さ	KB・MB	ページが開くまでの時間、通信量

この2つは関係していますが、同じではありません。縦横の大きさが同じでも、形式や圧縮の強さでファイルの大きさは何倍も変わります。用意するときは、まず縦横の大きさを決め、次に形式と圧縮でファイルを軽くする、の順で考えます。

置く場所ごとの横幅の目安

縦横の大きさは、その画像が画面に何ピクセルの幅で表示されるかから決めます。いまのスマートフォンやノートパソコンの多くは、1つの点を細かい複数の点で描く高精細な画面です。そのため、表示される幅と同じピクセル数の画像では粗く見え、表示幅のおよそ2倍のピクセル数があるとくっきり見えます。MDN の解説でも、画面の細かさ（デバイスピクセル比）に応じて 1倍・2倍の画像を出し分ける書き方が紹介されています。

置く場所	表示される幅の例	用意する横幅の目安
画面いっぱいのメインの写真	画面の横幅いっぱい	1,920〜2,560px 前後
本文の幅の写真	700〜800px 前後	1,200〜1,600px 前後
2〜3列に並べる写真（事例の一覧など）	300〜400px 前後	600〜800px 前後
人物の顔写真（スタッフ紹介など）	200〜300px 前後	400〜600px 前後
ロゴ	横 150〜250px 前後	SVG なら大きさを気にしなくてよい

表示される幅は、サイトのデザインごとに違います。制作会社に頼んだサイトなら、「この場所の画像は横何ピクセルで用意すればよいか」を一覧でもらっておくと、差し替えのたびに迷わずに済みます。WordPress などの CMS（ページを管理画面から更新できる仕組み）では、アップロードした画像から小さい版を自動で作る設定になっていることが多いですが、元の画像が大きすぎるとアップロードと保存の容量を圧迫するので、上の目安まで縮めてから上げるのが無難です。

縦横の比率もそろえる

一覧に並ぶ写真は、縦横の比率（3:2、4:3、1:1 など）をそろえないと、高さがばらばらになったり、意図しない位置で切り取られたりします。事例の一覧・スタッフ紹介・お知らせのサムネイルなど、場所ごとに比率を決めておき、トリミング（必要な部分を切り出すこと）してから上げます。

形式の選び方（JPEG・PNG・WebP・SVG）

ウェブで使う主な画像の形式は次のとおりです。Google 検索は、BMP・GIF・JPEG・PNG・WebP・SVG・AVIF の形式に対応していると案内しています（Google 検索セントラル、2026年3月更新）。

形式	向いているもの	透過	注意
JPEG（.jpg）	写真	できない	圧縮を強くすると、輪郭のまわりににじみが出る
PNG（.png）	文字や線の入った図、画面の写し、透過が要る画像	できる	写真を PNG で保存するとファイルが大きくなる
WebP（.webp）	写真・図のどちらにも	できる	古いソフトでは開けないことがある
SVG（.svg）	ロゴ・アイコン・単純な図	できる	写真には使えない。ロゴの元データから書き出す
AVIF（.avif）	写真	できる	WebP よりさらに小さくできるが、編集ソフトの対応はまだ限られる

迷ったら、写真は WebP か JPEG、ロゴは SVG、図や画面の写しは PNG か WebP と覚えておけば大きくは外しません。ロゴの形式の違いはロゴのデータ形式で詳しく説明しています。

WebP とは

WebP（ウェッピー）は、Google が開発したウェブ向けの画像形式です。Google の説明（2025年8月更新）では、非可逆圧縮（画質を少し落として小さくする方式）の WebP は、同じ画質の JPEG より4分の1〜3分の1ほど小さくなり、可逆圧縮（画質を落とさない方式）の WebP は PNG より4分の1ほど小さくなるとされています。透過やアニメーションも扱えます。

Chrome・Safari・Firefox・Edge など主なブラウザが対応しているので、会社のサイトの写真を WebP にして困ることはほとんどありません。ただし、元の写真は JPEG などで別に保存しておきます。WebP は、印刷用のソフトや古い画像編集ソフトで開けないことがあるためです。

重くしない書き出しと圧縮の手順

画像が重くなる原因の多くは、カメラやスマートフォンで撮ったままの写真をそのまま載せていることです。撮ったままの写真は横4,000ピクセル以上、ファイルの大きさが数MBになることも珍しくありません。次の順で軽くします。

1. トリミングする：要らない部分を切り落とし、決めた比率にそろえる
2. 縮める：上の表の横幅まで縮める。ここでファイルの大きさは大きく下がる
3. 形式を選ぶ：写真なら WebP か JPEG
4. 圧縮の強さを決める：画質の設定を少しずつ下げ、拡大して見て、にじみが気にならないところで止める
5. ファイルの大きさを確かめる：同じ場所の画像どうしで、極端に大きいものがないかを見る

圧縮には、画像編集ソフトの「Web用に書き出し」のような機能のほか、ブラウザで使える無料の変換ツールもあります。ツールを使うときは、社外に出してよい写真かどうかも考えます。社員の顔や取引先の情報が写った写真は、手元のソフトで処理するほうが安心です。

ファイルの大きさの目安は、画面いっぱいの写真でも数百KB程度、本文の写真なら100〜300KB程度に収まることが多いです。ただ、数字を合わせることより、同じ見た目で必要以上に重い画像を載せていないかを確かめるのが目的です。

ファイル名と代替テキスト

画像を上げるときは、ファイル名と代替テキスト（画像が表示されないときや、画面の読み上げで使われる説明の文）も付けます。

• ファイル名：「IMG_0123.jpg」や「1.jpg」ではなく、「kyoto-office-entrance.jpg」のように中身の分かる英数字にする。Google の画像のガイドラインでも、一般的なファイル名を避け、内容の分かる名前にすることが勧められています
• 代替テキスト：「事務所の入り口。白い壁に木の看板」のように、画像が何を伝えているかを短く書く。Google は、代替テキストに語句を詰め込むことを避けるよう案内しています
• 飾りの画像：線や模様など意味のない画像は、代替テキストを空にして、読み上げで飛ばされるようにする

なお Google の案内では、ページの中の画像のうち、背景として CSS（見た目を指定する仕組み）で置いた画像は検索の画像として扱われません。製品の写真など見つけてほしい画像は、背景ではなく本文の画像として置きます。

差し替える前のチェックリスト

• 置く場所の表示幅を確かめ、その約2倍の横幅に縮めた
• 一覧に並ぶ写真の縦横の比率をそろえた
• 写真は WebP か JPEG、ロゴは SVG、図は PNG か WebP にした
• 拡大して、にじみや粗さが気にならないか見た
• 撮ったままの数MBの写真を載せていない
• ファイル名を中身の分かる英数字にした
• 代替テキストを書いた（飾りの画像は空にした）
• 写真の使い方の許可（人物・素材写真のライセンス）を確かめた

素材写真を使う場合のライセンスの注意は素材写真の使い方と注意点、プロに撮影を頼むときの準備はプロのカメラマンに撮影を頼むときの準備にまとめています。写真の差し替えを自分でせずに任せたい場合の費用の考え方はホームページの更新代行の料金を参照してください。

まとめ

ホームページの画像は、表示される幅のおよそ2倍の横幅に縮め、写真は WebP か JPEG、ロゴは SVG、図は PNG か WebP で用意します。重い原因の多くは撮ったままの写真なので、トリミング・縮小・圧縮の順で軽くし、ファイル名と代替テキストも付けてから上げてください。

Lapisデザインラボの月額のサポートでは、写真の差し替えなどの更新もお受けしています。内容は月額サポートをご覧ください。