Web制作で押さえるべき画像サイズの基本と最適化テクニック

はじめに

本記事の目的

本記事はWeb制作で使う画像サイズの最適化について、基本から実践までわかりやすく解説します。ページ表示速度、SEO、ユーザー体験に直結するため、適切なサイズ選びは重要です。

なぜ画像サイズが重要か

画像が大きすぎると表示が遅くなり、訪問者が離脱します。逆に小さすぎると画質が悪く見栄えが損なわれます。さらに、検索エンジンは表示速度を評価指標にしているため、画像はSEOにも影響します。

本シリーズの構成

第2章から第7章で、基本知識、デバイス別の推奨サイズ、ファイルサイズの目安と圧縮方法、形式と解像度、SEO対策、実務で使える具体例を順に説明します。最後に注意点を挙げて締めくくります。

読者の想定

Web制作初心者から中級者、サイト運営者やコンテンツ制作者向けです。実務で実践しやすいポイントを中心に紹介します。

Web制作における画像サイズの基本と重要性

画像サイズとは

画像サイズは主に「ピクセル（幅×高さ）」と「ファイルサイズ（KB／MB）」の二つで表します。ピクセルは表示の大きさ、ファイルサイズは読み込みにかかる時間に直結します。両方を意識することが大切です。

画像サイズが重要な理由

• 読み込み速度：ファイルサイズが大きいとページ表示が遅くなり、ユーザーが離脱しやすくなります。
• 見た目の品質：ピクセル数が足りないと画像がぼやけ、信頼感が下がります。
• SEO（検索順位）：表示速度は検索エンジンの評価に影響します。

大きすぎ・小さすぎの問題点

大きすぎると帯域を無駄に消費し表示が遅くなります。小さすぎると拡大表示で粗くなり見栄えが悪くなります。用途ごとに適切なサイズを選ぶ必要があります。

基本の守るべきポイント

• 用途に合わせたピクセル数を用意する（例：サムネは200〜400px、ヒーロー画像は1200〜2000px）。
• 複数サイズを用意して端末に合わせて出す（srcset／pictureなどを活用）。
• 圧縮でファイルサイズを下げるが、画質も確認する。
• 遅延読み込み（Lazy Load）を取り入れ、初期表示を軽くする。

実務の簡単な例

商品ページではサムネ用と拡大表示用の二種類を用意します。サムネは小さく軽く、詳細は高解像度で用意して切り替えます。これだけで表示速度と見た目の両方を改善できます。

デバイス別の推奨画像サイズ

はじめに

デバイスごとに最適な横幅を用意すると表示がきれいで読み込みも速くなります。ここでは実務でよく使う目安を具体例で示します。

PC（デスクトップ）向け

• メインビジュアル／スライダー：横幅1440px〜1920pxを推奨。高さはデザインに合わせて調整します。例：1920×600px。
• 大きな背景やフルスクリーンバナー：1920×1080pxが標準的です。高解像度ディスプレイでも崩れにくいです。

スマートフォン向け

• 表示幅の目安：375px〜414px（一般的な端末幅）。
• 高解像度（Retina等）は表示サイズの2倍で用意：例）表示幅375pxなら画像は750px。CSSで縮小表示することで鮮明に見えます。

タブレット向け

• 横幅の目安：768px〜1280px。縦横の比率はデザインに合わせて調整してください。

高解像度対応と実務ポイント

• 同じ画像を複数サイズで用意してsrcsetやmediaクエリで配信すると無駄な通信を減らせます。
• 高さはコンテンツに合わせてトリミングやフォーカスポイントを設定してください。
• まずは上記目安を基準にし、必要に応じて微調整して運用してください。

画像のファイルサイズと圧縮目安

基本目安

Web向けの1枚あたりの目標は100KB～200KB以下です。サムネイルやアイコンは50KB以下を目安にします。ページ表示速度を意識して、まずはこのレンジを狙いましょう。

圧縮の考え方と手順

1. 画像の表示サイズ（ピクセル）を適切に縮小する。大きすぎると圧縮前に無駄が出ます。
2. 画質と容量のバランスを確認しながら圧縮する。まずは軽めに圧縮して見た目をチェックします。

圧縮率の目安

画質と軽さのバランスは、一般に20〜30%の圧縮を目安にします。画質重視なら低め（20%前後）、容量最優先ならやや高め（30%前後）を試してください。最終的には目視での確認を優先します。

おすすめツール

• 複数画像を一括処理したいとき：iloveIMG（使いやすく一括処理が可能）
• 画質重視の圧縮：TinyPNG、Optimizilla（見た目を残しつつ軽くできます）

圧縮後のチェックポイント

• 主要ブラウザで表示崩れやブロックノイズがないか確認する。
• 重要な部分（文字や顔）が潰れていないかを拡大して確かめる。
• ファイルサイズが目標レンジに入っているか確認する。

実務的なコツ

まずはサイズ調整→形式選択→圧縮の順で作業してください。複数パターンを作って見比べると、最適な設定が見つかります。

画像形式と解像度の最適化

概要

画像形式は用途で選びます。写真や複雑な色調はJPEG、透過や文字・ロゴはPNGが向きます。最近はWebP対応が広がり、軽く保存できるため候補に入れてください。

形式ごとの使い分け（具体例）

• JPEG：写真や背景画像。ファイルが軽く扱いやすいです。品質は80％前後で試してください。
• PNG：ロゴやアイコン、透過が必要な画像。色数が少ないイラストにも適します。
• WebP：写真もイラストも対応可能で、同じ見た目ならファイルが小さくなります。対応しないブラウザへはフォールバックを用意します。
• SVG：ロゴやアイコンを拡大縮小する場合に最適です（ベクター形式）。

解像度の考え方

Webではdpiよりも表示ピクセルが重要です。通常は表示サイズ（例：横800px）で用意します。高解像度ディスプレイ用に2倍サイズ（横1600px）を用意し、ブラウザで縮小表示するとシャープに見えます。

実装のポイント

• srcsetやpicture要素で複数サイズを指定し、ブラウザに最適な画像を選ばせます。
• 透過が不要ならPNGよりWebPやJPEGで軽量化を図ります。
• SVGはコードとして管理できるので、色やサイズの調整が楽です。

実際に試しながら、画質とファイルサイズのバランスを調整してください。

SEOとユーザー体験を高めるための画像最適化ポイント

1) なぜ画像最適化が必要か

画像はページ速度と検索順位、訪問者の印象に直結します。適切に最適化すると読み込みが速くなり、滞在時間やコンバージョンが向上します。

2) ファイル名とaltの書き方（実例）

・ファイル名は日本語より英数字で説明的に。例: bike-city-park.jpg
・altは短く具体的に。例: 「公園で走る青い自転車」。これで画像検索の評価が上がります。

3) サイズと比率の調整

デザインに合わせて表示サイズを決め、不要に大きな画像は使わないでください。Google画像検索を意識するなら最大幅1200px・解像度72dpi・100KB以内を目安にします。レスポンシブにはsrcsetを使い、画面ごとに最適な画像を配信します。

4) ファイルサイズ削減のコツ

・WebPやAVIFなどの次世代フォーマットを検討してください。JPEG/PNGは品質を下げすぎない範囲で圧縮します。ツールはTinyPNGやSquooshが便利です。

5) ユーザー体験向上の実装

・遅延読み込み（lazy loading）で初期表示を速くします。・低解像度のプレースホルダでレイアウト崩れを防ぎます。・適切なキャッシュ設定で再訪問を速くします。

6) 実践チェックリスト

• ファイル名とaltにキーワードを含めたか
• 画像が表示サイズに合っているか
• 100KB未満・1200px以下を目安にしたか
• 遅延読み込みとキャッシュを設定したか

実務に役立つ画像サイズ選定の具体例

以下は現場ですぐ使える具体例と注意点です。

PCのメインビジュアル（ヘッダー・ヒーロー）

• 推奨横幅：1920px（高画質・大画面対応）
• 高さはデザインに合わせて調整します。フルスクリーン背景なら縦1200px程度を目安にします。
• 保存：JPEGやWebPで画質を保ちながら圧縮。目安ファイルサイズは200〜400KB程度です。

スマホ用バナー

• 用意する画像：横幅750pxを2倍サイズで作成（表示上は375px）
• 理由：多くのスマホが2倍（Retina）画素密度のため、表示がシャープになります。
• 配置：srcsetで1x/2xを指定し、端末に応じて切替えます。

サムネイル・アイコン

• 推奨サイズ：150px〜300px
• 用途別例：プロフィールは150px、一覧のサムネイルは200〜300px
• PNGやWebPで輪郭を保ちつつ軽量化します。

ブログ記事内画像

• 推奨横幅：800px〜1200px（多くの画面で美しく表示）
• 画面幅に応じて800pxでも十分な場合が多いので、コンテンツに合わせて選びます。

実務でのチェックリスト

• 必要な解像度を想定して元画像を作る
• 2x画像を用意し、srcset/sizesで指定する
• 適切に圧縮して読み込みを速くする
• ファイル名・altを整理して管理する
• 実機で表示を確認して微調整する

これらを基準にすれば、多くの案件で見栄えとパフォーマンスの両立がしやすくなります。

まとめと注意点

ここまでのポイントを簡潔に振り返り、実務で気を付ける点をわかりやすくまとめます。

主要ポイント

• 用途とデバイスに応じて画像サイズを決めます。背景やアイコン、サムネイルで必要な大きさは異なります。
• 表示速度と画質のバランスを優先します。大きすぎる画像は遅延の原因、小さすぎるとぼやけます。
• 画像形式（JPEG/PNG/WebPなど）と解像度を適切に選び、必要に応じて圧縮します。
• alt属性やファイル名を設定して、SEOとアクセシビリティに配慮します。

実務でのチェックリスト

• 元ファイルは高解像度で保管し、配信用にリサイズして保存します。
• レスポンシブ画像（srcset）や遅延読み込みを活用して表示負荷を減らします。
• 圧縮後は見た目を必ず確認し、文字や細部が潰れていないかチェックします。
• テストは複数デバイスと低速回線で行い、読み込み時間と見栄えを確認します。

注意点

• 過度な圧縮で画質を損なわないようにします。文字やロゴは特に注意が必要です。
• 色や透明部分の扱いで形式を選んでください（例：透過が必要ならPNGなど）。
• 常にユーザー視点で判断し、目的に合う画像を用意してください。

適切なサイズと最適化を心がけると、表示速度も使いやすさも向上します。実務では小さな確認を積み重ねることが重要です。