画像保存形式の違い(PNG,JPEG,SVG)

こんにちは。

とうとう12月に入りましたね!

気温も寒くなってきて家ではこたつが必須になりました笑

 

それはさておき、今日はスライスの練習をしていました。

今までの題材より複雑で難しいです(ノ_<)

でもこうやって練習を積むことで確実に力はついてきていると感じます!

月曜で頭はパンク気味でしたが今日も役に立つ知識をたくさん教えていただけてありがたいです!!

使いこなせるようになりたいです^^

 

さて、そろそろ本題に入ります!

画像の保存形式についてお話しします。

わたしは未だに画像の保存形式を迷うこともありますが、最初の時に比べてそれがが少なくなってきました。

よく使うのはPNG,JPEG,SVGの3つです。

違いを簡単にご説明すると

 

PNG

約1677万色で表現できてなんといっても透明や半透明の画像が保存できる

主にアイコンやロゴなどに使います

 

JPEG

約1677万色で表現できて高画質でありながら容量が小さい

写真やイメージ画像といえばJPEGです

 

SVG

最近注目されているフォーマットです!

 

SVGを説明する前に画像の種類についてお話しします

コンピューターで扱う画像は2種類あり、「ビットマップ画像」と「ベクター画像」です

webの勉強をしていると聞いたことがあるかも知れません^^

ビットマップ画像とは、画像を格子状に細かい点に分割しており画像を拡大すると画質が荒くなってしまうという性質があります

ちなみに上記であげたPNG,JPEGフォーマットはこのビットマップ画像にあたります

 

その点、SVGはベクター画像で拡大しても画像は粗くなりません!!

ベクター画像では画像を複雑な計算式で表現しており、画像を拡大縮小するとその計算式を変えながらそれに応じて値を計算しなおします

ただ、写真などの多くの色を使う場合には不向きとなっています

 

後からCSSで色やサイズ変更も可能で色々と便利です

アイコンなど、SVGで保存できそうならそうしています!

 

まとめ

アイコンはSVGで保存できそうならSVGで保存!できなければPNG

容量の問題もあるのでそこは要相談ですが・・・

 

写真、イメージ画像などはJPEG

 

このように画像を書き出しする時にはその画像に適したフォーマットで保存するのが大事です^^

 

今日はここまで〜〜

コメント

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