Webデザイン:オンラインリファレンス

Web用画像の種類

Webで画像を使用する際に注意すること

Webページにおける画像では,画質,サイズと表示速度の関係に注意する必要がある.画質や画像サイズが大き過ぎると,データ量が大きくなり,画像を表示するまでに時間がかかる.このように「重たい」ページは,Webにおいて敬遠される傾向にある.
写真を専門的に扱うようなページ以外では,どんなに大きくても最大幅1000ピクセル以内,データ量で数100KB以内が目安となろう.

適切なファイル形式

画像の用途にあわせて適切なファイル形式を選択する必要がある.
  • 写真のように色数が多い画像の場合はJPEG(ジェイペグ)形式
  • ロゴマークのように色数が少ない画像の場合はPNG(ピング)形式
一般的には,JPEGとPNGだけでよい(授業でもこの2つのみ).
最近ではWebP(ウェッピー)などが開発されている.また,従来はGIF(ジフ)などが使用されていた.
 このほかに,WikipediaなどではSVG(イラレのような形式のデータ)も使われている.また,最近ではデータが軽いWebP(ウェッピー)などが開発されている.なお,iPhoneで使われているHEIF(拡張子 .heic)はブラウザには対応していないので注意が必要である.
↑インデックスに戻る←前の項目(052. 複数のスタイルシートを使い分ける)→次の項目(054. Web画像の作り方)