Webサイトを作っていると、画像をどれくらいの大きさで用意すればいいのか迷うことがあると思います。
私も最初の頃は、「とりあえず大きめで作っておけば安心かな」と考えて、必要以上に大きい画像をそのまま使ってしまうことがありました。
でも実際は、画像は大きければいいわけではありません。
大きすぎる画像はページを重くしやすく、スマホでの読み込み速度にも影響します。反対に、小さすぎるとぼやけて見えてしまい、せっかく作ったサイトの見た目がもったいなくなります。
だからこそ大事なのは、用途に合ったちょうどいいサイズで画像を使うことです。
この記事では、Webサイトでよく使われる画像サイズの目安を、初心者の方にもわかりやすく整理して紹介します。
Webサイトでよく使われる画像サイズの目安
ここでは、よくある使用場面ごとに画像サイズの目安を紹介します。
アイキャッチ画像の目安
ブログ記事のアイキャッチ画像には、横幅1200〜1600pxくらいが使いやすいサイズです。
SNSでシェアされたときの見え方も意識するなら、1200×630pxは特に安定しやすいサイズです。
もう少し高解像度で見せたい場合は、1600×900pxや1920×1080pxでも問題ありません。
ただし、大きくするほど容量も増えやすいので、アップロード前の圧縮は意識しておきたいところです。
記事内で使う画像の目安
本文中に入れる画像は、横幅800〜1000px程度あれば十分使いやすいことが多いです。
このくらいあれば、Retinaディスプレイでも比較的きれいに見えやすく、サイズと画質のバランスも取りやすいです。
縦横比は内容に合わせて自由で大丈夫ですが、同じ記事の中でバラバラだと少し雑多に見えやすいので、できればある程度揃えておくと整って見えます。
カード型一覧やサムネイル画像の目安
記事一覧や実績一覧などのカード型レイアウトでは、そこまで大きな画像は必要ありません。
目安としては、横幅400〜600px程度がちょうどいいことが多いです。
たとえば、
- 正方形なら 400×400px
- 横長なら 600×400px
このあたりはよく使われるサイズです。
一覧で並ぶ画像は、1枚ずつの迫力よりも、全体の統一感のほうが大事なので、比率を揃える意識がかなり重要です。
背景画像・ヒーローヘッダーの目安
画面いっぱいに広がる背景画像やヒーローヘッダーでは、横幅1920px前後が一般的です。
たとえば 1920×1080px や 1920×1200px のような、フルHD相当のサイズが使いやすいです。
この部分は表示領域が大きいぶん、画像の粗さが目立ちやすい一方で、重くなりやすい場所でもあります。
そのため、ただ大きい画像を載せるのではなく、画質を保ちながら圧縮することがポイントになります。
ポートフォリオやギャラリー画像の目安
制作実績や写真ギャラリーのように、複数画像を整列して見せる場合は、サイズそのものよりも比率を揃えることが重要です。
たとえば、
- 縦長なら 600×900px
- 正方形なら 1200×1200px
のようにルールを決めておくと、並べたときにきれいに見えます。
ポートフォリオは「1枚の完成度」だけでなく「一覧で見たときの印象」も大事なので、サイズ設計が見た目にかなり影響します。
画像サイズはどこまで大きくしていい？
横幅は最大2500pxくらいまでが無難
「大きめに作っておいたほうが安心」と思うこともありますが、Web用画像なら横幅は最大でも2500pxくらいまでに抑えるのが無難です。
もちろん用途によって例外はありますが、通常のブログや企業サイトでそれ以上必要になることは多くありません。
それ以上大きくしても、表示上のメリットより、容量が重くなるデメリットのほうが大きくなりやすいです。
容量は1MB以下、できれば300KB前後を意識したい
画像で見落としやすいのが、ピクセルサイズだけでなくファイル容量です。
見た目のサイズが同じでも、保存形式や圧縮状態によって重さはかなり変わります。
目安としては、1枚あたり1MB以下、できれば300KB前後まで抑えられるとかなり扱いやすいです。
特に記事内で複数枚使う場合は、この差がそのままページの軽さにつながります。
画像サイズを決めるときに意識したいポイント
表示サイズより必要以上に大きくしない
たとえば、実際には横幅600pxでしか表示されない場所に、3000pxの画像を入れても無駄が大きくなります。
このようなケースは、初心者の頃ほど起こりやすいです。
まずは「その画像がサイト上でどれくらいの幅で表示されるか」を見て、それに合わせてサイズを考えるのが基本です。
画像の比率を揃えるとサイト全体が整って見える
一覧表示やギャラリーでは、サイズ以上に縦横比の統一が大切です。
画像ごとに形がバラバラだと、余白や高さが揃わず、デザイン全体が落ち着かなく見えます。
そのため、画像を用意するときは「正方形で揃える」「16:9で揃える」など、先にルールを決めておくと作業もしやすくなります。
Retina表示を考えて少し余裕を持たせる
最近のスマホやMacでは高精細なディスプレイが多いため、表示サイズぴったりだと少し甘く見えることがあります。
そのため、記事内画像などは実際の表示幅より少し余裕を持たせて、800〜1000px程度で用意しておくと安心しやすいです。
まとめ
Webサイトに使う画像サイズには絶対の正解があるわけではありませんが、用途ごとの目安を知っておくと判断しやすくなります。
アイキャッチなら1200〜1600px、記事内画像なら800〜1000px、背景画像なら1920px前後というように、まずはよく使う基準を持っておくと作業がかなり楽になります。
大切なのは、ただ大きい画像を使うことではなく、見た目・表示速度・使う場所のバランスを考えることです。
画像サイズで迷ったときは、「どこで、どれくらいの大きさで表示されるのか」を先に考えるようにすると、無駄のない画像選びがしやすくなります。
