代表的な画像ファイル形式一覧


公開 (UL): 2022-08-09
更新 (UD): 2022-08-09
閲覧 (DL): 2022-09-29

この記事のもくじ

→本文へ
当サイトは SNS の公式アカウントがないので,「議論ネタ」にする際は,皆さんのブログ,メーリングリスト,SNS や掲示板などで,適当にハッシュタグを付けたりリンクを掲載するなどしてご利用ください。

前の記事

2022-04-04
サイトのローカル試験と実ウェブ上の差を縮める手法(Perl)

最近の記事

2021-12-17
Perl で利用宣言時にモジュールをカスタマイズする
2021-06-01
Base54
2021-06-01
PPOP
2021-03-04
全角⇔半角の変換
2021-02-23
五十音の「辞書順」の処理
新着情報
She appears also the top page.

新着情報 Recent docs.

Sorry, but almost these pages are only Japanese.
個人情報の提示要求者側に求められる責任 «The responsibilities of the government that wants some private infomations.»
給付金の手続きに突然「旧住所」の提示を求めて来たお役所の対応の疑問からその「責任」を考える。
内閣支持率が高いワケ «Why the result of the enquête about the Japanese cabinet support rate is high.»
入浴中で出られなかった電話がその謎を解くヒントに!
日本の「IT 人材不足」の正体 «The simple reason why Japanese companies lack IT-skill.»
保険会社からのセキュリティガバガバメールが「IT 人材不足」の正体を暴く。
QR コードの功罪 «"Un-readable QR-code" discloses incompetences of the government in Nishi-tokyo city.»
西東京市から届いた「読めない QR コード」のチラシに見えたオヤクショの無能さ。
現場を知らないメーカーの夢想 «Makers say "we'll make good!" without investigation of working on-the-job.»
日経新聞記事の感想。「遠隔操作ロボットが医療介護現場で人材を活かす」という眉唾。
「マイナンバー」が危険なこれだけの理由 «The reasons of "My-Number System" is danger.»
それでも「マイナンバー」を推す裏の理由を推察。

人気記事 Frequent view pages.

オランダの介護に対する考え方一例
人気急上昇中! 検索語「オランダ 介護の考え方」での上位御礼!
表計算で「令和」に対応する方法
How to adapt the Gengo era "Reiwa" on spreadsheet applicaiton.

古いアプリも OK。「表計算 令和」の検索結果上位御礼!
表計算ソフトで予定表を自動作成する超便利な方法 «How to make the schedule table automatically on spread-sheet.»
「毎月第○×曜日」的な法則は自動で作らせてラクしよう!
表計算ソフトに「個人情報保護機能」を仕込む方法 «Prevention to leak private-data with spread-​sheet macro function.»
「漏えい」のためのフェイルセーフ。「表計算 個人情報」の検索結果上位御礼!
Wary-Basher (ワリバッシャー)
DIY device that enables the handicapped to operate many things with a switch like push-button.

障害者の様々な操作をスイッチ操作で実現する器具。キットも発売中! 「作り方」PDF ダウンロード多数御礼!←地方教育委で人気。
貧乏人を殺す行政の構造 «Structurally, the administrators kill the poors in Japan.»
ヘタすると多摩川に流されるところだった台風 19 号

この記事に対する → 調布市の反応

おすすめ! Recommend

文字ベース天気予報 «Weather forecast in text mainly from JMA Json-data.»
古いブラウザやスマホ,音読ソフトでも大丈夫! 気象庁の JSON データを利用した文字ベースの天気予報(試験版)。
「事故防シート」について «Cared persons taking with "Jiko-​Bow-​Sheet" prevents from accidents.»
介護現場の負担軽減と事故防止のアイデア
【連載】 キーボードの「キー」の詳しい使い方 «The detial of usage each key on keybord.»
各キーの機能詳細。機能別五十音順一覧。
和易ゐ記 (WAI-WIKI) «WAI-WIKI is light­weight markup language for Japanese, and generates HTML on this server on-​demand.»
当サイトで開発/使用中の日本語向けに特化した軽量マークアップ言語
コロナ検査所一覧 «Light search for corona-test station.»
東京都サイトで配布の CSV ファイルを元に検索。スクリプト不使用のため,古い機械やブラウザ,音読ソフトでも大丈夫!

ご連絡 Contact

▼ メールフォームはこちら
SSL 証明書の更新に不具合が多いため,期限切れエラーが出た際は,お手数ですが「例外指定」をお願いいたします。

ファイルの暗号化
当サイト管理者(石川)宛にメール添付で送信するファイルを暗号化したい時は,唯一のパスワードを PPOP で取得できます。 PPOP gives a password for encryption of the file(s) attached your mail to the admini­strator of this site M.Ishikawa.
PPOP

時事川柳 News Senryu

パパ育休
 あきらめられた
  テレワーク

 「産後パパ育休」制度が 10 月からスタートするんだってさ。いや,「テレワーク」が浸透すりゃ要らんのじゃないのか? アフターコロナで「通勤」を完全復活させることを前提にしている感じの違和感……。(2022-09-15)

ご支援 Support this site.

まだまだ コロナ失業中!!
CORONA-NEET, seeking works now!

この活動をご支援いただける方はこちらへ Could you support this site, see here (but Japanese).

 ここでは,主に当サイトでよく使用される画像ファイル形式について簡単に説明したい。
 画像を編集して使う場合,使用する編集ソフト(ワープロや画像編集ソフトなど)で利用できる画像ファイル形式をご確認ください。

● 概要

 画像ファイルには大きく別けて以下の2つの系統がある。

 次章以降でそれぞれの特徴を簡単に述べてみる。

● ラスタ(ペイント)系ファイル形式

 ラスタ系は,キャンバスに絵の具で描くような,一般的なお絵描きに近い形式。画像は「画素(ピクセル)」と呼ばれる点の集まりでできていて,その点ごとに,何色かを決めてひとつの画像になる。
 データ形式として「ラスタ画像」と呼ばれ,その形式の画像編集アプリのことを「ペイントソフト」などと呼ぶことが多い。
 画素が「(正方形の)点」で,その集まりであるために,拡大するとその点が大きくなって「モザイク」のように見えたり,境界が「ギザギザ」になったりすることがある。また逆に縮小したり,90°の倍数以外の回転をすると,「にじみ」が出たりすることがある。だから,イラストとして使う時,拡大や縮小,回転させたりすると画質が落ちる可能性があるので要注意。ただし,ワープロの編集画面上で縮小した場合は,画面上では「にじみ」が見えていても,印刷すると元の解像度近くまで画質が上がることも多い。一方,「拡大」すると確実に画質が落ちる。

▼ 描画法「ペイント」と「ドロー」の違い
描画法「ペイント」と「ドロー」の違い

 ラスタ系画像ファイルを修正する場合,たとえば何かを「消したい」時,通常は「上から背景で塗り潰す」ことになる。青い背景の前にある何か別の画像を消したい時は,そこを背景と同じ青で塗り潰すことで,その画像を「消す」処理をすることになる。だから,背景が複雑な画像だと,「消す」だけでもちょっとたいへん。もし背景画像だけ別に保存できるなら,消したい部分をコピペで対応すると,少しラクできる。
 が,編集や修正は後述「ベクタ画像」のほうが断然ラクである。

 ここでは以下のラスタ系形式について述べる。

◆ JPEG(Joint Photographic Experts Group)

 主に「写真」に使用される。境界のハッキリしない画像に適しているため,「線画」や,色指定で描かれるようなイラストには向かない。
 拡張子(ファイル名の末尾)は“.jpg”,“.jpeg”などが多い。
 ラスタ(ペイント)画像用で,つまり点(ピクセル)ごとに何色かを記録する方式。拡大や縮小するとその「点」の大きさが変わるために,「モザイク」や「にじみ」が目立つようになることがある。
  JPEG は「透明」の画素を持たないため,イラストとして使う時に他の画像と組み合わせて使うと,背景の前面に置いた画像の周囲に,余白が四角く残ることがある。これを避けたい場合,余白の白い部分を透明として扱うよう指定できる機能がアプリに必要。それができない時は,画像を重ねるような加工をしたりせずにそのまま使うか,文字を前面に置く(画像を文字の背後に置く)ような使い方が適する。

▼ JPEG 画像を編集すると……
JPEG 画像を編集すると……

 高い圧縮率,画質の指定ができるなどの特徴がある。一般的なものは「不可逆圧縮」で,ファイルをそのままコピーしている限り劣化しないが,編集を繰り返すと劣化する。ただ,最近では劣化のない可逆圧縮の規格もできたらしいが,あまり使われているような話は聞かない。
 一般的なウェブブラウザでそのまま表示できることが多い。

◆ GIF(Graphics Interchange Format)

 イラスト向きの画像形式。
 拡張子(ファイル名の末尾)はほぼ“.gif”。
 ラスタ(ペイント)画像用で,つまり点(ピクセル)ごとに何色かを記録する方式。拡大や縮小するとその「点」の大きさが変わるために,「モザイク」や「にじみ」が目立つようになることがある。
 多重レイヤ(=1ファイルにいくつもの画像の「層」を収録できる)に対応していて,レイヤごとに 24 ビット(約 1677 万)の色から特定の 256 色までを選び,点(ピクセル)ごとに割り当てて収録される。
 その「層」を時間を置いて表示させて,「パラパラアニメ(動画)」のように見せることが可能。「猫 GIF」とかっていうのはコレ。
 「透明」の指定もできるので,余白に「透明」が指定されている画像では,背景の前に置いても JPEG のような四角い余白はできない。が,「100% 透明か色着きか」であり,「半透明」という指定はできないので,ただポンと置いただけでは,背景との境界がなめらかな合成画像にはならないことが多い。この点は後述の PNG のほうが有利。

▼ GIF 画像を編集すると……
GIF 画像を編集すると……

 「可逆圧縮」のため,色の設定を変更しない限り,編集を繰り返しても劣化しない。圧縮率は,色数が少なければまぁまぁの高圧縮率。
 一般的なウェブブラウザでそのまま表示できることが多い。

◆ PNG(Portable Network Graphics)

 イラスト向きの画像形式。
 拡張子(ファイル名の末尾)はほぼ“.png”。
 ラスタ(ペイント)画像用で,つまり点(ピクセル)ごとに何色かを記録する方式。拡大や縮小するとその「点」の大きさが変わるために,「モザイク」や「にじみ」が目立つようになることがあるが,境界線に透明度が使われていると,ある程度「滑らかさ」を保つことがある。
 点(ピクセル)ごとに「透明度(アルファチャンネルとも言う)」を指定できるところが GIF と異なる。たとえば「全体が半透明な画像」を作ることもできて,その場合,背景が透けて見えるようになる。境界部分の透明度がうまく調整された画像では,他の画像の前に置いて合成した時,境界が適度にぼかされて,自然な感じで背景に溶け込む。

▼ PNG 画像を編集すると……
PNG 画像を編集すると……

 「可逆圧縮」のため,色の設定を変更しない限り,編集を繰り返しても劣化しない。圧縮率は,GIF より多少高いが,多くの色数を収録していることが多く,同じ画像でも結果としてサイズが大きいことが多い。同じ色数なら GIF よりサイズが小さくなることが多い。
 「48 ビット」などという,人の目では識別できないレベルの色設定もできるらしい。
 一般的なウェブブラウザでそのまま表示できることが多い。

● ベクタ(ドロー)系ファイル形式

 ベクタ系はラスタ系とは異なり,自由に形を変えられる,色の着いた「ゴム板」あるいは「のし粘土」みたいな感じのものを重ねていくような描画法。これが紙だったら「切り絵」のような感じだが,「ゴム板」と言ったのは,ベクタ画像ではいくらでも自由に形を変えられるため。
 データ形式として「ベクタ画像」と呼ばれ,その形式の画像編集アプリのことを「ドローソフト」などと呼ぶことが多い。
 キャンバスを,数学で使う座標のついたグラフと考え,「点」の位置を座標上の x 軸,y 軸の数値で表わし,「この点とこの点を通る線があって,内部は××色で塗り潰されているゴム板」的なデータを1つの部品として扱い,その集まりで画像を構成する。

▼ 「ドロー」描画法の構造
「ドロー」描画法の構造

 拡大や縮小,回転などの編集をすると,コンピュータが,線が通る点の座標が「拡大,縮小,回転させるとどの位置に来るか」の数値を計算で求めて,その都度「画像を作り直す」ような処理をしている。そのためラスタ画像のように「モザイク」が目立ったり,境界が「ギザギザ」になったりせず,また 90°の倍数以外の回転をしても「にじみ」なども出ない。縦や横だけ伸縮させたり,ナナメに傾けたりする変形もできるうえ,部品ごとにコピーもできるので,ワープロやプレゼン作成ソフトなどでこの形式が使えれば,拡大,縮小,回転,変形,コピーなど,様々な加工と応用が利き,イラストではたいへん便利な形式。
 「ゴム板」の部品単位でコピーしたり切り取ったりすることができるため,編集時,たとえば何かを「消したい」なら,その部品(ゴム板)を削除するだけ。部品を「重ねて」画像を構成しているため,たとえば「重なって描かれているものの手前は消さずに奥だけを消す」といった修正の場合も,その「奥の部品を消す」という操作だけで済む。これが「ペイント系」ソフトでは,手前の画像を消さずに奥だけを消す作業は面倒なことが多い。また,遠くにあるものと近くにあるものの位置関係を逆にしたい時も,ドローであれば,重ね順を変更して,拡大・縮小と組み合わせれば簡単……などなど,編集がいろいろとラクにできる。

 筆者が障害者向けにパソコン指導をする際,「絵を描きたい」という要望が出たら,なるべくこの形式での描画を指導することにしている。というのは,描いた線を後から形を変えて修正できるため。テンキーを利用した「マウスキー機能」や,一部の障害者向け機器などでのマウス操作では,上下左右と斜めの8方向しか動かせず,前述のペイントソフトで線を引くと,それら8方向の直線以外は描きにくい。一方,ドローソフトを使うと,それらのマウス操作でも,一度描いた直線を,後から滑らかな曲線にいくらでも修正することが可能になる。
 実際にこの方法で指導した方で,絵だけでなく文も書いて本まで出した方の話が以下にある。

▼ 「とも III」上梓に添えて
http://treeware.jp-help.net/?dblg1

 筆者サイトのイラストも,たいていこの方式で描いている。

 ここでは以下のベクタ系形式について述べる。

◆ SVG(Scalable Vector Graphics)

 イラスト,特に「線画」向きの画像形式。
 拡張子(ファイル名の末尾)はほぼ“.svg”だが,圧縮をしたものは“.svgz”の場合がある。
 ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが,XML という形式の文字で表現されて,収録される方式。
 編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは要確認だが,SVG 形式はベクタ画像ファイルとしては標準形式的な扱いなので,取り込めるアプリはワリと多いと思われる。
 データサイズは「部品の数」によるため,部品の数が少ないイラストなら,画像の大きさに関わらずファイルのサイズは小さくなる。XML というのは,テキスト(文字)データの記載形式のため,圧縮されていない SVG ファイルをエディタなどで開くと,その「座標の数字」が見れるが,当然数字ばかりで何の絵だかは分からない。
 圧縮ファイルの場合は「文字の圧縮」であり,可逆圧縮のため編集を繰り返しても劣化しない。ただし,圧縮に対応した閲覧ソフトが要る。

 圧縮のないもの(.svg)は一般的なウェブブラウザでそのまま表示できることが多いが,古いブラウザでは未対応なものもあると思われる。
 ドロー系フリーソフトの代表格である Inkscape(インクスケープ)でも標準のファイル形式。当サイトのイラストはこのソフトを利用させてもらっているものが多い。

◆ WMF(Windows Meta File)

 イラスト,特に「線画」向きの画像形式。
 拡張子(ファイル名の末尾)はほぼ“.wmf”。
 ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが収録される方式。
 編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは,要確認。

 前節 SVG と異なりバイナリ形式なので,エディタなどで開いても,数字どころか何もわからない。が,ファイルのサイズが多少小さい。
  SVG より古くからある形式のようで,この形式に対応しているアプリは SVG より多いらしい。筆者も,異なるアプリ間でデータ変換をするための中間ファイルとして使うことがある。

◆ EPS(Encapsulated PostScript)

 イラスト,特に「線画」向きの画像形式。
 拡張子(ファイル名の末尾)はほぼ“.eps”。
 ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが収録される。
 編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは,要確認。

 開発会社(Adobe Inc. 社)独自の文字形式であるため,エディタなどで開くとその文字が見れるが,当然数字や記号ばかりで何の絵だかは分からない。
 対応しているアプリも比較的多いようで,これも筆者は異なるアプリ間でデータ変換をするための中間ファイルとして使うことがある。

◆ ODG(Open Document Graphics)

 イラスト,特に「線画」向きの画像形式。
 拡張子(ファイル名の末尾)はほぼ“.odg”。
 ベクタ(ドロー)画像用で,つまり「ここにこんな線があって,中が××で塗られている」といったデータが収録される。
 編集したい場合,使うアプリ側でこの形式が使えるか(多くは「インポート」や「〔画像の〕挿入」で取り込めるか)どうかは要確認だが,元々詳細が公開されている「オープン」な規格であるため,新しめのアプリなら読み書きできる可能性もわりと高いよう。

 ODG は「オープンドキュメント形式」の一部。オープンドキュメント形式とは,ワープロや表計算といったオフィス系のファイル形式を統合したもの。ODG 以外にも,ワープロの形式として ODT,表計算形式として ODS などがある。
 オープンドキュメント形式の主たる部分は,SVG と同様 XML によって記載されている文字データで,それが補助ファイルと共に ZIP 圧縮されたもの。
  OpenOffice というフリーのオフィスアプリで採用されているのがこの形式。ワープロと相性がよく,PDF にもし易いので,PDF で配布したい画像や,複数ページを必要とする画像ファイルを作る時,筆者もよく利用させてもらっている。



© M.Ishikawa; TREEWARE 2022.