• カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook
  • カミナリインスタグラムカミナリinstagram

山陰の情報を発信するカミナリ

ナビ

07

DECEMBER

オフFRIDAY 2018 / 12 / 7

ニュアンスで分かる!webでの画像形式

Text by Shinji Satoh

  • カミナリツイッターカミナリtwitter
  • カミナリフェイスブックカミナリfacebook

 

こんにちは。

「鉄腕ダッシュ」と「何だこれミステリー」は男のロマン。

佐藤です。

 

 

 

 

画像ってjpgだったり、pngだったりいろんな形式ありますよね?

 

 

この形式の違いが気になって調べてみた人も結構いると思いますが

「圧縮率が・・・」とか仕組みの説明で

ぶっちゃけすぐ忘れそうになりません?

 

 

というわけでwebでの画像の話をしていきます。

「こういう時はこれ」みたいにざっくり解説していこうと思います。

※webでの利用時なのでphotoshopなどでの利用時には当てはまりません。

 

 

・png

イラストやアイコンの場合はこの形式を使えば問題ないです。

また、背景を透明にしたい場合もpngとなります。

写真でpngを利用した場合はとても重くなるのでweb使う場合は切抜きの必要がある場合以外は後述のjpgを使うようにしときましょう。

例としてはこういう画像です。

 

ちなみにイラストでも手書きしたものをスキャンして・・・とかの場合は写真と同じ扱いでjpg形式を選択してください。

と、なるとイラストという表現は正しくないかもしれませんが、、、

他の表現思いつかないのでイラストで通します。

 

 

 

 

・jpg,jpeg

写真の時はとりあえずこれ。

jpgとjpegの違いは気にしなくてもいいです。二つで迷ったらjpgを選択しておきましょう。

 

 

 

ここまでまとめ

 

写真 → jpg

イラスト → png

背景透過 → png

写真&イラスト → jpg

 

まだ続きますが、残りはちょっと特殊なものなので基本ここまで知っていれば特に困ることはないとおもいます。

 

 

・gif

現在は使われることの少なくなってきた形式です。

pngだけではなくgifでも透過ファイルを制作することもできます。

でも透過ファイルを作る場合はpng一択にしておきましょう。

 

ただgifではアニメーションの制作が可能です。アイコンなんかでは特に便利です。

ただ写真でgifアニメーションを制作するとめちゃくちゃ重たくなるのでその場合はおとなしく別の手段を考えましょう。

今ではgifはgifアニメぐらいにしか使われないので(それも減っていってます)

gifアニメ専用とぐらい極端に考えても実はあまり問題なかったりします。

 

 

 

 

・svg

最近よく見るこいつ

gifが減る要因の一つでもあります。

 

実は画像ではないです。

プログラムです。

 

プログラムなので動かすことができます。

プログラムなので円とか書かせると拡大・縮小してもぼやけたりしません。文字を画像で保存する場合なんかかなりいい感じになりますです。

その他IEなんかで普段表現できないことも表現できるようにしてくれたりと色々優秀です。

ただ他の形式と違いかなりクセの強い子で、IEやsafariと良くケンカするので気を付けましょう。

 

最近photoshopがsvgで書き出しできるようになったのほんとありがたいっす。

 

 

 

最後にまとめ

 

写真 → jpg

イラスト → png

背景透過 → png

写真&イラスト → jpg

gif → gifアニメ用

svg → 技術者向け

 

 

 

 

佐藤真司隠しプロフィール画像

TEXT by

佐藤 真司さとうしんじ)

1990年 鳥取県米子市生まれ。
株式会社マジックワード フロントエンドエンジニア。

この人が書いた他の記事を読む