本文の開始

無料ホームページ作成入門のy-laboホームページの画像

無料ホームページ作成情報。無料でWeb/HP製作。ホームページ入門から、
HTML・CSS・SEO対策・フリーソフトから無料テンプレートまで。

格安ホームページ制作激安HPWeb製作のy-labo.net(わいらぼ、ワイラボ)

  • ホームページ制作費を安く・格安・激安!
  • ホームページ制作を早く!
  • でもかっこいいホームページにカスタマイズ
  • SEO対策でアクセスアップ
  • ホームページ制作後も安心サポート
  • 自分でもホームページを修正したい

1-5)ホームページの画像 ホームページ作成入門

無料ホームページ作成情報 トップ > ホームページ作成入門 > 1-5)ホームページの画像

 

ご自分でホームページを作成・修正される方のために、ホームページ作成のためのコンテンツをご用意しました。すべて無料のコンテンツですのでお役立てください。なお、こちらのコンテンツに関してはサポートを行っていません。ご質問のメールなどはご遠慮いただければと思います。

ホームページの画像について

ホームページで使用する画像にはいくつかの種類があります。目的に合わせて使い分ける必要があります。ここでは、ホームページ作成でよく使用される画像形式を確認します。

ホームページ上で使用する画像は、画質も重要ですが何よりファイルサイズが重要です。画像データは文字データと比べてもファイルサイズが大きいので、通信環境によって画像が表示されるのに時間が掛かるからです。ただ、最近はADSLなどのブロードバンド環境が整ってきたので、「アルバム」やイメージ重視のトップページなどであれば、500KB程度、場合によっては1MB(1000KB)程度までファイルサイズが大きくても大丈夫かもしれません。

ファイルサイズの圧縮や画像の編集には、「画像編集ソフト(グラフィックソフト)」が必要になります。
なお、サンプルのためにあえて大きなサイズの画像データを使用していますので、インターネット通信環境によっては表示されなかったり、表示に時間がかかることがあると思います。

bmp(ビットマップ)

Windowsの標準非圧縮形式の画像ファイル。
非圧縮なので、フルカラー(32bit:1677万色)で表示できますが、ファイルサイズが大きくなるのでインターネットには向いていません。ブラウザによっては表示されることもありますが、ホームページにBMP形式を使用することは避ける必要があります。

bmp(ビットマップ)見本
(ファイルサイズ:255KB)

このページのTOPへ

jpg/jpeg(ジェイペグ)

インターネットで標準的に使用される画像ファイルの1つ。インターネット以外でもよく使用されます。

特に写真を圧縮するときに使用します。

圧縮され、フルカラー(32bit:1677万色)で表示できます。

隣り合う点同士を混ぜてファイルサイズを小さくします。圧縮率というものがあり、画質とファイルサイズのバランスをとることができます。

圧縮率は、「1」(ファイルサイズ小、画質悪い)〜「100」(ファイルサイズ大、画質良い)の間で設定します。一般的にホームページ用の画像であれば、「70」〜「85」程度で圧縮されることが多いです。

圧縮率が高ければ、BMPのような非圧縮形式と比べても見劣りしません。

jpg/jpeg(ジェイペグ)見本
(ファイルサイズ:16KB)

隣り合う点同士を混ぜて圧縮するため、イラストやロゴなどを圧縮すると隣り合う点同士がにじんで見えることがあるので、イラストやロゴなどはgifを使用するほうがよいでしょう。

jpg/jpeg(ジェイペグ)見本
(ファイルサイズ:2KB)

このページのTOPへ

gif(ジフ)

インターネットで標準的に使用される画像ファイルの1つ。インターネット以外でもよく使用されます。

特にイラストや写真を圧縮するときに使用します。

圧縮され、256色で表示されます。

その為、写真などグラデーション(なだらかに色が変化する状態)がある画像の場合は、ファイルサイズが大きくなり、画質の劣化が目立ちますので、写真を圧縮するためには向いていません。

gif(ジフ)見本
(ファイルサイズ:23KB)

256色で表示できるイラストやロゴであれば、非圧縮形式と同じ品質で表示されます。
圧縮方法は、連続する色を一まとめの情報にするので、連続する色が多ければ多いほどファイルサイズが小さくなります。

gif(ジフ)見本
(ファイルサイズ:1KB)

また、jpegにはない「透過」という機能があり、画像の一部を透明にして表示できます。

透過gif(ジフ)見本
(ファイルサイズ:1KB)

また、gif特有の機能で、「アニメーション」というものがあります。連続した画像を表示することによってアニメーションのように動く画像を表示できます。

アニメーションgif(ジフ)見本
(ファイルサイズ:9KB)

このページのTOPへ

png(ピング)

インターネットで標準的に使用されるために規格化された画像ファイル形式。jpegとgifのいい所を取り入れたもの。ほとんどのブラウザが対応しているので便利だが、今でもjpegとgif形式のほうが使用されます。

写真でもイラストでもきれいに圧縮することができます。

圧縮され、フルカラー(32bit:1677万色)で表示できます。

画像編集ソフト「Adobe Fireworks」の標準ファイル形式。

レイヤーに対応しているため、画像の編集に利用できます。レイヤーとは、キャンバスの上に重ねる透明なセル画のようなもので、 レイヤー上に何も描かれていない時は、下のレイヤーが透けて見えます。つまり、下のキャンバスや他のレイヤーに影響を与えずに線や文字を描いたり、画像を編集できます。

png(ピング)見本
(ファイルサイズ:86KB)

イラストやロゴもきれいに圧縮されます。また、gifと同様に「透過」する画像も表示できます。

透過png(ピング)見本
(ファイルサイズ:26KB)

このページのTOPへ

psd(ピーエスディー)

ホームページ作成やDTPでよく使用されるソフトウェア「Adobe Photeshop」で使用されるファイル形式。直接インターネットで表示することはできないが、これを元にjpegやgif形式に変換する。

レイヤーに対応しているため、画像の編集に利用できます。レイヤーとは、キャンバスの上に重ねる透明なセル画のようなもので、 レイヤー上に何も描かれていない時は、下のレイヤーが透けて見えます。つまり、下のキャンバスや他のレイヤーに影響を与えずに線や文字を描いたり、画像を編集できます。

このページのTOPへ

このページのTOPへ

格安です!ホームページ制作をご依頼ください!!

ホームページ制作は専門用語も多く、わかりにくいことも多いかと思います。ホームページの制作方法や制作費用、アクセス数アップ(SEO対策)などわかりにくいことがあればお気軽にお問い合わせください。

このページのTOPへ

格安ホームページ制作依頼

メールでご相談

メールでのお問い合わせは365日24時間受付中です。

お電話でのご相談

090-3401-6229(直通)

【対応時間】

平日のみ(土日祝日はお休み)
午前11時〜午後7時頃

※留守番電話にメッセージを残して頂ければ、対応時間内にこちらより折り返します。

ページの終了