Webサイトを作る際に、画像を挿入したいこともありますよね。
でもPCに詳しくない方や、ブログ初心者の方は画像の保存方式や、その違いについてよくわかっていないはず。
今回は４つの拡張子とその特徴についてまとめていきます。
画像形式の違い
画像には２つの形式が存在します。
それぞれの違いを意識して、画像の保存・使用をしましょう。
■ビットマップデータ形式
・ピクセルの概念
・正方形たち(点)が集合したもの
・拡大すると、見た目が粗くなってしまう
ビットマップデータ形式は、写真を挿入するときに向いています。
繊細な色合いや、グラデーションを表現したいときにこの形式を使うとよいでしょう。
■ベクターデータ方式
・点の座標、結ぶ線など、数式データで書かれているもの
・拡大しても、粗い見た目にならず、見た目がきれいなまま
ベクターデータ方式は、線や面で描かれているイラストや、
アイコン、テキストを挿入したい際に適しています。
写真は『ビットマップデータ形式』、
単純なイラストやアイコンは『ベクターデータ方式』
次はそれぞれの形式で作られる画像の種類です。
ビットマップデータ形式の画像の種類
サイトを運営する上で、覚えておきたい種類は３つです。
『JPEG』『GIF』『PNG』
これらをそれぞれ解説していきます。
■JPEG
メリット：圧縮率の指定可、(PNGと比べて)サイズが軽い
デメリット：画質を下げると元に戻せない、上書き保存すると、画質が落ちる
一眼レフの写真の変換などにも使用されたりします。
サイズが軽いことからよく使用される拡張子ですが、その特性として上書き保存をするたびに画質が落ちてしまうという欠点もあります。
■PNG
メリット：透過が可、256色で表現できるPNG-8と、フルカラーのPNG-24がある
デメリット：(JPEGと比べて)サイズが重い
サイズの重さと引き換えに、画像の美しさを得ることができます。
写真のきれいさか、サイト全体の軽さか、どちらを選ぶか取捨選択です。
■GIF
メリット：サイズが軽い、透過が可、アニメーションの設定が可
デメリット：256色が表現の限界、高精細ディスプレイで閲覧したとき劣化しやすい
動くアニメーションを画像形式で設定できるのが大きな特徴になります。
サイズが軽いのは嬉しいですが、劣化した写真を見られてしまうリスクもあります。
画像の軽さ…GIF,JPEG
綺麗さ…PNG
動き…GIF
手軽さ…JPEG
ビクターデータ形式の画像の種類
覚えておきたいのはたったの１つ。
アイコンの設定をしたい場合などは、とりあえずこの種類で保存・設定してみては？
■SVG
メリット：アニメーションの設定が可、拡大しても劣化しない
デメリット：(複雑な形状の場合に限り)サイズが重くなる
拡大しても、高精細ディスプレイに耐えられる種類です。
この種類ので保存する際は、シンプルなアイコンに限ります。
さいごに
画像の名前の後に【～.png】などがあると、
よくわからないが、保存できるしいいや、と思っていたかもしれません。
しかし、これらの種類(拡張子)には、それぞれ使いどころがあります。
それぞれの特徴を意識して画像を使用すると、より良いWebサイトが構築できることでしょう。