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


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

この記事のもくじ

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

前の記事

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

次の記事

2023-01-16
Android のキーボード・ショートカット一覧

最近の記事

2024-02-11
XMPP - 長く使える安心チャット
2023-09-15
Perl の正規表現での A と Z の扱い
2021-12-17
Perl で利用宣言時にモジュールをカスタマイズする
2021-06-01
Base54
2021-06-01
PPOP
新着情報
She appears also the top page.

新着情報 Recent docs.

Sorry, but most of these pages are only Japanese.
福祉改善を阻むオヤクショ思考 «Japanese subsidy system of communication aid device for disabilities cannot be applied those if it's with features except communication, IDK why.»
「意志伝達」しかできない高額な装置にのみ税金が使われる謎制度。
XMPP - 長く使える安心チャット «Gmail doesn't give you notices? Try to use XMPP chat!» (Japanese only)
Gmail 通知が来ない? XMPP チャットはいかが?
「理不尽採点」教育と「英語力低下」 «Japanese English skill ranking in the world has been down. I guess one of the reason is that the government's education policy lacks coherence.»
日本人の英語力が低下,しかも小学校から英語が必修になった世代ほど。「教育方針の一貫性のなさが原因」とする考察。
倫理意識の社会的低下 «One day, I set to stop DM from a banking corporation, but those continue to be sent after that. I'm feeling falling sense of ethics in Japanese society.»
某銀行からの DM が,およそ金融と関係ないもの多数。停止設定後も何ヶ月も配信が続く状況に,倫理意識の社会的低下を感じた話。
オヤクショの「上から目線」という殺傷光線 «Tokyo government gifted me "Okome(rice) coupon". But I have allergic to rice. The government officers often make services considering insufficiently, then people is leaded wrong by that.»
東京都から届いた「おこめクーポン」は,アレルギー持ちは頼みにくく,ウェブは「申し込めない」地雷だらけ。そうなる原因を考察。
給使乖離現象 «"Server and User Design Gap" phenomenon (abbr: SUDG), it's the trend to lack of considerations in design for user of the service.»
愚かな経営者たちが考えた劣悪なウェブサービスにより,人々が一方的に不利益を被るという話。
日本の「IT 人材不足」の正体 «The simple reason why Japanese companies lack IT-skill.»
保険会社からのセキュリティガバガバメールが「IT 人材不足」の正体を暴く。

人気記事 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

現在当サイト人気 No.1!
Android のキーボード・ショートカット一覧 «The list of Android Keyboard Shortcuts (EN ready).»
Android のスマホやタブレットにキーボードをつないだ時に知っていると便利なキー操作。
[PDF 118KB] 生活保護申請時のオヤクショ対策
申請の「水際作戦」を突破するための心得。「ホームレス総合相談ネットワーク」製作の図解を小サイズ化したもの。

出典 ☞ 路上からもできるわたしの生活保護申請ガイド (2017 年版) (外部リンク)
文字ベース天気予報 «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.»
当サイトで開発/使用中の日本語向けに特化した軽量マークアップ言語

ご連絡 Contact

▼ メールフォームはこちら
SSL 証明書の更新に不具合が多いため,期限切れエラーが出た際は,お手数ですが「例外指定」をお願いいたします。 一時期,送信できなかったようです。すみません。今は大丈夫だと思います(テストは OK)。

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

MEMO / Email to the Author
あとで調べたい点のメモなどに利用可能。
下部ボタンでそのまま著者にメールできます。 一時期,送信できなかったようです。すみません。今は大丈夫だと思います(テストは OK)。


CAPTCHA: easy math prob in Japanese

時事川柳 News Senryu

パーティー券  
民意も一緒に
  蹴り返し
Kick back both party tickets and people's opinions.

 自民党の一部(?)派閥がパーティー券のノルマを上回る分の売上げを議員にキックバックしておきながら政治資金収支報告書に不記載だった問題が広がりを見せている。なるほど,こうしたことが党内で常套化していたのだとすれば,岸田総理はじめ同党政治家にことごとく「民意を蹴り返すクセ」が付いているのは当然という感じもする。これっぽっちも「悪いこと」と思わなかったのだろうな。そんな人たちに誰が票を入れるのだろうか。少なくとも,岸田の広島と「頭悪いねぇ」と暴言を吐いた議員を選出した長崎に「ふるさと納税」はしないことにしよう。
参考: 自民県 絶対しないぞ ふるさと税

今回はもう一句!

危機感の  
ワリに二階は
  誰も居ず
Having sense of crisis, but nobody takes shelter of 2F.

 大雨などで危機感を持ったら二階のような高い所へ避難すべき的な話を聞いたよーな気がするのだが? パーティー券のノルマ上回り分キックバックの政治資金収支報告書不記載問題で,安倍派は何人も辞任したのに,同じく捜索を受けている二階派に辞任する話があるかというと,今のところ誰もいない。総理は「危機感を持って」とか言っているらしいが,どこが「危機感」なのやら。

(⌚2023-12-19)

ご支援 Support this site.

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

この活動をご支援いただける方はこちらへ Could you support this site, see here (but Japanese).
都道府県庁さん, 地方自治体さんや教育委員会さん, 障害者就労支援機関さんやその他公的機関,省官庁さん, 「タダ見」しているだけでは, 格差が広がるだけだと思いませんか?
Welcome!
Amazon    Google
The companies, thanks for many accesses every months! Are the articles I wrote helping for increasing your income? Although, I cannot get even a penny and jobs from that.

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

● 概要

 画像ファイルには大きく別けて以下の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 2024.