ホームページの画像は小さくしてからアップする｜用途別のサイズ・容量の目安と、Windows・Mac・スマホでの縮小手順【2026年版】

公開日：2026.09.29

Webサイト保守
WordPress

記事の監修

IT・WEB集客の専門家

波多野明仁（Akihito Hatano）

WEB業界歴20年以上。大学生の頃に約50サイトを制作・運営して収益化。ITシステム開発会社でSEを6年間経験したのち独立。東証プライム企業をはじめ、これまでに4,000サイト以上を改善。自社メディアの制作・運営で培ったアクセスアップのノウハウを、クライアント企業のWEB集客に活かしている。1年でアクセス数が715倍になった企業、売上が25倍になった企業など、法人実績多数。

▶ 詳しいプロフィール

▶ 代表の想い「Web屋が世界平和を語る理由」

こんにちは、株式会社ソライルの波多野です。

「スマートフォンで撮った写真を、そのままホームページに載せている」。お客様のサイトを保守でお預かりすると、いちばん多く見つかるのがこれです。1枚が3〜5MBの写真が何十枚も入っていて、ページの表示が遅く、サーバーの容量も残りわずか、という状態です。

写真は、アップする前に「縦横のサイズを小さくし、容量を軽くする」だけで、見た目を変えずに10分の1以下にできます。この記事では、用途別のサイズと容量の目安、Windows・Mac・スマートフォンでの縮小の手順、WordPressにアップするときの注意、すでに重い画像を上げてしまったサイトの直し方を、順にご案内します。

画像が重いと何が起きるか
用途別のサイズ・容量・形式の目安
縮小の手順（撮影→縮小→圧縮→名前→アップ）
WordPressにアップするときの注意
すでに重い画像を上げているサイトの直し方

1. 画像が重いと何が起きるか

スマートフォンやデジタルカメラで撮った写真は、横4,000ピクセル前後、1枚3〜8MBあります。ホームページで表示される幅は、大きくても1,200ピクセル程度なので、10倍以上の大きさのデータを、毎回読み込ませていることになります。

起きること	具体的には
表示が遅くなる	スマートフォンの回線では、1枚数MBの写真を何枚も読み込むと、表示に数秒かかる。待てずに離れる人が増える
検索の評価が下がる	Googleは表示速度をページの評価に使っている。遅いページは、同じ内容でも順位が下がりやすい
サーバー容量を使い切る	レンタルサーバーの容量は有限。写真が数百枚たまると、メールが受信できなくなることもある
見た目が悪くなる	大きな写真をブラウザが縮小して表示するため、輪郭がぼやけたり、ぎらついたりする
バックアップと引っ越しが重くなる	バックアップに時間がかかり、サーバー移転のときにデータを移しきれないことがある

表示速度の全体（画像以外の原因）は「ホームページの表示が遅い原因と対処法」の記事でご案内しています。

2. 用途別のサイズ・容量・形式の目安

「小さくする」と言っても、どこまで小さくすればよいかは、写真の使い方で変わります。次の表を目安にしてください（数字は2026年時点の一般的な目安です。テーマやデザインによって変わります）。

ホームページの画像の用途別のサイズ・容量・形式の目安。記事内の写真は横800〜1,200ピクセル・100〜200KB、アイキャッチは1,200×675、トップの大きな写真は1,600〜1,920ピクセル、施工実績・商品は1,200〜1,600、ロゴ・図はPNG、顔写真は400〜800ピクセル

用途	横幅の目安	容量の目安	形式
記事・お知らせの中の写真	800〜1,200ピクセル	100〜200KB	JPG（写真）／WebP
アイキャッチ・一覧のサムネイル	1,200×675ピクセル前後（16:9）	100〜200KB	JPG／WebP
トップページの大きな写真（メインビジュアル）	1,600〜1,920ピクセル	200〜400KB	JPG／WebP
施工実績・商品の写真（拡大して見せたいもの）	1,200〜1,600ピクセル	150〜300KB	JPG／WebP
ロゴ・図・イラスト（線や文字がはっきりしたもの）	表示する大きさの2倍まで	数十KB	PNG／SVG
スタッフ・代表の顔写真	400〜800ピクセル	50〜100KB	JPG／WebP

形式の使い分けは、写真はJPG（またはWebP）、ロゴや図のように色数が少なく輪郭がはっきりしたものはPNG、と覚えておけば困りません。WebPはJPGより2〜3割軽くなる新しい形式で、主要なブラウザとWordPressが対応しています。

3. 縮小の手順（撮影→縮小→圧縮→名前→アップ）

手順1：撮影のときに気をつけること

明るい時間・場所で撮る。暗い写真は圧縮すると荒れやすい
施工実績や商品は、施工前・施工中・施工後を同じ角度で
スマートフォンの「HDR」「Live Photos」などは切っておくと、扱いやすい形式で保存される

手順2：縦横のサイズを小さくする（リサイズ）

まず、縦横のピクセル数を、表の目安まで小さくします。これがいちばん効きます。

Windows：「フォト」で写真を開く→右上の「…」→「サイズ変更」→ピクセル数を指定（またはペイントの「サイズ変更」）
Mac：「プレビュー」で開く→「ツール」→「サイズを調整」→幅を指定
iPhone・Android：写真アプリの編集で「サイズ変更」がない機種は、無料のアプリ（「画像縮小」で探せます）か、次のオンラインツールを使う
オンライン（無料）：iLoveIMG・Squoosh・Canva など。ブラウザで写真を開いて幅を指定するだけ

手順3：容量を軽くする（圧縮）

サイズを小さくしたあと、圧縮ツールに通すと、見た目を変えずにさらに軽くなります。TinyPNG（JPG・PNG・WebP対応）、Squoosh などが無料で使えます。JPGの「品質」は80前後が目安で、それ以上は見た目がほとんど変わらないのに容量だけ増えます。

手順4：ファイル名を付け直す

「IMG_1234.jpg」のままではなく、内容が分かる名前（例：gaiheki-tosou-shiko-go.jpg）にします。半角英数字とハイフンだけにし、日本語や空白は使いません。検索にも、あとで探すときにも役立ちます。

手順5：アップして、代替テキストを入れる

WordPressのメディアにアップし、「代替テキスト（alt）」に、写真の内容を短く書きます（例：「外壁塗装の施工後、木造2階建て住宅」）。目の不自由な方への説明であると同時に、検索に写真の内容を伝える欄です。

小さくしたあとの確かめ方

PageSpeed Insights（Googleの無料ツール）でページのURLを測り、「適切なサイズの画像を配信する」「次世代フォーマットでの画像の配信」の指摘が消えたか、または軽くなったかを見る
ブラウザの表示で、写真がぼやけていないか、スマートフォンで横にはみ出していないかを見る
サーバーの管理画面で、使用容量が増えていないかを月1回見る

4. WordPressにアップするときの注意

WordPressは自動で縮小版を作る：アップした画像から、サムネイル・中・大などの縮小版を自動で作ります。ただし、元の大きな画像もそのまま保存されるため、元を小さくしてから上げないと、容量は減りません
大きな画像は自動で2,560ピクセルに縮められる：WordPressは、長辺が2,560ピクセルを超える画像を自動で縮小します。それでも2,560ピクセルは大きすぎるので、自分で縮小してから上げます
記事に入れるときは「大」や「フルサイズ」を選ばず、表示幅に合った大きさを選ぶ：エディタで画像を入れるときに、サイズを選べます
同じ写真を何度も上げない：メディアライブラリから既存の画像を選び直せば、容量は増えません
圧縮プラグインを入れる場合：EWWW Image Optimizer などの圧縮プラグインは、アップ時に自動で圧縮してくれます。ただし、プラグインを増やすと保守の手間も増えるため、入れる前に保守会社に相談してください

5. すでに重い画像を大量に上げているサイトの直し方

何年も運用してきたサイトでは、数百枚の重い画像がたまっていることがあります。1枚ずつ手作業で直すのは現実的ではないので、次の順で進めます。

現状を測る：メディアライブラリの容量と、表示が遅いページを確かめる（サーバーの管理画面で使用容量を見る）
バックアップを取る：画像を一括で変更する前に、必ずファイルとデータベースのバックアップを取る
一括で圧縮する：圧縮プラグインの「一括最適化」で、既存の画像をまとめて圧縮・縮小する。数百枚なら数時間で終わる
不要な画像を消す：使われていない画像（下書きで上げただけ、差し替え前のもの）を消す
運用ルールを決める：今後は「縮小してから上げる」を、更新する人全員のルールにする

一括圧縮は、失敗すると画像が表示されなくなることもあるため、保守会社が行うのが安全です。

6. 画像アップのチェック表

確認する項目	できているか
横幅を用途の目安（記事内は1,200ピクセル以下）まで小さくした
容量を目安（記事内は200KB以下）まで圧縮した
写真はJPGまたはWebP、ロゴ・図はPNGにした
ファイル名を内容が分かる半角英数字にした
代替テキスト（alt）を入れた
記事に入れるとき、表示幅に合ったサイズを選んだ
同じ写真を重ねてアップしていない
施工実績・商品の写真は、同じ角度・明るい場所で撮った

7. 保守・更新代行に含まれるか

写真の縮小と圧縮は、更新作業の一部です。弊社のホームページ保守では、プレミアムプラン（コンテンツの編集代行を含む）で、お送りいただいた写真を適切なサイズにしてから掲載しています。スタンダードプランのお客様には、この記事の手順で縮小していただいたうえで、掲載のご依頼をいただいています。既存の画像の一括圧縮や、圧縮プラグインの導入は、保守の範囲内で対応できるかを事前にご案内します。更新代行の頼み方は「ホームページの修正・更新代行」、自分で更新する手順は「ホームページの更新を自分でするには」の記事でご案内しています。