MENU

Main

Web

Port Folio

Contact

DigitalBloomStudio
Webデザイナー
Webデザイナーとしてのクリエイティブな表現力、プログラミングの論理的な思考を活かして、魅力的なWebサイトを作成しています。
Webのカリスマ | DigitalBloomStudio

Web制作における画像サイズ一覧表【保存版】

Web

～最適な画像サイズと画像形式を理解し、デザインを最適化しよう～

目次

画像サイズと推奨画像形式一覧表

Webサイト全体の基本画像サイズ

項目推奨サイズ（px）画像形式用途
トップ画像1920×1080 ～ 2560×1440JPEG, PNG, WebPサイトのメインビジュアル
メインコンテンツ画像1200×800JPEG, PNG, WebPヘッダー挿入画像
サムネイル画像500×500JPEG, PNG記事一覧やカードデザイン
背景画像（フルスクリーン）1920×1080 ～ 2560×1600JPEG, PNG, WebPページ全体の背景
ファビコン（Favicon）48×48SVGブラウザタブやブックマークのアイコン
ファビコン（Favicon）512×512PNGWordPressではデフォルトでSVGファイルのアップロードが制限される
プロフィール画像(正方形)1080×1080JPEG, PNGSNS＆一般的なプロフィール画像
アイキャッチ画像1280×720JPEG, PNGアイキャッチ画像
  • WordPressではデフォルトでSVGファイルのアップロードが制限されています。SVGがXMLベースのフォーマットであり、セキュリティリスク（XSS攻撃など）があるため
  • XMLを直接編集できるため、悪意のあるコードが埋め込まれるリスクがある
  • WordPressのアップデートやプラグインのバージョンによって動作が不安定になる可能性がある
  • SVGを使う方法と注意点
  • プラグインを使う(SVGを有効化するプラグイン（例: Safe SVG や SVG Support）をインストールすると、簡単にアップロードできるようになります。ただし、これらのプラグインはセキュリティ対策を講じているものの、100%安全とは言えません)
  • functions.php にコードを追加する（やや安全）(セキュリティリスクがあるため、信頼できるSVGファイルのみアップロードするようにしてください)

SNS用画像サイズ

プラットフォーム推奨サイズ（px）画像形式用途
YouTubeサムネイル1280×720JPEG, PNG動画のサムネイル
Twitter（X）ヘッダー1500×500JPEG, PNGプロフィールページのヘッダー
Twitter（X）投稿画像1600×900JPEG, PNG, WebP投稿時の最適サイズ
Facebookカバー画像820×312JPEG, PNGプロフィールのカバー写真
Facebook投稿画像1200×630JPEG, PNG, WebPフィード投稿サイズ
Instagram投稿1080×1080JPEG, PNGフィード投稿（正方形）
Instagramストーリー1080×1920JPEG, PNGストーリー投稿サイズ

ECサイト用画像サイズ

項目推奨サイズ（px）画像形式
用途
商品画像（メイン）1000×1000 ～ 2000×2000JPEG, PNGECサイトの商品ページ画像
商品画像（サムネイル） 500×500JPEG, PNG商品一覧ページの画像

Web広告用バナーサイズ

広告種類推奨サイズ（px）画像形式用途
Googleディスプレイ広告（横長）1200×628JPEG, PNG, WebP横長の広告バナー
Googleディスプレイ広告（正方形）250×250JPEG, PNG, WebP正方形の広告枠

画像形式の選び方

JPEG（.jpg / .jpeg）

  • サイズを小さくし、読み込み速度を優先したい場合に使用
  • 圧縮率が高く、ファイルサイズを抑えられるが、劣化が発生

PNG（.png）

  • 可逆圧縮で高品質、透明背景に対応
  • JPEGよりもファイルサイズが大きい
  • ロゴ、アイコン、透過背景を必要とする画像（例：ファビコン、ロゴ画像）
  • スクリーンショットやイラストなど、細部を保ちたい画像

WebP（.webp）

  • すべての画像（特にWebパフォーマンスを重視するサイト）
  • JPEGやPNGよりも高圧縮率で、品質を維持しながらファイルサイズを小さくできる
  • Googleが推奨するフォーマットだが、一部の古いブラウザで互換性がないため注意

画像サイズと形式の選定ポイント

  • レスポンシブデザインを考慮
  • 画像圧縮を活用
  • 縦横比を統一
  • 画像形式は用途に合わせて選択
Web
目次