iPhone写真がWebで巨大表示される原因と解決策｜最適なリサイズと圧縮、Windows・Mac・iPhone・オンラインの完全ガイド

「iPhoneで撮った写真をそのままWebに貼ったら巨大化して端しか見えない…」。そんな経験は誰にでもあります。本記事では、iPhone本体・Windows・macOS・オンラインサービスのどれを使っても迷わず最適なサイズにできるよう、具体的な手順・目安・トラブル対処・恒久対策までを一気通貫で解説します。WordPress運用者向けの設定とCSS例、ショートカット自動化レシピ、バッチ処理も用意しました。

iPhoneの写真がWebで「巨大表示」になる理由

まずは原因を正しく理解すると、最短で直せます。

ピクセル数が過剰：iPhoneの写真は3000px〜4000px超の長辺が一般的。ブログ本文の横幅が700〜900px程度なら、3〜5倍も大きい画像を貼っていることになります。
サイト側のCSS制御不足：img { max-width: 100%; height: auto; } が効いていない、もしくは「フルサイズ」で挿入してコンテナ幅を超えている。
高DPI（Retina）への誤解：高解像度ディスプレイでクッキリ見せたい気持ちから、必要以上に大きいピクセルを用意してしまう。
EXIFの向き・メタデータ起因：向き情報や巨大なメタデータが残り、ブラウザーの扱いによっては表示や読み込みが不安定になる。
形式や圧縮率の不一致：写真にPNGを使う、品質100%のJPEGで保存するなど、容量が無駄に増える。

最短で直すフロー（先に結論）

緊急時は以下のフローでOKです。後述のセクションで丁寧に調整・恒久化します。

目的	推奨手順	結果の目安
とりあえず本文に収めたい	iPhoneでメール送信時に「中」を選ぶ／Windows「フォト」のサイズ変更（幅1200px）／macOS「プレビュー」でサイズを調整（幅1200px）	長辺1200px・JPEG品質80%前後・数百KB
画質も容量も最適化したい	元画像を長辺1000〜1600pxに縮小＋JPEG品質75〜85%で再保存（必要な場合のみシャープ）	本文用は長辺1200px・〜500KB目安
運用を自動化したい	iPhoneショートカット作成（「画像をリサイズ」＋「イメージを変換」）／macOSはsipsで一括／WordPressはsrcsetで配信	毎回迷わず一定品質・高速表示

質問概要

「iPhoneで撮影した高解像度（3000px超）写真をPCにコピーし、別サイトに添付すると大きすぎて端しか見えない。
Web閲覧に適した大きさへリサイズするにはどうすればよいか？」

回答・解決策（方法別の全体俯瞰）

方法	手順／ポイント	ひと言メモ
iPhone本体で済ませる	1) 写真アプリ → 編集 → クロップで不要部分を削除 2) メールで自分宛て送信：「中」または「小」を選ぶ 3) ショートカットAppで「画像をリサイズ」レシピを作り一括処理	端末完結。枚数が多い場合はショートカットが便利
Windows標準ツール	画像を右クリック → 「フォト」で開く → 右上 […] → サイズ変更 → プリセット（例「プロフ写真向け」）またはカスタム入力	追加ソフト不要
macOS標準ツール	プレビューで開く → メニューツール → サイズを調整 → 幅・高さ入力 → ファイル → 書き出す	dpiを変えずピクセル数のみ下げると画質低下を抑えやすい
オンラインサービス	ImageResizer.com / iLoveIMG / Simple Image Resizer など 1) アップロード → 2) px指定または「50%縮小」など設定 → 3) ダウンロード	ブラウザーだけでOK。インストール不要
頻繁に使う場合のアプリ	デスクトップ: IrfanView, GIMP, Adobe Photoshop モバイル: Snapseed, Photoshop Express	バッチ処理や細かな圧縮率設定が可能

用途別：最適サイズと容量の目安

用途	推奨解像度	ファイルサイズ目安	備考
Webページ本文	長辺1000〜1200px	〜500KB	本文幅が700〜900pxのサイトが多いため十分
アイキャッチ／OGP	1200×630px（横長）	〜500KB	SNSシェア時に崩れにくい比率
ヘッダー・ヒーロー画像	1600〜1920px（横幅）	〜800KB	表示領域が広い場合のみ拡大、必要最小限で
メール添付	〜1024×768px	〜1MB	スマホでの閲覧優先
SNS投稿	Instagram 1080×1080px / Facebook 1200×628px	プラットフォーム推奨比率	正方形・横長の切替に注意

形式の基本：JPEG（写真）／PNG（透過が必要なロゴ等）。サイトが対応していればWebPやAVIFも選択肢。読み込みが遅い場合は品質80%前後に再圧縮すると体感速度が上がります。

方法別：具体的な手順

iPhoneだけで完結させる（最速）

メールでの自分宛て送信

写真アプリで画像を選び、共有からメールを選択。
送信前に表示されるサイズ選択で「中」または「小」を選ぶ（本文用なら「中」で十分）。
届いたメールから画像を保存してサイトにアップロード。

利点：圧縮とリサイズが一度に完了。欠点：複数枚の一括処理はやや手間。

ショートカットAppで一括リサイズ

以下のレシピを作れば、毎回数タップで複数枚を同じ規格に統一できます。

ショートカットApp → 新規作成。
アクション「写真を選択」（複数をオン）。
アクション「画像をリサイズ」（長辺＝1200px など）。
必要なら「イメージを変換」（JPEG）→ 「イメージの詳細を変更」でメタデータ削除。
「ファイルに保存」か「共有」で書き出し。

発展：「入力を求める」を加えて、都度幅（px）や品質を指定できるようにすると万能化します。

Windows標準「フォト（Photos）」でサイズ変更

画像を右クリック → プログラムから開く → フォト。
右上の[…]またはメニューから「サイズ変更」。
プリセットから選ぶか、カスタムで幅 1200pxを入力（縦横比は維持）。
保存時はJPEG、品質は80%前後を目安に。

Tips：枚数が多ければフォルダー単位で選択 → 右クリックで一括処理できるアプリ（IrfanView 等）も便利です。

macOS標準「プレビュー」でサイズを調整

画像をプレビューで開く（複数ならサムネイルを全選択）。
メニューツール → サイズを調整 → 単位をピクセルに切り替え、幅に1200などを入力（縦横比は固定）。
ファイル → 書き出すでJPEGを選び、スライダーで品質75〜85%程度に。

注意：dpiの数値はWeb表示に影響しません。必ずピクセル数で調整しましょう。

オンラインサービスでブラウザー完結

サービスを開く（例：ImageResizer.com、iLoveIMG 等）。
画像をアップロード → px指定または50%縮小などの割合を設定。
ダウンロードしてサイトへアップロード。

留意点：個人情報や機密画像はオンラインにアップしない。大量処理は回線負荷と時間に注意。

頻繁に使う場合のアプリ

IrfanView（Windows）：Batch Conversionで「Resize」＋「Save as JPG（Quality 80）」、ファイル名の一括規則も設定可能。
GIMP：画像 → 画像の拡大・縮小→ エクスポートでJPEG品質設定、最適化にチェック。
Photoshop：イメージ → 画像解像度（ピクセル指定）、書き出し → Web用に保存または書き出し形式で画質とプレビュー確認。
Snapseed / Photoshop Express（モバイル）：出力サイズと圧縮率をプロファイル化しておくと速い。

「ちょうど良い」サイズを選ぶための計算ルール

迷ったら次の式で決めます。

ターゲット幅＝実際に表示される本文の最大幅 × ディスプレイ倍率（1.5〜2）

本文の最大幅が760pxなら、760 × 1.5 ≒ 1140px（→ 1200pxでOK）。
見開き風の大画像やヒーローエリアなどフル幅表示なら、1600〜1920pxを上限に。

これ以上大きくしても、体感の画質はほぼ変わらず転送量だけが増えるのが実情です。

CSSでの恒久対策（サイト側の設定）

Web担当者・WordPress運用者向け。アップロード前のリサイズに加えて、サイト側でも安全策を講じましょう。

画像の基本CSS

img {
  max-width: 100%;
  height: auto;
  display: block;
}
figure { margin: 0; }

背景画像（cover/contain）の制御

.hero {
  background-image: url(hero.jpg);
  background-size: cover;   /* はみ出し覚悟で全面に敷く */
  background-position: center;
}
.thumb {
  background-size: contain; /* 収まり重視：余白が出ても全体を見せる */
}

幅・高さ属性とCLS対策

HTMLのwidth・height属性を指定しておくと、レイアウトシフト（CLS）を防げます。

&lt;img
  src="photo-800.jpg"
  width="800" height="533"
  alt="説明テキスト"&gt;

レスポンシブ画像（srcset / sizes）

端末に合わせて最適サイズを自動配信。WordPressは標準対応しており、正しく使うと「巨大画像」の配信を防げます。

&lt;img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 768px) 92vw, 720px"
  alt="説明テキスト"&gt;

WordPressの実務ポイント

「メディア設定」で中・大サイズの上限を自サイトの本文幅に合わせて見直す。
ブロックエディターで「フルサイズ」挿入を乱用しない（本文用は「中」や「大」を選択）。
生成されるサムネイル群が多すぎる場合はテーマやプラグインの設定で整理。

画質と容量の最適解（JPEGの品質は何%？）

写真のWeb用途では、品質75〜85%が経験的に最適帯。100%にしても見分けがつかないのに容量は大幅増となります。縮小後に軽くシャープをかけると精細感が戻りやすいです。

長辺px	品質	おおよその容量	用途の目安
800	80%	100〜250KB	サムネイル・本文内小画像
1200	80%	200〜500KB	本文の主画像
1600	80%	300〜800KB	見出し画像・軽いヒーロー

※被写体やディテール量で変動します（木の葉・髪の毛・夜景は容量が増えがち）。

色・メタデータ・向きの基礎知識

カラープロファイル：Webは基本sRGB。異なるプロファイル（Display P3等）のままだと色ズレの可能性。書き出し時はsRGBを選択。
EXIF向き：縦横の回転情報。編集や再保存で実画素に焼き付ける（Normalize）と誤表示が減る。
メタデータ削除：位置情報（ジオタグ）や余計なタグを削ると容量もわずかに減少、プライバシー保護にも有効。

iPhoneショートカット：配布不要の簡易プリセット

以下の構成で、誰でも再現できます（文字はそのまま検索して追加）。

「写真を選択」 → 複数をオン。
「入力を求める」 → 質問「長辺ピクセルは？」 → デフォルト 1200。
「画像をリサイズ」 → 「長辺を該当の値に」。
「イメージを変換」 → 形式：JPEG。
「イメージの詳細を変更」 → メタデータ削除（必要に応じてON）。
「名前を付けて保存」 → iCloud Driveの作業用フォルダーへ。
「クイックルック」または「共有」。

応用：品質（圧縮率）の選択や、ファイル名のルール（例：YYYYMMDD_####.jpg）を自動付与しておくと、後工程がとても楽です。

macOSでの一括処理：ターミナル（sips）

追加インストール不要。フォルダー単位で瞬時に処理できます。

# 例）カレントに「resized」フォルダーを作成し、長辺1200pxへ一括縮小
mkdir -p resized
sips -Z 1200 *.jpg --out resized

# HEICをJPEGに変換（sRGB指定）

mkdir -p jpg
sips -s format jpeg -s formatOptions 80 -s profile "sRGB IEC61966-2.1" *.heic --out jpg

「-Z」は長辺を基準に縮小するオプションです。dpiは触らずピクセル数で調整しましょう。

Windowsでのバッチ処理：選択肢

フォトは単枚処理が中心。枚数が多いならIrfanViewのバッチ機能が強力（リサイズ・リネーム・品質一括）。
PowerToysのImage Resizerも便利（右クリックからプリセット選択）。

どちらも「長辺1200px」「JPEG 80%」「sRGB」程度のプリセットを作っておけば、毎回迷いません。

サイトに貼る前の最終チェックリスト（10秒）

長辺は1000〜1200px？（ヒーローのみ1600〜1920px）
形式はJPEG（写真）／PNG（ロゴ等）？
JPEG品質75〜85%？
sRGBで保存？
メタデータ（位置情報）は削除済み？
ファイル名は半角英数・意味のあるルール？

よくある失敗と対処

失敗例	現象	対処
PNGで写真を保存	容量が数倍に膨張	写真はJPEG or WebP/AVIF（サイト対応時）
dpiを72にしただけ	見た目が変わらない／巨大のまま	ピクセル数を縮小する。dpiはWebに無関係
「フルサイズ」挿入	本文からはみ出す／重い	「中」「大」やテーマ推奨サイズで挿入、srcset活用
向き（縦横）が崩れる	回転しても戻る	編集で一度回転→保存してEXIF向きを反映、再書き出し
色がくすむ	色味が違う	sRGBで書き出し。ブラウザーで確認

ケーススタディ：実際の流れ（サンプル）

ケースA：ブログ本文に旅行写真を5枚載せたい

iPhoneのショートカットで一括リサイズ（長辺1200px、JPEG80%、メタデータ削除）。
WordPressにアップロード → 本文には「大」を挿入。
プレビューで表示崩れがないか確認（モバイル幅も）。

合計容量は数MB以内に収まり、ページの体感表示は高速化します。

ケースB：トップのヒーロー画像を差し替えたい

横幅1920pxで作成、中心の主要被写体が切れないようにスマートにクロップ。
JPEG品質80%・sRGBで書き出し（必要があれば軽くシャープ）。
CSSはbackground-size: cover;、重要部分が中央に来るようbackground-position: center。

疑問の芽をつぶすQ&A

Q：Retina対応のために倍のサイズが必要？
A：本文幅が760pxなら、長辺1200〜1500px程度で十分。2倍にするにしても実用は1.5倍前後でOKです。

Q：HEICのままでもいい？
A：サイトの処理系やブラウザーによっては互換性や最適化で差が出ます。JPEG（sRGB）へ変換が安全。

Q：画質が荒い
A：縮小後に軽いシャープ。品質を85%程度まで上げる。元がブレている場合はリサイズでは直りません。

セキュリティ・プライバシーの注意

写真のEXIFには位置情報や端末情報が含まれます。公開前に削除を推奨。
オンラインサービスの利用は、非公開画像を避ける・利用規約と保管期間を確認する。

運用の型をつくる（チーム共有用テンプレ）

項目	決めごと（サンプル）
本文用サイズ	長辺1200px・JPEG80%・sRGB
ヒーロー用サイズ	横1920px・JPEG80%（必要時のみ）
ファイル名規則	`YYYYMMDD_場所_####.jpg`（半角英数・スペース不可）
公開前チェック	スマホ幅プレビュー／CLSなし／テキストの可読性
保管	「original」「web」「thumb」フォルダー分け、必ず元データを残す

まとめ

「巨大表示」の正体は、ほぼピクセル過多×CSS不足です。アップロード前に長辺1000〜1200pxへ縮小し、JPEG80%・sRGBで書き出す。iPhoneのショートカットやWindows/macOSの標準機能、オンラインサービスを使えば、追加費用ゼロで今日から改善できます。サイト側はmax-width:100%やsrcsetで受け止め、運用の型をチームで共有すれば、以後は迷いません。表示は軽く、写真は美しく――その一手間が、離脱率と検索評価の両方に効きます。

付録：コピー＆ペースト用の実務スニペット集

本文用：ベーシックCSS

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
.wp-block-image img { height: auto; }

レスポンシブ画像（HTML）

&lt;img
  src="trip-800.jpg"
  srcset="trip-400.jpg 400w, trip-800.jpg 800w, trip-1200.jpg 1200w"
  sizes="(max-width: 768px) 92vw, 720px"
  width="800" height="533"
  alt="旅先の街並み"&gt;

macOS sipsで一括（ターミナル）

mkdir -p web
sips -Z 1200 *.jpg --out web

品質・形式の判断早見表

シーン	推奨設定	理由
ブログ本文の主画像	1200px / JPEG 80% / sRGB	見た目と容量のバランスが最良
ロゴ・図版	PNG（透過） or SVG	エッジがシャープ、色ベタも綺麗
ヒーロー・全面背景	1600〜1920px / JPEG 80%	広い領域でも破綻しにくい

参考：なぜdpiは関係ないのか（短解説）

dpiは「印刷時に1インチに何ドット詰めるか」という密度の指標です。ブラウザー表示はピクセルで描画するため、dpiを書き換えてもWeb上の見え方は変わりません。Web最適化では、ピクセル寸法（例：1200×800）と圧縮率（品質）に集中しましょう。

最後に：迷ったらこの一手

「本文なら長辺1200px / JPEG80% / sRGB」。この一本化だけでも、巨大化・崩れ・遅さの三重苦はほぼ解消します。今日の作業から取り入れて、ストレスのない画像掲載を始めましょう。

この記事を書いた人

佐藤健司

実務の現場で詰まりがちなポイントを地図にするITブログ「IT trip」を運営。Windows／Office（Teams・Excel）からSQL、サーバ運用、ガジェットまで、再現性のある手順と“なぜそうなるか”を丁寧に解説します。読んだらすぐ試せること、そして迷った人の次の一歩が見えることを大切にしています。