ハンディのちから アフィリエイトホームページ画像のサイズでは、ホームページ画像のサイズと形式と解像度・ホームページのページウインドウサイズ・ホームページ画像用にサイズダウンできる3つのソフトウェアをご案内
ハンディのちからパソコン>ホームページ画像のサイズ

ホームページ画像のサイズ

ハンディのちから」の「ホームページ画像のサイズ」では、ホームページ画像のサイズと形式と解像度・ホームページのページウインドウサイズ・サイズダウンできる3つのソフトウェアをご案内しています。

ホームページ用画像の注意点

サイズダウン1ホームページで画像を使用するときに注意するべきことは、画像のサイズと形式と解像度です。

右の写真はデジタルカメラで撮影したものです。この写真の元の画像のサイズは2.02MB(100KBの約21倍)です。
また、解像度は3264×2448ピクセルです。この解像度では一番大きな24型ディスプレイ(フルハイビジョン 1920×1080ドット)のデスクトップパソコンで 見ても、画像全体の1/4しか見ることができないほど大きな画像なのです。

画像のサイズ

デジタルカメラの初期設定で撮影した画像をそのまま、ホームページで使うことはできません。
その理由は2つあります。1つ目は大きすぎて訪問者のディスプレイに表示できない、2つ目はファイルサイズが大きいために読み込みに時間がかかったり、ブログの場合は500KB以下などの制限があることです。
撮影した画像データは小さくすることはできても、大きくすることはできません。一般的に印刷をしたりする可能性があるので、大きめのサイズで撮影をしておき、ホームページにアップロードする画像はパソコンで複製したものを640×480ピクセル〜320×240ピクセル程度に軽くして使います。
しかし、ホームページ専用としてデジタルカメラを使用するのであれば、撮影サイズを640×480ピクセル程度に設定して撮影すればパソコンでサイズ変更をする手間を省けます。また最近の携帯電話はQVGA(320×240ピクセル)が標準サイズとなっていますので、歪み等が気にならない被写体であればこれを使うのも一つの方法です。

画像の形式

インターネット上でよく利用される画像形式には、GIF(ジフ)・PNG(ピング)・JPEG(ジェイペグ)の3種類があります。よく利用される画像形式には、「GIF/PNG形式」と「JPEG形式」の2種類が存在することになります。

画像の解像度

解像度とは、画像を構成するピクセルの密度のことです。「密度=解像度」が高いほど詳細で精密になり、低いほど粗い画像になります。ホームページで使用する画像の解像度は72dpi~96dpiが一般的です。解像度を表す単位はdpi(dot per inch)といい、1インチあたりのドット数を表します。つまり72dpiといえば、1インチに72個の点が存在するということになります。

ホームページのページウインドウサイズ

ホームページ訪問者のディスプレイの解像度の実態調査のデータでは、XGA(1024×768ピクセル)が約6割、SXGA(1280×1024ピクセル)が約2割、1280×768と1280×800ピクセルが約1割と言われています。

また管理人が使用しているホームページ作成ソフトウエアDreamWeaverのページウインドウサイズの初期設定値は640×480ピクセル、最大のページウインドウサイズは1024×768ピクセルとなっています。

ホームページの横幅の設定はホームページ訪問者のディスプレイの解像度を踏まえながら決定します。
例えば1024ピクセルで作成したホームページを、800ピクセルのモニタサイズで見たときには横スクロールが出てきてしまい、ユーザーにとっては操作性の悪いホームページになってしまいます。逆に800pxで作ったホームページを大きいモニタサイズで見たときには余白が多くなってしまい小規模なイメージを与えます。
しかし、9割以上の訪問者が横幅1024ピクセル以上のディスプレイで見ている実態を考えれば、横幅1024ピクセル以上のページウインドウサイズで作成してもよいのではないでしょうか。

横幅1024ピクセル以上のウインドウサイズのページに掲載する画像のサイズは、640×480ピクセル〜320×240ピクセル程度が適切でしょう。

画像サイズを小さくする方法

そこで、上述のサイズが2.02MB、解像度は3264×2448ピクセルの画像を、ホームページで使えるサイズが100KB程度、解像度は320×240ピクセル程度の画像にサイズダウンできる3つのソフトウェアがあります。

  1. 優れた画像の編集・加工ができるアドビのPhotoShop
  2. 画像の編集・加工ができるアドビのPhotoShop Elements
  3. 必要最小限の編集・加工ができるWindowsに付属のペイント

最終更新日:2012年01月15日

トップに戻る

パソコンの購入と操作ナビ
やさしいパソコン購入ナビ
やさしいパソコン操作ナビ
パソコンに対する不安こと
パソコン購入
パソコンのセットアップ
インターネット回線とプロバイダー
Windows OS セットアップ
パソコン初心者のインターネット設定
Mac&Windows家庭LAN
Excelで行の高さをコピーする方法
ホームページ画像のサイズ
ペイントによる画像のサイズダウン
とことんサポートPC・LS200/FS
ノートPCNEC2011年秋冬モデルLS200/FS


デスクトップパソコン
ノートパソコン
マックパソコン
デスクトップパソコン選び
ノートパソコン選び
デスクトップパソコン比較
ノートパソコン比較
マックパソコン比較