画像ファイルの拡張子と特徴まとめ【圧縮&変換に便利なサイト5選!】

Webデザイン
ユキックス
ユキックス

こんにちは!ユキックス(@MILKIT_DESIGN)です!

WebサイトやSNSなどの投稿に画像を掲載する時、どの画像ファイル形式(拡張子)が最適か迷った経験はありませんか?

ユキックス

画像ファイルのデータは主に「.jpg」や「.png」、または「.gif」「.webp」「.svg」などの拡張子が指定されています。

ユキックス

ファイル形式や拡張子の違いを知らないまま使用すると画質が劣化して画像がぼやけて表示されたり画像ファイルが壊れて開けなくなったりデータ容量が重くなって表示速度が遅くなる原因になる、などの問題が発生する可能性があります。

今回は拡張子の種類と特徴、適切な使用例や注意点と、すぐに使える画像を軽量化するのに有効なお薦めツールをまとめました。画像の拡張子に迷った時の参考になれば幸いです!

拡張子とは?

  • ファイルの種類を識別するための、2~4文字程度の文字列
  • ファイル形式の種類としてファイル名の終わり「.」以降に付く
  • 画像の拡張子の種類は主に「.jpg(.jpeg)」「.png」「.gif」「.webp」が多い
  • 上記の他「.svg」「.tif(.tiff)」「RAW」「.bmp」など、他多数の拡張子がある
  • 拡張子の他、画像ファイル、画像フォーマット、ファイル形式、などと呼ばれることもある
  • 画像データを表示したり、圧縮するためのもの

JPG(ジェイペグ)

.jpg(.jpeg)について

  • フルカラーで(約1670万色まで)表現できるため、色の種類が多い画像に適している
  • 大きな画像を小さなサイズに圧縮できる
    • 非可逆圧縮※(不可逆圧縮)の画像形式であるため画質が劣化する
    • 画像の目に見えない程の色差異をカットする(色情報から人の目では違いがわかりにくい程度にデータを切り捨てる)ことで情報量を圧縮し、従来よりも軽い容量で保存される
  • 保存するたびに画質が劣化!サイズを変えたり上書き保存をするだけでも画質が劣化する
  • 低解像度で保存すると元の画質に戻せない
  • 色の透過はできない
  • ビットマップ形式
  • デジタルカメラやスマートフォンの写真などは概ね、このファイル形式
  • 画像圧縮率を1/5~1/30の範囲に指定して保存できる
  • Joint Photographic Experts Groupの略
  • 静止画像データの圧縮方式で、BMP、GIFの次に規格された拡張子
  • .jpgの他、.jpeg、.JPG、.JPEGなど多数の表記がある

※非可逆圧縮(不可逆式圧縮)とは

一度データを圧縮すると圧縮前のデータは切り捨てられるため、圧縮前の元データの画質には戻せず復元できなくなる圧縮方法

※透過とは

画像の背景などを透明色に表示すること

※ビットマップ形式(bitmap graphics)とは

ピクセルという色情報がついた正方形の点の集まりで構成している画像です。点状の画素の集合で描かれているため画質は解像度(一定の長さに存在する画素数の密度)で決まります。写真など色数の多い画像でも一点ごとに色を微妙に変化させて細やかな色彩を表現できます

そのためグラデーションや複雑な色の写真などにも適しています。色数が多く繊細な画像はピクセル数も多く画質が良い分、容量は大きくなります拡大・縮小が多い場合、ビットマップでは画像が荒れる可能性が大きいです。画像を拡大すると足りないピクセルを補完するために曲線や斜め線の部分で輪郭の点がギザギザ(ノイズ)が発生し目立ったりぼやけたりします。

Webサイトに用いられる写真画像の多くはビットマップ形式で一般的な画像ファイル形式であるJPGやPNG、GIFなどが該当します。主に画像編集が行われる代表的なものにAdobe Photoshop(フォトショップ)などがあり、書き出されたデータはラスタ画像と呼ばれることもあります。

○ .jpgに向いているもの

  • 写真など色数の多いもの、背景写真、自然物
  • 色鮮やかな画像
  • グラデーションや色が細かく変化する写真など
  • 複数回の保存や加工を行わないもの

△ .jpgに向いていないもの

  • ロゴやイラスト、文字など、シャープな線を含む画像
    → 粗い仕上がり、ぼやけ、ノイズが発生しやすい
  • 色数の少ないデータ
    → 保存すると他のファイル形式よりも容量が大きくなりやすい
  • 色の透過が必要なもの
    → どんな画像も四角形の画像として表示される
  • 画像加工や保存を複数回行うもの
    → 画像はやや重くなりますが拡張子を .pngにすることで.jpgよりも劣化が抑えられる
  • .jpgは再現性がやや弱い色がありくすみやすいため.pngを選んで保存する場合もある

ユキックス

ファイルサイズや画質を変更(リサイズ)・加工する場合は、元の画像データを保管した上で別ファイルで加工や保存を行うことを強くおすすめします!

ユキックス

ちなみに、.jpgは新規保存、上書き保存や別名で保存した場合は画像が劣化しますが、コピーするだけであれば劣化しません

PNG(ピング)

milkitdesign.jp

.pngについて

  • 256色からフルカラーまで色を幅広く表現できる
  • 色の透過が可能
  • ビットマップ形式
  • 可逆圧縮※(可逆式圧縮)の画像形式であるため低画質で保存しても元の画質に戻すことができて画質が著しく劣化しないのが特徴
  • Portable Network Graphicsの略
    • GIFが特許問題によって自由に利用できなくなった1995〜1996年、Unisys社が特許を持っていたGIFに代わる新しいファイル形式として、World Wide Web Consortium(W3C)によって開発された画像ファイル形式
  • PNGという名前は、”Png is Not Gif”という意味も込められている
  • JPEGに比べてフルカラーにした時のデータ容量が重くなりやすいため使い分けの判断が必要
  • GIFのようなアニメーションは作れない

※可逆圧縮(可逆式圧縮)とは

圧縮しても画質が劣化せず、データを復元する際に元通りに再現することができるよう圧縮前との色の差異が整理される圧縮方法

○ .pngに向いているもの

  • イラスト図版
  • ロゴ
  • 人工物
  • 文字や図が含まれる画像
  • 写真以外で色数の多いもの
  • 写真によっては(色数が少ない、直線的な部分が多いなど).pngが適している場合もある

△ .pngに向いていないもの

  • 写真 → 完全に不向きではないが画像の容量がjpgと比べたときに大きく重くなりやすい

ユキックス

画像の加工を繰り返す場合はPNGで保存すると良いですね!画像の見た目がほぼ変わらない場合、Webサイトで使用するのであればより軽いファイルサイズの拡張子を選択するなど、適切な判断が大切です。

ユキックス

画像ファイルのサイズが重いと画像の転送量が増えてサーバーに膨大な負担がかかって表示が遅くなるなどページの表示速度に影響する可能性があるので、画像のファイルサイズ(大きさ・重さ)には特に注意が必要です。

画像圧縮のお薦めツール(無料)のご紹介!

▼ わたしは制作の時、Webに使用する画像は.jpg、.png共に、この画像圧縮ツールを使用して画像を軽くしています!(有名なツールなのでご存知の方も多いと思いますが、ぜひ知って欲しいのでご紹介!)

https://tinypng.com/

とても便利なので、ブックマークをお薦めします!画像の容量に制限があるバナーなどにも有効です。
(画像を軽くする=パンダに画像を喰わせる‥と、ごく一部では言われています!パンダ、怖かわいい!笑)

GIF(ジフ)

milkitdesign.jp

.gifについて

  • アニメーションを作ることができる
  • 最大で256色とJPEGに比べ表現できる色は圧倒的に少ない
  • フルカラー画像から圧縮すると元に戻すことができない
  • CMYKのカラーモードが使えない(RGBのみ対応している)
  • 色の透過が可能
  • Graphics Interchange Formatの略
    • 「ギフ」と呼ばれる場合もありますが、設計者であるSteve Wilhite氏のインタビューでは「ジフ」が正しい発音であることが発表されている
    • 以前Unisys社が特許を持っていたことにより権利問題があったが現在は特許が失効しており自由に使うことができる
    • 元々BMPという拡張子が主に使われていたが回線速度が速くなかったため画像の容量を減らすために作られた拡張子
    • 何度か規格が作り直されており、「GIF87」、「GIF87a」、「GIF89a」3種類の形式が存在する
  • ビットマップ形式
  • 可逆圧縮(可逆式圧縮)の画像形式であるため.gifの最大256色の表現で保存されると画像の劣化が起きない
  • 一度にすべてのデータを転送せず、少しずつデータを転送して最後まで画像が表示されるインターレースに対応しているため回線に負荷をかけず軽い

○ gifに向いているもの

  • アニメーションする画像
  • シンプルな画像
  • 単色が多い画像

△ gifに向いていないもの

  • アニメーション以外 表現できる色が少ないため.png(または.jpg)が適している場合が多い
  • 写真 → 表現できる色が最大256色と少ないため劣化する(色数が少なければあまり気にならない)
  • グラデーションや色数の多いもの → 表現できる色が最大256色と少ないため劣化した表現になる

ユキックス

実際のところ、gifはアニメーションする画像でしかほぼ使っていないのですが、使い方によってはとても効果的な表現ができたり、静止画像には出せない魅力を引き立たせてくれます!

メインビジュアルにgifが効果的に使われているこちらのサイト、個人的にとてもスキです!おさかなピチピチが特に‥♡

https://oyogetaiyaki.com/
ユキックス

gifは動画と違って軽いのがメリットで、パラパラ漫画のように複数枚の画像をつないで生成されるイメージです!

gifアニメーション生成、お薦めツール(無料)のご紹介!

▼ わたしがよく使っている、gifアニメーションが簡単に生成できるツールです。

https://www.bannerkoubou.com/anime/

よろしければお試しください!

WebP(ウエッピー)

.webpについて

  • 画像のサイズを小さく軽く圧縮できる
    • PNG使用時と比べると約26%程度小さくなる
    • JPG使用時と比べると25〜35%程度小さくなる、と言われている
  • 256色からフルカラーまで色を幅広く表現できる
  • 表示速度が速い
  • アニメーション表示も可能
    • GIFのように256色でのアニメーションを作成できる
  • 背景透過できる
    • 透過は可逆圧縮と非可逆圧縮を選択できる
  • Google社が開発したWebに対応している画像ファイル形式
  • WebPへの変換はWebP変換用アプリケーションなどで変換する必要があり、現時点ではAdobeのアプリケーションではWebPでの書き出しに対応していない

ユキックス

Webpは従来のファイル形式に取って代わるべく作成されただけあり、背景透過やアニメーションに可逆圧縮などPNG、GIF、JPGそれぞれのメリットが生かされている拡張子ですね!

(余談ですが、ウエッピーって発音がキャッチーでとてもスキです!ウェッピー言いたい。)

AdobeなどのアプリケーションでもWebpの書き出しがデフォルトで対応する時が待ち遠しいです!(2021年9月現在ではPhotoshopからプラグインを使用することでWebpの書き出しが可能な他、WebP変換用アプリケーションなどのツールを使用する必要があります。)

ユキックス

主要Webブラウザでは急速にWebPへの対応が広がりグローバルではすでに95%のブラウザが対応しています。

https://caniuse.com/webp

(日本国内に限るとこの数値よりもWebPへの対応普及はまだまだなのではないかと思われます。)

一部のIEや古いバージョンのMacOS、iOSでWebPが依然非対応となってるため、現時点では非対応ブラウザに対しては従来の画像形式(JPEG、PNG、GIF)を出し分ける必要があり、画像表示を考慮したHTMLの記述が必要です。

JPEG、PNG、GIFからWebpへの変換、お薦めツール(無料)のご紹介!

▼ わたしがよく使っている、JPEG、PNG、GIFからWebpに変換できるサイトです。

https://saruwakakun.com/tools/png-jpeg-to-webp/

サルワカさんが提供されおります!!

▼ こちらは画像品質、サイズ、色数、圧縮率などを細かく調整してWebpに変換できます。

https://squoosh.app/


SVG(エスブイジー)

.svgについて

  • どんなに拡大してもきれいな線を保持し、拡大・縮小しても画質が劣化しない
  • 容量が小さく軽い
  • 色の透過が可能
  • レスポンシブ対応可能(スマートフォンサイトなどで画像サイズを可変させて任意のサイズに表示)
  • JPG、PNGなどのビットマップ形式で保存するとSVGに戻せない
  • Scalable Vector Graphicsの略
  • ベクター形式
  • 画像でありながらマークアップ言語で記述されるテキストデータのため、CSS上で画像データの数値を変えるなどブラウザ上で色やサイズを変更できる
  • ブラウザ上で取り扱う場合、SVGコード(マークアップ・CSSの実装や数値)の知識が必要になる

※ベクター形式(Vector graphics)とは

画像の直線や点と点を結ぶ曲線、色などが数値化して数式で表現された画像として描かれています。数式で画像を再現して表示するために画像を拡大・縮小しても画質は劣化しません。Webサイトで使用しているロゴや文字、イラスト、図版などに適しており、複雑な写真や風景などには向いていません

主にベクター画像編集が行われる代表的なものにはAdobeのIllustrator(イラストレーター)などがあります。色数が多く、輪郭がはっきりしていない微細な画像を数式で表す場合、元の写真データ以上の大きな容量になってしまう可能性があります。

○ .svgに向いているもの

  • アイコン
  • ロゴ
  • 色数の少ないシンプルなイラスト
  • グラフなど複雑ではない図版

△ .svgに向いていないもの

  • 写真 → 画像の容量が大きく重くなる
  • グラデーションや色数の多い複雑なもの → 数値が複雑になるため容量が重くなる
  • ブラウザ上で取り扱う場合、SVGコード(CSSの実装や数値)の知識が必要に

TIFF(ティフ)

.tif(.tiff)について

  • Webでは表示されず、使用できない形式
  • フルカラーで(約1670万色)表現できる
  • 画像解像度が高い
  • 画質を劣化させることなく編集・印刷できる
  • 印刷を想定した写真の拡張子で使用されることがある
  • データが非常に重い
  • 無圧縮のため画像ファイルのサイズを小さくできない
  • Tagged Image File Formatの略
  • 1986年、異なったパソコンやOS上にある画像ファイルの互換性を高めるためにMicrosoftとAldus(現Adobe Systems)によって開発された
  • ビットマップ形式
  • スキャナから読み込んだ画像など編集や圧縮をせず保存したい場合に使用されることが多い
  • マルチページファイルとして画像ファイルの先頭にタグを付けて、複数の画像をひとつのファイルとして圧縮せず保存、格納できるためデータの属性が分かりやすい

ユキックス

TIFFの拡張子はWeb上で表示されないので、TIFFファイルの画像をWebで使用する際は.jpgなどの画像ファイル形式に変換する必要があります。

TIFFファイル変換、お薦めツール(無料)のご紹介!

▼ わたしがよく使っている、TIFFファイルをjpgに変換できるツールです。

https://tiff2jpg.com/ja/

必要な時にぜひお試しください!

RAW(ロー)

RAWについて

  • Webでは使用できない形式(画像が閲覧できるソフトが限られているため変換する必要がある)
  • JPEGが約1670万色に対して、RAWは約6870万色と圧倒的な色の表現
  • RAW画像は、LightroomやPhotoshopなど専用ツールがないと閲覧できない
  • JPEGなど閲覧できる状態に専用ツールで変換する手間がかかる
  • ファイルサイズがものすごく大きくて重い
  • Raw Image Formatの略
  • 主に一眼レフカメラの高画質・解像度データの保存に使われる
    • 身近なデジタルカメラなどの通常設定はJPEG保存される場合が多い
  • RAW画像は、生データとも呼ばれる

BMP(ビットマップ/ビーエムピー)

.bmpについて

  • Webでは使用できない形式(別の拡張子に取って代わられ、Macがメインユーザーであるわたしは現在は目にすることがほぼなく、Windowsでも頻度が低い、とお仕事の現場で感じている)
  • CMYKのカラーモードが使えない(RGBのみ対応しているため印刷時は変換と校正が必須)
  • 約1670万色から256色まで表現できる
  • 背景を透過できない
  • Microsoft Windows Bitmap Imageの略
  • 非圧縮(圧縮できない)画像のため、画質が劣化しない
  • 無圧縮でファイルが作られるためTIFFと同様、容量が大きくデータが重い
  • Microsoft Windowsに対応するために作られた画像形式

まとめ

この他にも画像に関わる拡張子はたくさんありますが、今回はよく使われている拡張子、実務経験の中に頻回登場する主要な拡張子についてまとめました。

重い画像がページ内にあると、ページ表示に時間がかかりユーザーの離脱につながるだけでなく容量(ギガ)も消費します。

ユキックス

Webのビジュアルに魅力を訴求することができる画像は用途に合わせて拡張子を柔軟に選択し、美しく、軽くすることがユーザーにとってもサーバーにとっても優しいですね!

拡張子の特性を理解したうえで、最適な拡張子を選択する一助になれば、うれしいです。

執筆者はユキックスでした!

ご依頼・ご相談はこちら

お客様の課題解決に最適なメンバーアサインでスムーズなプロジェクト進行をいたします。制作して終わりではなく、お客様が求める成果に結びつくご提案をさせていただきます。

この記事がシェアできます

この記事を書いた人
ユキックス

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

ユキックス
デザイナー / アートディレクター / Web制作クリエイター

Web制作を主軸にデザイナー・アートディレクターとして柔軟に国内の企業、商業デザインのクリエイティブ制作、ディレクションに携わり、受託制作や業務委託を中心に個人、制作パートナー、クリエイティブチームで協業し、幅広くクリエイティブデザインを制作しています。

  • Wepotについて

    アイコン

    Wepotはデジタルクリエイティブで課題を抱えるすべての人への解決策を提示できます。

  • 実績一覧

    アイコン

    Wepotには多種多様な実績があります。メンバーの強みが生きた実績をご覧ください。

  • 制作のご相談

    アイコン

    現在の課題やお悩みをお聞かせください。あなただけのクリエイティブチームを編成し解決へと導きます。