ホームページに載せる画像の適切なサイズは？

デジカメで撮った写真は、印刷を想定して非常に高画質に作られています。しかし、ウェブサイトに使うには、この高画質が逆に問題となります。

• ページの読み込みが遅くなる

画像のデータ量が大きいと、読み込みに時間がかかり、訪問者を待たせてしまいます。これは、ページを閉じられてしまう大きな原因の一つです。

 

• スマートフォンでの通信量が増える

携帯電話からホームページを見ている場合、大きな画像を読み込むたびに通信量が増加します。これは、訪問者の通信料金に負担をかけることになります。

 

• サーバーに負担がかかる

画像をたくさんアップロードすると、ホームページを置いているサーバーの容量を圧迫します。また、サーバーの動作が重くなり、他のページにも影響を与えることがあります。

これらの問題を避けるために、ウェブサイトに使う画像は、適切なサイズに調整することが大切です。

また、画像サイズについて考えるとき、下記の用語を知っておくと便利です。

ピクセル（px）：画像を構成する小さな点のことで、ウェブサイト上での画像サイズを表す単位です。

解像度：画像の縦と横にピクセルがどれだけ並んでいるかを示します。例えば「1920px × 1080px」のように表現します。

画素数：画像の総ピクセル数のことです。例えば、解像度が「1920px × 1080px」の場合、画素数は「1920 × 1080 = 2,073,600」となり、約207万画素です。一般的なデジカメは数百万画素から数千万画素もあり、非常に高い解像度で撮影されています。

ファイルサイズ：データの大きさを示します。画像の使用する色数や保存形式などの情報を含むので、ピクセル数だけでは割り出せません。ウェブサイトで使用する画像が30〜500KB（キロバイト）程度に対し、デジカメで撮った写真は「2MB（メガバイト）」や「5MB」と大きさになります。（100KB＝0.1MB）

画像幅の目安

ウェブサイトに画像を載せる場合、PC向けの横幅いっぱい（フルスクリーン）のキービジュアルなら1600〜1920px程度で、ファイルサイズの目安は200〜500KBくらいです。テキストともに挿絵として使用するものなら表示幅が200〜400px程度で良いでしょう。実際のサイズ感は以下の画像でご確認ください。

スマートフォンでご覧の場合、一般的なスマートフォンの横幅（360～390pxが主流）を超える以下の画像は、画面幅に合わせて縮小されます。

リサイズのヒント

ペイントを使う

Windowsに標準で入っている「ペイント」というソフトを使えば、簡単に画像のサイズを小さくできます。

1. ペイントで画像を開く

サイズを調整したい画像を右クリックし、「プログラムから開く」→「ペイント」を選択します。

 2. 「サイズ変更」をクリック

ペイントの画面上部にある「サイズ変更」ボタンをクリックします。

 3. サイズを指定する

「ピクセル」を選び、横幅に表示したいサイズ（例：300）を入力します。縦幅は自動で調整されます。

「OK」をクリックすると、画像が小さくなります。

 4. 保存する

「名前を付けて保存」を選び、別の名前を付けて保存しましょう。元の画像を上書きしないように注意してください。

オンラインツールを使う

ウェブサイト上で画像を簡単に編集できる便利なサービスが多数あります。ソフトウェアをインストールする必要もなく、ブラウザ上で操作が完結するため、手軽に利用できるのが大きなメリットです。

1. iLoveIMG（アイ・ラブ・アイエムジー）

シンプルで分かりやすい操作画面で、世界中で多くのユーザーに利用されている実績もあります。

 2. Adobe Express（アドビ・エクスプレス）

有名な画像編集ソフト「Photoshop」などを提供しているAdobe社が提供する無料ツールです。

｜よくあるご質問TOPにもどる｜