はじめに
ブログの記事をどう書けばいいかわからない、画像の扱いで迷っていませんか？この章では、本書の目的と読み方をやさしく説明します。
本書の目的
この文書は、Webサイトに掲載する画像の適切な解像度やサイズ、作成と運用のポイントをまとめたガイドです。ブログのサムネイル、ECの商品画像、サイトのヘッダーなど、実際の事例を想定してわかりやすく解説します。
誰に向けているか
- Web制作や運用に携わる方
- ブログ運営者やEC担当者
- Webデザイナーやフロントエンドエンジニア
初心者から中級者まで役立つ内容です。
本書で学べること
- dpi/ppiとpxの基礎（簡単なイメージで説明）
- 印刷用画像とWeb画像の違い
- 高解像度ディスプレイ対応の考え方
- 画質と容量のバランス、ファイル形式の選び方
- 検索や表示速度への影響
読み方のコツ
実例を優先して読み進めると理解が早くなります。まずは自分のサイトで使っている画像を一つ選び、本書の基準と比べてみてください。
Web画像の解像度とは？印刷との違い
Webでの「解像度」の意味
Web上の解像度は、画像のピクセル数（横×縦）で表します。たとえば「1200×800px」の画像は横1200ピクセル、縦800ピクセルということです。ブラウザやスマホでは、このピクセル数と表示サイズによって見た目が決まります。
印刷との違い
印刷物では解像度をdpi（またはppi）で表し、物理的な印刷サイズと密接に関わります。一般に印刷では300dpi以上が推奨され、これが画質に直結します。一方でWebは画面上のピクセルが重要です。印刷で使うdpiの値は、Web表示の見た目にはほとんど影響しません。
dpiは気にしなくてよい？
Web用画像では、ファイルに設定されたdpi値を気にする必要はほとんどありません。実際に重要なのはピクセル数と、表示領域（例：ウェブページのコンテンツ幅）との関係です。必要以上に大きなピクセル数はファイルサイズを増やすので、適切なサイズにリサイズしましょう。
分かりやすい例
- サムネイル：幅300×高さ200px程度で十分
- ヘッダー画像：幅1,200〜1,920px程度（表示領域に合わせて）
簡単に言えば、Webでは「何ピクセルあるか」を基準にしてください。印刷は別の基準が必要です。
Web用画像の一般的な解像度とサイズの基準
解像度（dpi/ppi）の扱い
Web表示ではdpiやppiはほとんど気にしなくて大丈夫です。画面はピクセル単位で表示するため、実際に重要なのは画像のピクセル数（px）です。一般には72～96dpiが慣例ですが、表示品質には直接影響しません。
ピクセル数（px）を基準にする理由
CSSで指定した表示サイズに合わせて画像のピクセル数を用意すると、拡大・縮小による劣化や余分な容量を防げます。表示幅が800pxなら幅800px前後の画像を用意します。
よく使う画像サイズの目安
- サイトのメインビジュアル（フル幅）: 1920×1080px
- 記事内の横幅画像: 800〜1200px
- サムネイル: 150〜400px
- アバター・アイコン: 32〜128px
Retina（高解像度）対応
Retinaや高精細ディスプレイ向けは通常サイズの2倍のピクセルを用意します。表示はCSSで通常サイズを指定すれば、高精細でも鮮明に見えます。
作成の実務ポイント
- まず表示されるCSSサイズを確認する。2. そのピクセル幅に合わせ画像を作る。3. 高精細対応が必要なら2倍サイズを用意して、srcsetやpictureで切替える。
これらを基準に作れば表示品質とファイル容量のバランスがとれます。
画像容量とパフォーマンスのバランス
概要
画像の解像度を上げると容量も増え、ページ表示が遅くなります。表示速度はSEOや閲覧者の満足度に直結するため、容量の管理が重要です。目安として、1枚あたり200KB以下、1ページ合計で1.6MB以下を目標にしてください。
推奨のサイズと形式
- 幅の目安：1200〜1600px程度（画面横幅が大きい時の見栄えを確保）
- フォーマット：写真はJPEG、ロゴや透過はPNG、対応があればWebPを優先。WebPは高画質で容量が小さくおすすめです。
実践的な最適化方法
- 表示サイズに合わせてリサイズする（たとえばPC表示で1200px以上は不要なら縮小）。
- 画質を適切に下げる（写真は品質60〜80％で十分なことが多い）。
- WebPに変換して容量を落とす。対応しない環境用にJPEG/PNGも用意する。
- レスポンシブ画像（srcset/sizes）で端末ごとに最適な画像を出す。
- 遅延読み込み（lazy loading）で初回表示に不要な画像は後回しにする。
測定と運用のコツ
ページ速度はLighthouseやPageSpeed Insightsで確認してください。改善が必要な箇所は、まず大きな画像をリサイズ・変換して効果を見ます。CDNを使うと配信が速くなり、ユーザー体験が向上します。
具体例
- トップページのメインビジュアル：幅1400px、WebPで約150KBに抑える。
- サムネイル画像：幅400〜800px、JPEGで50〜100KBを目安にする。
これらを実行すると見た目を保ちながら表示速度を改善できます。
画素数と解像度の違い
画素数（ピクセル数）とは
画素数は画像の横×縦のピクセル数で、画像そのものの大きさを表します。例えば「1200×800px」の画像は横1200ピクセル、縦800ピクセルです。Web表示ではこの数値が最も重要で、表示サイズやトリミング、拡大時の粗さに直結します。
解像度（dpi/ppi）とは
解像度は1インチあたりのピクセル密度を表す値（dpiやppi）で、印刷物での細かさを示します。Webブラウザはピクセルそのものを使うため、dpiを変えても画像の見た目は変わりません。印刷したい場合は、希望するプリントサイズに合わせて必要なピクセル数を逆算します。
実務での使い分け（具体例）
- Web用: 表示領域が横800pxなら、横800px前後の画像を用意します。高密度画面（Retina等）向けに同じ見た目を保ちたいなら、横1600px（2倍）を用意すると見栄えが良くなります。
- 印刷用: 10cm四方（約3.94インチ）を300dpiで印刷したいなら、3.94×300≒1182pxが必要です。
実用的なポイント
- 画像編集ソフトでdpiを変えてもピクセル数を変更しなければ見た目は変わりません。dpiは主に印刷時の指標です。
- Webでは表示するピクセル数を優先し、必要以上に大きな画像を使わないでください。読み込み速度に影響します。
- 高密度ディスプレイ対応は2倍や3倍の画像を用意して、HTMLやCSSで適切に指定すると見栄えが良くなります。
この章では、まず画素数で表示サイズを決め、印刷が必要なときだけdpiを意識すると分かりやすい、という点を押さえてください。
高解像度画像の検索テクニック
概要
高解像度画像を確実に見つけるには、キーワードと検索先の両方を工夫します。単に”高解像度”と入れるより、具体的な数値やサイト指定が有効です。
基本の考え方
- Webでは「ピクセル数（幅×高さ）」が重要です。dpi/ppi表示は必ずしも信頼できません。\n- 大きなピクセル数を狙うと印刷や拡大に耐えます。
検索ワザ（具体例）
- サイト指定: site:unsplash.com 300dpi または site:pexels.com 高解像度
- 数値指定: “300dpi” や “200ppi” をキーワードに含める
- Google画像: 検索後「ツール」→「サイズ」→「大きい」を選択
- Yahoo画像: 詳細条件で「200ppi以上」など数値指定が可能です
- ファイル種別: filetype:jpg でJPEGだけに絞る
- 逆画像検索: 既存画像の高解像版を探す時に役立ちます（Google、TinEye）
画質の確認方法
- 画像をダウンロードしてプロパティで幅×高さを確認します。\n- メタデータにdpiがあれば参考にしますが、無い場合も多いです。
注意点
- ライセンスを必ず確認してください。商用利用では許可が必要なことがあります。\n- “dpi”表記だけに頼らず、ピクセル数を優先して判断してください。
まとめ：Web画像作成・運用のポイント
要点
Webでは印刷のようなdpiではなく、ピクセル（幅×高さ）が最も重要です。ブラウザはファイル内のdpiを無視するので、表示サイズに合わせたピクセル数で画像を用意してください。
表示幅に合わせて用意する
- CSSで表示する幅（例：横600px）に合わせて画像を作成します。
- 高解像度ディスプレイ向けは表示幅の2倍のピクセル（例：1200px）を用意すると見た目が鮮明になります。
容量と圧縮の目安
- ページ表示速度を考え、画像はできるだけ軽くします。目安は1画像あたり200KB以下です。
- 写真はJPEG/WebPで圧縮、透過が必要ならPNG（またはWebP）を使います。
運用のポイント（チェックリスト）
- 表示幅に合わせたピクセル数で保存
- Retina対応で1.5〜2倍を検討
- 画像圧縮で200KB前後を目指す
- 適切なファイル形式を選ぶ（写真=JPEG/WebP、図=PNG/SVG）
- 遅延読み込み（lazy loading）やCDNを活用して配信を高速化
これらを守ると、見た目とパフォーマンスを両立できます。
参考：画像最適化のFAQ
以下はWeb画像の運用でよくある質問と簡潔な回答です。実務で使いやすい目安を中心にまとめました。
Q. Web画像の解像度の目安は？
A. 72〜96dpiが一般的に紹介されますが、画面表示ではdpiよりピクセル数（幅×高さ）を優先してください。例：横幅フルスクリーンは約1920px、記事内の見出し画像は800〜1200px、サムネは400〜800pxが実用的です。dpiは主に印刷向けの指標です。
Q. ファイルサイズの目安は？
A. 1枚あたり200KB以下を目安にし、1ページ合計で1.6MB以下を推奨します。高画質が必要な場合はWebPなどの新しい形式や圧縮率調整、遅延読み込み（Lazy Loading）でバランスを取ってください。透過画像はPNGやWebPを使い、アニメーションは動画に置き換えると効率的です。
Q. 画素数と解像度の違いは？
A. 画素数は画像のピクセル総数（例：1920×1080）。解像度はピクセルの密度（dpi/ppi）を指します。Webではピクセル数が表示の実体なので優先して設定します。
Q. Retinaや高DPI対応はどうする？
A. 画面が高解像度の場合は1倍用と2倍用の画像を用意するか、srcsetやpictureで複数サイズを指定します。必要な箇所だけ対応すると容量増を抑えられます。
Q. 画像形式は何を選べばよい？
A. 写真はJPEGまたはWebP、ロゴや透過はPNGまたはWebP、アイコンや図形はSVGが向いています。WebPは画質と容量のバランスがよく、お勧めです。
具体的な画像があれば、最適なサイズや形式の提案もできます。お気軽にご相談ください。
