ホームページで使用できる画像の種類(実技編2-4-2)

実技編

ホームページのコンテンツ(内容)として文章を視覚的に補足する『画像』はとても重要なものです。
画像をページ内に表示する方法については以前に解説しました。

今回はその画像の『種類』についてのお話です。

画像ファイルの形式ごとに異なる特徴

ホームページ内に表示できる画像ファイルとは1種類ではありません
それぞれ長所短所の異なる『数種の画像ファイル』が使用できます。

写真もイラストも『画像』

ちなみに、ホームページで表示できる『画像』とは、いわゆる『写真』だけを指す言葉ではありません。
写真の他に、『イラスト』『アイコン』『ボタン』なども含められます。

それら画像ファイルの特徴を種類別に解説しましょう。

JPG形式

  • 正しくは『JPEG』 であるが、拡張子を3文字で表記しなければならなかった時代の名残で現在でも『JPG』と表記することが多い
  • 約1670万色まで表現できる
  • 色を透過させることはできない(透明、あるいは半透明なピクセルを作れない)
  • 保存を繰り返すごとに圧縮(ファイル容量を小さくするために近似色をまとめる)処理されるため、結果として画質は劣化していく

GIF形式

  • 256色まで表現できる
    ※ 使える256色が決まっているわけではなく、仮に元画像が何千色も使用したものであったとしても、この形式で保存すると近似色を統合し256色にまとめられてしまう
  • 写真の保存には不向き(色数が少なすぎる)
  • 透明なピクセルをつくることができる(完全な透明のみ※半透明は不可)
  • 色数の少ないアイコンやロゴマークなどに使用することが多い

PNG形式

  • 約1670万色まで表現できる
  • 透明・半透明なピクセルを作ることができる
  • 写真向きと言えるが、 JPEGで保存した同程度の画質(目視の範囲で)の同画像と比較するとファイル容量は大きくなる

画像ファイルの入手方法

一般的に広く使用されることの多い3種類を紹介しましたが、次にそれらの入手方法についてご紹介します。

デジタルカメラで撮影(写真)

デジタルカメラやスマートフォンのカメラを使用して撮影した画像をそのまま、あるいは画像加工アプリにてファイルの種類を変換しページに表示します。

デジタルカメラの一般的な普及機やスマートフォンの大半は『JPG』形式で保存されることが多いのでそのままホームページに表示させることはできますが、単純に大きい(容量ではなく画像の広さ)画像になりがちですので、できれば画像加工ができるアプリで大きさを必要最低限に縮めることが望ましいですね。

インターネット上の素材配布サイトからダウンロード

インターネット上には『有料・無料』を問わず素材(写真・イラスト・アイコン・ボタンなど)をダウンロードにて配布するサービスがいくつも存在します。

画像の種類や画質・大きさに段階を設けていることもあり、ダウンロード後の加工処理をしなくてもいいような素材の探し方ができます。

グラフィック系アプリを使って作成(イラスト・アイコン・ボタンなど)

挿絵やキャラクターなどのイラスト、箇条書きの行頭記号やSNSなどのアイコン、ファイルのダウンロードを実行するボタンなどのいわゆる『絵』は専用のアプリを使って描画し、画像ファイルに書き出し(元のデータを残しつつ別の形式に変換して保存すること)します。

イラスト・アイコン・ボタンなども上記の『インターネット上の素材配布サイト』にて多く提供されています。

画像の加工に使用するアプリ

『イラストを描画する』『写真を加工する』といった処理は専用のアプリが必要です。
いくつか紹介しておきましょう。

イラスト描画(ドローイング)向けアプリ

Adobe Illustrator

イラスト描画向けアプリの中で最も有名なものです。
インターネットで使用するデータのみならず、印刷向けのデータ作成にも対応しています。

有料(サブスクリプション)

Adobe Illustrator

Inkscape

無料のイラスト描画向けアプリとして古くから使用されているものです。
Illustratorと比較するとさすがに機能面で適わない部分もありますが、『作成できるもの』については無料とはいえ遜色はありません。

無料

Inkscape

画像加工(レタッチ)向けアプリ

Adobe Photoshop

画像加工向けアプリの中で最も有名なものです。
画像のレタッチ(修正)、コラージュ(合成)だけではなく絵画的な絵を描くことも可能です。

有料(サブスクリプション)

Adobe Photoshop

GIMP

無料の画像加工向けアプリの中では人気のアプリです。
Photoshopとは異なり標準機能では印刷向けのデータは作成できませんが、プラグイン(拡張機能)を導入することで一部対応させることは可能です。

無料

GIMP


今回は画像の種類とその入手方法について解説しました。
画像の用途に合わせて最適な選択ができるように違いを理解してください。

最後までお読みくださりありがとうございました。

おつかれさまでした。

タイトルとURLをコピーしました