実は色々ある画像達の扱い方について

はじめに

みなさん、こんにちはミラスタの黒田有希です。

私、フロントエンドエンジニアなので画像に触る機会が多いです。

そこで今回は画像について共有していこうと思います

私たちの身近にある画像なのですが、実は大きく分けて2種類ある事知っていましたでしょうか？？

それはラスター型とベクター型です。

ラスター型とは、1ピクセルのドットで構成されている画像になります。

それぞれのピクセルに色相、彩度、輝度などのデータが含まれています。

画像を拡大すると1ピクセルの大きさが大きくなり画像にモザイクがかかったように粗く表現されてしまいます。

がその場合はピクセルの数を増やし画素数をあげます。

写真など複雑な画像に向いています。

ベクター型とは、点と点を線で結んで構成されている画像になります。

複雑な計算式によって色や線を表現してます。

しかし複雑な画像を作成する際は向いていません。ただでさえ複雑な計算をしているので処理追いつかず表示が遅くなってしまう事も…

使用する場合はシンプルなアイコンやイラストなどに使用しましょう

ラスター型はjpgやpng、gifなどになります。

それぞれの特徴は異なっており、

となっています。

最初の数字は色数です。

1ピクセルの中にそれだけの数を表現できます。

2つめは保存した時の性質です。

非可逆性だと保存すると劣化します。可逆性だと劣化しません。いつまでも綺麗です。

最後はそのまま透過できるかできないかです。

背景を透過できるのはやはり便利ですね～

ただ、多機能の方が容量は当然重くなってしまいウェブサイトのパフォーマンスにかかわってきます。

なので使い分けが必要ですね。

ベクター型はsvgになります。

先ほども述べたように線で描かれている為、とても滑らかで美しいです。

画像数や可逆性などありません。

またsvgに関してはcssやjsでアニメーションさせる事が可能です。

svgアニメーションとか聞いた事あるかな…？

ウェブデザイナーとフロントエンドの領域が溶けてきているこの頃、デザイン側の知識もつけていくと重宝される存在になれると思います。

画像の扱いに気をつけてハッピーになりましょ～！