ブログを書くときの困ったを解決

JPGとPNGとGIFいろいろあるけど どれで保存したらいいの?

mika
mika
 画像の保存にJPEGやPNGっていろいろあるけど、どう違いがあるの? 

そうそう、
保存するときどれを選んで良いのか迷いますね。
それぞれ特徴があってメリット、デメリットが あるので知っているとそれぞれに合ったファイル形式を選べるよ
りんご
りんご

画像ファイル

JPG(JPEG)
『ジェイペグ』

Joint Photographic Experts Group

拡張子 .jpg  .jpeg

24ビット(1,677万色)高圧縮可能

※※不可逆圧縮静止画のみでアニメーションは不可

昔のOSの拡張子が3文字まで、現在4文字まで使えるため2種類の拡張子が存在する。ファイル形式の違いはなくどちらを使ってもOK。

デジタル写真用に開発されたフォーマット。
  
インターネットのホームページによく使われています。
色数が少ない画像は逆にはっきりしないぼやけた感じになるのでweb上でよくみるイラストやロゴなどには不向き

メリット

人の目では識別できなほどの小さな情報を切り捨てて圧縮保存しているため大きな画像もよりコンパクトに保存することができます。
PNGよりも圧縮率がよい

 デメリット

一度画像を圧縮してしまうと切り捨てられた情報は元に戻すことはできないので上書き保存を繰り返すことで画質が劣化してしまうという難点があります。

mika
mika
えー保存を繰り返すと劣化するんですね
知らなかった

なんども編集、保存をくり返すときは元の画像は残しておくといいね♪ 
保存を低圧縮にすると劣化が軽くてすむよ。
りんご
りんご

PNG
『ピング』

Portable Network Graphic

拡張子 .png

GIFの代わりにweb上に普及させるために開発されたファイル形式。 ※可逆圧縮

PNGはさらに3つに別けられます。

8bit(ビット)最大256
webサイトなどのアイコンなどに向いている
(透過処理がでる)


24bit(ビット)フルカラー1677万

写真やグラデーションのあるものも可能(透過処理ができない)


32bit(ビット)フルカラー1677万
さらに 256段階の透明度を記録可能(透過処理、半透明処理もできる)圧縮しても画像が劣化しにくい。

 メリット

8bit
軽量で透過処理が可能なためwebアイコンなどに最適です。 写真より色のはっきりしたイラストやロゴなどの圧縮に向いています。

24bit
写真などグラデーションのある画像にも適しています。

32bit
フルカラーで写真やグラデーションのある鮮明な画像に最適。さらに透過処理と半透明ができ高品質な画像処理が可能。

デメリット

8bit
256色と色合いが少ないのできれいな写真やグラデーションには不向き。

24bit
透過処理ができないためwebサイトのアイコンや背景画像と合わせて利用することには不向き。

32bit
高機能な分、ファイルサイズが重くなりすぎるという弱点があります。 そのため軽量さが必要なwebサイトなどには不向きといえます。

PNGで保存する場合、これらの事を理解し用途に合わせた形式で保存することが必要になります。

GIF
『ジフ』
Graphics Interchange Fomat

拡張子 .gif

最大8ビット (256) 高圧縮可能

ファイルサイズを小さくできるのでネット上で使われることが多い。アイコンやロゴ、図形などホームページの素材やイラストなどによく使われています

アニメーションが設定できます。

 メリット

ファイルサイズがとても小さい。

静止画をパラパラ漫画のように表示します。
編集経験がなくても簡単に作成することができます。
動画と比べるとファイル容量がとても軽いので読み込みも早いため通信環境を選ばす観ることができます。 

再生ボタンを押さなくてもループで再生を繰り返してくれます。

デメリット

色数が少ないので写真や画質の良い画像には向きません。

画像ファイルなので音声を入れることはできないうえ、長い再生には不向き。尺が長くなると動画よりも容量が重くなってしまいます。

スマホでよく見るSNSの短いアニメーションにGIFが使われています。 動くことで広告にインパクトを与えられます。自動再生なのもいいですね
りんご
りんご

BMP
『ビーエムピー』
bitmap(ビットマップ)

拡張子 .bmp

点の集まり(ピクセル)で画像を表しているWindowsの標準的な画像ファイル形式。(62561677)があります。非圧縮形式。

メリット

編集や保存を何度、繰り返しても圧縮しないので画像の劣化はありません。  高繊細な画像保存が可能。

デメリット

容量がとにかく大きい。

ホームページなどの画像やメール添付には不向き。

プリンタ―でよく使われているインクカラー(CMYK)シアン、マゼンタ、イエロー、ブラックに対応していません。

 

SVG
『エスブイジー』
Scalable Vector Graophics


拡張子 .svg (.svgz)

画像を図形の情報とするベクター画像

※ベクター画像とは 
複数の点を数値化して数式として線を結んで画像にしたもの。

メリット

曲線、拡大、縮小、色の変更など、画像を劣化させることなく簡単に行えます。

図形やイラストなどを使うポスターやフライヤー、ロゴ、グラフ、地図など大きくしても画像がボヤけることがないので向いています。

テキストエディタ―での編集が可能。
アニメーションも作ることができます。

PNG、BNP, JPEG などの※ラスタ形式の画像をSVGに変換が可能。

※ラスタ形式とは
ピクセル(pixel)で表現されている画像形式。拡大するとカクカクとしたドットの一つ一つがみえます.

画質を滑らかにするためドットを増やし解像度を上げるとデータ量もその分、大きくなってしまいます。それに比べ、ベクター形式のSVGファイルは解像度を気にせず作成、変更が可能。 拡大してもラスタ形式のようなドットのカクカク感がなく線が滑らかです

デメリット

写真や複雑なイラストなどの細かい表現には弱い。

情報を数値化して再現するベクター形式のSVGファイルは複雑で繊細な画像になればなるほどファイルサイズも大きくなり膨大な計算が必要になるため画像表示速度が遅くなります。

 

MP4
『エムピーフォー』
 MOEG-4Part14

拡張子 .mp4

MPEG-4形式の圧縮動画のデータを保存するファイル形式の一つ。

Adobe Express
動画をMP4に変換

(永久無料のオンラインツール)
https://www.adobe.com/jp/express/feature/video/convert/mp4

テキストファイル

PDF
『ピーディーエフ』
Portable Document Fomte

拡張子 .pdf

紙に印刷した時の状態(図形や文字、表などのレイアウト)をそのまま保存することができる文書用に開発されたファイル形式『電子的な紙』

メリット

WordやExcelで作成した文書はWordやExcelでないと開くことができないが、PDFなら送られてきた文書を相手がどんな端末でもそのまま共有し見ることができます。

※※ブラウザー上でファイルを見るだけなら
Internet explorerやGoogle chromeなどもともとファイルを表示することができるようになっています。

コメントを追加したり修正などが可能。
(セキュリティー設定で編集禁止になっているPDFは編集不可)

WordやExcelで作成した文書をPDF保存すればOK

 デメリット

PDF形式のファイルを開くにいは専用のソフトが必要。パソコンやタブレットによっては初めからインストールされているものもあるが、ない場合はAdobe社の「Adobe Reader」という無料ソフトをインストールする必要があります。

請求書などPDF書類で送付する場合は金額など簡単に書き換えられることができるため後々の、トラブルを避けるため修正や訂正ができないような形式で送る必要があります。