【解像度のすべて】 Web・印刷・動画での違いと設定方法
SAKASA”解像度”ってどうやって決めてる？
未来Web制作や印刷、動画編集など
用途によって違うみたいね。
この記事では、解像度の基本知識から、用途別の適切な設定、実際に役立つポイントまでを解説します。
目次
解像度とは？基礎知識をわかりやすく解説
解像度とは、画像やディスプレイがどれだけ細かく情報を表示できるかを示す指標です。
簡単に言えば、解像度が高いほど「きれい」で、低いほど「粗く」見えるということです。
ところが、一般的には「300dpiが高画質！」と思われがちですが、Web上ではdpiは無関係です。
Webブラウザは画素数（px）で画像を表示するため、dpi（印刷解像度）の値は無視されます。
その為、同じ1000px × 1000pxの画像であれば、72dpiでも300dpiでもWebでは見た目は全く同じになります。
解像度の単位とその意味
| 単位 | 意味 | 主な使用場面 |
|---|---|---|
| dpi | dots per inch（1インチあたりの点の数） | 印刷物の解像度に使用 |
| ppi | pixels per inch（1インチあたりの画素数） | モニターの解像度に使用 |
| px（ピクセル） | 画像を構成する最小単位 | デジタル画像全般 |
ポイント
- dpiは紙媒体の解像度を表し、数字が大きいほど高精細になります。
- ppiは画面上の解像度を表し、スマホ・PC画面の密度を示します。
解像度と画質の関係
- 解像度が高い：細部まで鮮明で、拡大してもぼやけにくい
- 解像度が低い：粗く表示され、印刷や拡大時にギザギザが目立つ
例えば、スマホで撮った写真をポスターに引き伸ばしたときにぼやけるのは、解像度不足が原因です。
用途別の解像度
使用する目的によって最適な解像度は異なります。以下の表にまとめました。
| 用途 | 推奨解像度 | 補足 |
|---|---|---|
| Web・SNS | 72～150ppi（表示される大きさはpx単位で指定） | 画像は軽く、表示速度を優先 |
| 印刷（商業印刷） | 300dpi～350dpi | チラシ・ポスターは350dpi推奨 |
| 動画・映像 | フルHD（1920×1080px）、4K（3840×2160px） | 画質とデータ容量のバランスが重要 |
| サムネイル | 1280×720px（16:9比率が基本） | YouTube向け推奨サイズ |
| スマホ表示 | 750×1334px（iPhone 8基準） | 主要スマホに合わせることが大切 |
| ブログのアイキャッチ | 1200px × 630px（SNSシェアも考慮） | |
| 全幅ヘッダー画像 | 1920px以上（Retina対応なら2倍） |
解像度と表示サイズの関係
Webで大事なのは「表示されるピクセル数」です。例えば、2000pxの画像をHTMLやCSSで400px幅に縮めて表示すると、高精細には見えるが重くなります。その為、スマホでは、オーバースペックになる画像を載せがちです。
ポイントは、実際に表示するサイズ＋αくらいの画像サイズにしておくのがベストなのですが、ここにもう一つ落とし穴がありますそれは・・・。
Retinaディスプレイ対応の落とし穴
- iPhoneやMacなどの高解像度ディスプレイ（Retina）では、1pxが物理的には複数ピクセルで構成されています。
- これに対応するには、2倍サイズの画像を用意する手法（@2x画像）がよく使われます。
例：表示サイズ 300px → 実際の画像は 600px で作る。
解像度設定で気をつけるべきポイント
AI画像生成では“印刷用解像度”と混同しやすい
- AI画像生成ツールでは「解像度」「スケール」などの設定が混ざって出てくるため、
- Web掲載なのか、
- 印刷用データを作りたいのか、
で設定を切り分ける意識が重要です。
高解像度のメリット・デメリット
メリット
- 細部までクリアで鮮明に表示
- 大型印刷物や4K映像にも対応
デメリット
- ファイルサイズが大きくなり、データ処理が重くなる
- Webではページ表示速度の低下を招くことがある
低解像度のリスク
- 印刷ではぼやけて読みにくくなる
- Webでは画像が荒く見えて、プロフェッショナル感が損なわれる
- 拡大時にピクセルが引き伸ばされ、ギザギザが目立つ
目的に応じた最適な解像度選び
- Web・SNS：72～150ppiで軽量化を優先
- 印刷物：300dpi以上を維持
- 動画・映像：利用するメディアに応じた解像度（HD、4Kなど）を選ぶ
Sakasa AI
無料で使える画像圧縮サイト5選！SEO対策にも役立つ便利ツール | Sakasa AI Webサイトの表示速度を改善するためには、画像の最適化が欠かせません。特に、重い画像は読み込み速度を遅くし、ユーザーの離脱や検索順位の低下を引き起こします。 この記…
よくある疑問と解決策（Q&A）
Q1. 画像を拡大すると荒れるのはなぜ？
画像はピクセルで構成されており、無理に引き伸ばすとピクセルが拡大されるためです。解決策として、解像度の高い元データを使うか、AI画像補完ツールを使いましょう。
Q2. Photoshopで解像度を変更するには？
[画像解像度]メニューから変更できます。
再サンプルのチェックを外すと、元の品質を保ったままdpi変更が可能。
Q3. WebP形式は解像度に影響する？
WebPは圧縮効率が高く、解像度を維持したままファイルサイズを小さくできます。Web画像を軽量化したいときに便利です。
WebP形式はすごく便利（けど注意も必要）
- WebPは軽量かつ高画質な画像フォーマットで、今では多くのブラウザが対応。
- ただし、Safariの古いバージョンなど一部非対応が残っていたので、必要ならJPEGとのフォールバック用意も◎。
解像度を理解して最適な設定を選ぼう
画像の品質を維持したい場合は、適切な解像度設定を心がける
解像度は用途に応じて使い分けることが重要
Webでは軽量化を、印刷では高精細を優先
