キホンのパソコン

<初心者>画像ファイル形式の説明と一覧<pngとは?svgとは?>

こんにちは、じゃがばた・ともこです。

今回は初心者向けに、画像ファイル形式をテーマにします。

  • jpegやpng、svgなど主なファイル形式について
  • gif動画に変換してみる
  • iphoneでみる、HEIF形式

これらのことを、なるべくわかりやすくご紹介したいと思います。

よろしくお願いします😁

ファイル形式の確認

もしファイル形式が表示されないようでしたら、表示させてみてください。

Mac

①「Finder」を開く
② 画面上のメニュー「Finder」から「環境設定」
③「すべてのファイル名拡張子を表示」にチェック

Windows

① 画面一番下のタスクバーにあるフォルダアイコンをクリック
②「表示」タブをクリック
③「ファイル名拡張子」のチェックボックスにチェックを入れる

表示されていなかった方は、見れるようになりましたか?

「ファイル名.〇〇」という形式になっていると思います。

よく見る画像ファイル

比較的よくみる画像ファイル形式をピックアップして一覧にしてみました。

かなーり簡単に、特徴について。

.jpg/jpeg デジカメやWebのデータ保存、プリントしたりメールで送る
.png 背景を透過できるので、画像を重ねるように表示させることができる
.gif 256色のデータに対応、 画像を繋いで簡単なアニメーションが作れる
.svg データが小さめ。拡大しても綺麗に表示される
.tif/.tiff 印刷物で広く使われている汎用的な形式、データが大きい
.bmp Windowsの標準画像ファイル形式
.heif 主にiphoneで撮影した画像の保存形式、高い圧縮率がある
.ai Adobe illustratorの固有形式
.psd adobe photoshop の固有形式

JPEG

「JPEG」画像ってよくみますよね。

実は「JPEG」は圧縮してある画像ファイルです。

圧縮してあるということは、そのぶんデータも小さいです。

そして圧縮したものは、戻すことができない「非可逆圧縮」の形式になります。

じゃがばたさん
じゃがばたさん
画像の保存を繰り返すと、知らず知らずに少しづつ劣化していくよ。

劣化を防ぐ方法はありますが、「jpegは保存を繰り返すと劣化していく」という特徴をもった形式です

JPEGはフルカラーを扱えます。

緻密なところまで表現したいような、たくさんの色情報を持った画像などにも向いています。

フルカラーについては、こちらでも簡単に書いています。

PNG

こちらもよくみるフルカラーの形式です。

「ピング」って呼んだりします。

PNGがJPEGと違うところは「可逆圧縮」という方式で、保存を繰り返しても劣化しません。

背景を透過できるので、背景のない画像が作れることで有名です。

PNGは、Macの「プレビュー」でも簡単にPNG画像を作ることができます。

じゃがばたさん
じゃがばたさん
じゃがばたさんの画像もPNGだよ!背景を透過しているよ

SVG

SVGって聞き慣れない方も多いのではないでしょうか?

SVGは256色のカラーに対応しており、「Scalable Vector Graphics」といって、ベクター形式のファイルです。

ベクター形式

最初はベクターってなにそれ?人の名前?

って感じでしたが、どうやらそうではないらしい。

ベクター形式とは、画像を座標などの計算式などで表現しています。

う〜ん、それでもなんだかよくわからない。

あるじゃがばたさんのイラストの、ファイルの中身を一部みてみました。

このイラストを描画するのに、こんなふうになっているんですね。

じゃがばたさん
じゃがばたさん
アイコンなどのシンプルな画像ならいいけど、きれいな風景画像なんてすごいデータ量になりそうですね!

このように数値化して表現しているので画像の劣化がなく拡大・縮小しても綺麗に見えるという特徴があります。

SVG画像は、アイコンなどやイラストにも多く使われています。

アイコンを無料でダウンロードできる下記のサイトで、たくさんのSVGアイコンを見れます。

微細なグラデーションなどを表現する写真画像などは、JPEGなどのラスター形式が向いているといわれています。

ラスター形式

ベクター形式のお話がでてきたので、「ラスター形式」のお話も

ラスター形式は「ビットマップ画像」とも言われていて、ひとつひとつの点(pixel)で色の濃淡を表現しています。

よくカメラに「何万画素」なんてありますが、それは点(pixel)数のことを表してるんですね。

じゃがばたさん
じゃがばたさん
最初の画像ファイル一覧にある、jpeg,png,tiff,gif,bumpはラスター形式だよ。

ラスター形式は、ベクター形式と違ってアップにしたりするとモザイク状になります。

それは、点(pixel)格子状に並んでいるからです。

点(pixel)とは、Webやディスプレイなどのデジタル機器で表現できる最小単位のことです。

GIF

わたしは長いことjpegぐらいしか知らなかったのですが、gifやsvgってあまりパソコンなどをしない方には聞き慣れないんじゃないでしょうか。

gifは256色を表現できます。ラスター形式で可逆圧縮方式です。

「可逆圧縮方式」は、保存を繰り返しても劣化することがない形式でしたね。

圧縮画像もPNGより軽く、透過できるという特徴があります。

このgifですが、結構身近なところで使われていて非常におもしろいので実験してみました。

iPhone

iPhone6sぐらいから「live Photos」というカメラ機能が搭載されました。

写真を撮ると、左上に「live」と表示されますよね。

前後1.5秒間をショートムービーとして保存できる機能です。

「ループ」「バウンス」「長時間露光」の3つのエフェクト効果を選ぶことができます。

なんだかパラパラ漫画のようなアニメーションでgifっぽいです。

live Photosのショートムービーをgifに変換

しかし、「live Photos」で撮影した動画を自分のMacbookに送ってみると、gif形式ではなくてMacの標準動画形式である「.mov」で保存されていました。

「gifに変換しても見え方変わんないよね?」

と思ったんですが・・・

どうやら外部サイトだけでなく、Mac標準アプリ「kyenote 」でgifに変換できるらしい。

こちらの素晴らしいサイトで見つけました。

ご興味がある方はチェックしてみてください😁

外部サイトで変換してみたい場合は、Macの画像形式にも対応しているAdobeのサイトもおすすめです(登録必要)

そして変換してみたgif画像はこんな感じ。

「ループ」を選びました。

普通に撮った動画をgifに変換

今度はiphoneの「動画」で撮影した動画を、gifに変換。

gifに変換する前とでは、滑らかさが大きくちがいます。

画質も変換前の方が、いつものなめらかで綺麗な動画でした。

だいぽん
だいぽん
変換できるサイトがあるから、いろいろためしてみると面白いね!

live Photosの無効化

「自分は写真1枚だけ撮ってくれればいいから、いらない!」という場合は、カメラを起動します。

上部左にフラッシュのオン・オフを設定する雷マークがあるのですが、その右に◎マークがあると思います。

それをクリックして、斜線を表示させればオフになります。

HEIF

「ヒーフ」と呼びます。

iPhoneは画像形式を「互換性優位のJPEG」か「高効率のHEIF」を選択することができます。(カメラの設定→フォーマットでできます。)

heif形式なのを知らずにお友達と共有したら、お友達のWindowsでは見れなかった・・・

ということがありました。

「HEIF」とは、「High Efficiency Image File Format」の略です。

JPEGやPNGよりも高い圧縮率なので、データが軽くしかも高画質です。
「可逆圧縮」なので画像が劣化しないという特徴があります。
しかも、約10億の色数が表現可能だそうです。

10億色って・・・

それを表現できる機器を持っていればってことですよね😁

TIFF

「ティフ」と読みます。

一眼レフカメラをやっている方はよくご存知かもしれません。

結構古くからあるファイル形式で、印刷物などに使用されます。

圧縮できますが、高画質のまま保存することが多いです。

じゃがばたさん
じゃがばたさん
ちょっと前までは、一眼レフで撮った写真をTIFFで保存すると、すぐにいっぱいになってしまいましたが、今は64Gのメモリーカードも売ってる時代になりましたね。

最後に

いかがでしたでしょうか?

パソコン初心者の方も基本的なことを知っておくだけで、より楽しくなります😁

画像などはMacだと「プレビュー」で簡単に形式を変更できます。(「プレビュー」はすごいです!)

たくさんいじってみることをおすすめします。

パソコン作業は疲れますので、適度に休みながらやってくださいね。

楽しいパソコンライフを♬

COMMENT

メールアドレスが公開されることはありません。