Webサイトの画像サイズ：完全一覧表
Webサイトの画像サイズガイド
Webサイトの画像サイズ：ヒーロー、ブログ、商品、ロゴ、OG | We.Inc
Webサイトのあらゆる画像枠について、ピクセルサイズ、アスペクト比、ファイルサイズの目安を1つの表にまとめました。レイアウト幅をsrcset用のサイズに変換する計算ツールも用意しています。
各画像は表示される最大の幅に合わせ、高解像度の画面向けにその幅を2倍にします。全幅のヒーロー画像は2560×1440、ブログ本文の画像は幅1600、Shopifyの正方形の商品写真は2048×2048、SNSの共有画像は1200×630が目安です。写真のファイルサイズはおおむね200 KB以下に抑えましょう。
よく使う画像枠のサイズ早見表
- ロゴ
- SVG、または表示サイズの2倍のPNG
- ロゴに合わせる
ヒーロー画像やブログ画像に公式の標準サイズはありません。あるのは単純な計算です。画像枠の幅が何CSSピクセルか、それにくっきり見せたい画面の密度を掛けるだけです。下の表はこのルールをよく使うすべての画像枠に当てはめたもので、商品画像のShopifyや共有画像のFacebookのように、プラットフォームが独自の数値を公開している場合はその数値を使っています。
- 表から画像枠を探すか、ブラウザーの検証ツールで、レイアウト上での表示幅を測ります。
- そのCSS幅を計算ツールに入力し、対応したい画面密度を選びます。
- 表示された幅で書き出し、それぞれを圧縮してから、生成されたsrcsetをimgタグに貼り付けます。
- アップロード前に、ファイルサイズが目安の列に収まっているか確認します。
- 表示幅の2倍で書き出しましょう。3倍にすると、写真では違いがわかる人がほとんどいないのに容量だけが増えます。
- アップロード前にアスペクト比に合わせてトリミングし、レイアウト側で画像を引き伸ばしたり余白を付けたりせずに済むようにしましょう。
- すべてのimgにwidthとheightの属性を付け、ファイルが届く前にブラウザーが領域を確保できるようにしましょう。
- ロゴやアイコンにはSVGを優先しましょう。ベクターファイルなら小さなダウンロード1回で、どのサイズでもくっきり表示されます。
- SNSアプリはレイアウトとは別に共有画像を取得するため、幅の狭いサイトでも共有画像は1200×630のままにしておきましょう。
よくある質問
ヒーロー画像はどのサイズにすべきですか？
ブラウザーの全幅に広がるヒーロー画像なら、大きな画面向けに2560×1440で書き出し、スマートフォンやノートパソコンのダウンロード量を減らすために、幅1280と1920の版をsrcsetに追加します。ヒーロー画像が1200ピクセルのコンテナ内に収まる場合は、幅2400で十分です。
Shopifyの商品画像のサイズは？
Shopifyのヘルプセンターによると、正方形の商品画像は通常2048×2048ピクセルで最もきれいに表示されます。アップロードできるのは最大5000×5000ピクセルで、20 MB未満でなければなりません。コレクションのグリッドがそろうよう、すべての商品写真を同じ比率にしましょう。
Open Graphの共有画像のサイズは？
Facebookの共有に関するドキュメントでは、1200×630ピクセル以上、比率1.91対1、ファイルサイズ8 MB未満が推奨されています。600×315まで小さくしても機能しますが、縮小されたサイズで表示されます。
ピクセル数だけでなく、ファイルサイズはどれくらいにすべきですか？
ピクセルサイズとファイルサイズは別物です。幅1600の写真をWebPやよく圧縮したJPEGで保存すると、通常は80〜200 KBに収まります。これを大きく超える場合は、寸法を縮める前に品質設定を下げるか、形式を変えましょう。
モバイル用に別の画像が必要ですか？
通常は別のトリミングは不要で、同じファイルの小さいコピーをsrcsetに並べるだけです。横長のバナーの縦長版のように、スマートフォンで別のトリミングが必要な場合にだけpicture要素を使いましょう。
すべての数値の背後にある1つのルール
- ブラウザーはCSSピクセルでページをレイアウトします。スマートフォンやRetinaのノートパソコンは、その1ピクセルに2〜3個のデバイスピクセルを詰め込んでいるため、CSS幅ちょうどで書き出した画像はぼやけて見えます。幅を2倍にすれば、ほぼすべての人に対してこの問題を解決できます。
- 写真の場合、2倍を超えても見合う効果はほとんどありません。ファイルの容量がさらに約2倍になるうえ、通常の距離で見る限り細部の違いにはほとんど気付きません。
正確なピクセル数よりアスペクト比が重要
- ほとんどのレイアウトは画像を列の幅に合わせて拡大縮小するため、ページ上での収まり方は比率で決まります。画像枠ごとに比率を1つ決めてすべての画像をそれに合わせてトリミングすれば、幅がどうであってもグリッドは整ったままです。
- よく使われるのは、ヒーロー画像と記事画像に16:9、商品とアバターに1:1、縦長のカードに4:5、共有画像に1.91:1です。
容量の目安がページを速く保つ
- ファーストビューにある最大の画像は、多くの場合Largest Contentful Paintを左右する要素です。重いヒーロー画像は他のどのファイルよりもページを遅くするため、最も丁寧に扱う価値があります。
- 画像枠ごとに容量の目安を決めて守りましょう。良い画質のまま目安に収まらない写真は、解像度を下げる前にWebPやAVIFを試しましょう。
すべての画像枠のサイズ
画像枠の幅は一般的なデスクトップのレイアウトを想定しています。お使いのテーマが異なる場合は実際に測り、2倍のルールを当てはめてください。
画像枠ごとの書き出しサイズ、比率、ファイル容量の目安
- 画像枠
- CSS幅
- 書き出すピクセル数
- 比率
- 容量の目安
- 注記
- 全幅のヒーロー
- 100vw（最大1280+）
- 250 KB
- 幅1280と1920のコピーをsrcsetに追加
- 帯状のバナー
- 150 KB
- スマートフォンでは両端が切れるので、外側に文字を置かない
- ブログのアイキャッチ画像
- 800〜1200
- 1600×900から2400×1350
- 150 KB
- テーマのコンテンツ幅に合わせる
- ブログ本文の画像
- 720〜800
- 16:9または3:2
- 150 KB
- 本文の列はヒーローより狭い
- 商品写真
- グリッドのカード
- 200 KB
- Shopifyが推奨する正方形のサイズ
- コレクションやカテゴリーのカード
- 800×800または800×1000
- 1:1または4:5
- 80 KB
- グリッド全体で比率を1つに統一
- チームやアバターの写真
- 40 KB
- 円形で表示されることが多いので顔を中央に
- ヘッダーのロゴ
- 約160
- SVG、または幅320のPNG
- ロゴ本来の比率
- 20 KB
- SVGはどのサイズでもくっきり
- 背景テクスチャー
- 150 KB
- 文字の背景なら画質は低めで問題なし
- 共有画像（og:image）
- ページには表示されない
- 8 MB未満（できるだけ小さく）
- Facebookの推奨サイズ
- ファビコン
- 16〜32
- SVGと32×32のICOまたはPNG
- 5 KB
- すべてのサイズはファビコンガイドを参照
レスポンシブなヒーロー画像のマークアップ
3つの幅を持つ全幅のヒーロー
ブラウザーは、画面の密度でビューポートを覆える最も小さいファイルを選びます。widthとheightで比率を指定しているため、読み込み中にレイアウトがずれません。
画像サイズ計算ツール
レイアウト上で画像が占める幅をCSSピクセルで入力し、対応する画面密度を選んでください。書き出すべきピクセル幅を一覧にし、対応するsrcsetを作成します。
画像枠の幅（CSSピクセル）
アスペクト比
ファイル名の語幹
画面密度
HTMLをコピー
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る