【実践編】Webパフォーマンスにお悩みの方へ、今から実践できるサイト高速化 「画像の拡張子について」

【実践編】Webパフォーマンスにお悩みの方へ、今から実践できるサイト高速化 「画像の拡張子について」

MATEREATE(マテリエイト)会社ロゴ

突然ですが、皆さんは鹿児島といえば何を想像しますか?

篤姫?西郷どん?黒豚?

地元民の私としては、なんと言っても鹿児島の象徴は「桜島」かと思っています。

県内のど真ん中に堂々と鎮座している活火山・・・。
よく県外から来られた方は、意味わからないぐらいの量の灰(ドカ灰)が降っていても平然と外を歩く鹿児島人に驚かれるようです(笑)

住めば都とはよく言ったものですね(^^;

活火山ですが、登山もできます。
興味有る方は是非!!

ということで、

【実践編】Webパフォーマンスにお悩みの方へ、今から実践できるサイト高速化
「画像の拡張子について」

についてお話していきます!

そもそも拡張子ってなんだい?

まず、拡張子とはファイル名の後ろにある3-4文字ぐらいの英語配列のことです。
ファイル名の後の.(ドット)で区切られている、後ろのやつです。

拡張子の役割としては、そのファイルが何のファイルなのかを教えてくれるものとなり、そのファイルは拡張子によって対応したアプリケーションで開くことができます。
Wordで作成した文書であれば「.doc」「.docx」、Excelで作成した文書であれば「.xls」「.xlsx」といった拡張子が付き、それらは(互換性のあるソフトを除きますが)WordまたはExcelでのみ開くことができますね。

今回はこの拡張子に焦点をあてていきたいと思います。

特に画像の拡張子は様々な種類があり、それぞれにメリット・デメリットも存在します。

この記事を読めば用途に合わせた画像の使い方がきっとマスターできると思いますので、ドヤってやりましょう!!

知っておきたい、ラスター(ビットマップ)画像とベクター(ベクトル)画像の特徴

画像の拡張子の説明に入る前に、まずはラスター(ビットマップ)画像とベクター(ベクトル)画像について抑えておきたいと思います。

ビットとベクトルとあることから、2つの画像の違いは「点(ビット)」で構成されたものか「線(ベクトル)」で構成されたものか、というところになります。
写真や図形、イラストなどの全ての画像データは必ずこのどちらかで構成されています。

構成のされ方が違うので、もちろん違いがいくつかあります。
それぞれの特徴について詳しく見ていきましょう!

ラスター(ビットマップ)画像とは

こちらは「点(ビット)」の集合により構築された画像となります。
主に写真やイラスト、絵画などはほとんどがこのラスター(ビットマップ)画像で表されています。

特徴としては以下の通りです。

ラスター(ビットマップ)画像の特徴
格子状の点の集まりで作られている。
点一つ一つに色や濃度、明るさなどの情報が与えられている。
一つ一つの点の集合なので、風景画や写真のような色が細かい画像でも表現できる。
拡大しすぎると、点の大きさの限界に到達してしまい画像が荒くなってしまう。
解像度やサイズの大きいラスター(ビットマップ)画像であれば、多少拡大してもそこまで荒くはならないが、その分容量が大きい。
ベクター画像より容量は基本的に大きい。
画像を編集するには、基本的に元の画像に上塗りをすることになる。

特徴を見ると、私たちにとってはより身近な画像でもあると感じられます。

例えば、ただの1本線が描かれた画像であっても、ラスター画像であるなら拡大しすぎるとギザギザに見えます。
たまにWebサイトを見ているときに、文字が不自然にぼやけている箇所があったりもしますが、それはラスター画像を拡大したものである可能性が高いかもしれません。

細かな表現ができることは大きなメリットですが、表示の仕方により劣化してしまう可能性が高いのがデメリットと言えるでしょう。

ベクター(ベクトル)画像とは

こちらは点と「線(ベクトル)」の集合により構築された画像となります。
より具体的に表すと、点と線の情報をコンピューターが数値化し、画面上に表示している画像となります。
ロゴや図形のように線と塗りだけで簡単に表される画像は、コンピューターにより簡単に数値化が出来るので、主にこのベクター画像が用いられます。

特徴としては以下の通りです。

ベクター(ベクトル)画像の特徴
点や線の集まりで作られている。
点や線、色や形にはその全てに複雑な計算式が与えられており、その計算によって表現される。
計算による表示となるので、複雑でないロゴやイラスト、単純な図形などの表現に適している。
コンピューターによる計算は、画像の拡大縮小の度に行われているので、拡大縮小による画像の劣化を気にすることはない。
複雑な計算式を用いるため、風景画や写真のような色や濃淡が複雑な画像の表現には膨大な計算量が必要となり、写真などのベクター化は現実的ではない。
データ容量は基本的に軽い。
画像の編集は数値の設定を変えるだけで可能。

こちらは、特徴だけ見るとラスター画像とりは少しイメージしにくいかなと思います。

ベクター画像であれば、画像を拡大しても特に画像が荒くなったりすることはありません。

拡大縮小による画像の劣化がおきないことは何事にも変えられない非常に重要なメリットかとは思いますが、写真など複雑な処理を必要としそうな画像に関しては基本的に表現できないことがデメリットとなります。
できたとしても、容量がすごいことになるかなと・・・(^^;

画像の拡張子によって、それぞれラスター(ビットマップ)画像なのかベクター(ベクトル)画像が決まっています。
殆どはラスター(ビットマップ)画像となりますが、詳しく見ていきましょう!

まとめ:画像にはラスター画像なのかベクター画像が存在し、それぞれにメリット・デメリットが存在する。

正直押さえるべき拡張子は4つだけ!jpeg?png?画像の拡張子の種類と違いとは

画像の拡張子には様々な種類があります。
以下は一部ではありますが、代表的な画像のファイルフォーマットとなります。

JPEG(ジェーペグ)
拡張子「.jpg」「.jpeg」「.JPG」「.JPEG」など

PNG(ピーエヌジー)
拡張子「.png」

SVG(エスブイジー)
拡張子「.svg」「.svgz」

WebP(ウェッピー))
拡張子「.webp

GIF(ジフ)
拡張子「.gif」

TIFF(ティフ)
拡張子「.tiff」

BMP(ビットマップ、ビーエムピー)
拡張子「.bmp」

まだまだありますが、よく耳にするのは以上でしょうか。
これらのファイルフォーマットの中で、上記で説明したベクター画像は「SVG」のみとなり、その他は全てビットマップ画像となります。

Webコーダーの方であれば、ひとまず上から4つまでを覚えておけば特に問題はないかと思います。
そのため、本記事では「JPEG」「PNG」「SVG」「WebP」について触れていきます。

次項目で拡張子毎にそれぞれの特徴を見ていきたいと思いますが、簡単に違いを説明すると・・・

「JPEG」「PNG」「WebP」はビットマップ画像となります。「SVG」はベクター画像なので、上記で説明した通りの特徴があります。

また「JPEG」「PNG」の違いは主に下記の通りとなります。

「JPEG」「PNG」の違い
非可逆圧縮か可逆圧縮か。
背景透過できるかできないか。
写真などの色数の多い画像(自然物など)に適しているか、図や塗りつぶし多いロゴ・イラスト・アイコンなどの画像(人工物)に適しているか。

詳しくは後述しますが、こんなもんです。

「WebP」はGoogle社が開発した「JPEG」「PNG」の有能ハイブリッド版だと思っていただければと思います。
しかしながら2021年7月現在はIEには対応しておりません。
通信量削減や表示速度向上も図られており、「JPEG」「PNG」の良いとこ取りをしているので、今後最もスタンダードとなる拡張子なのではないかと思います。

いずれは「WebP」のみに絞った記事も投稿いたしますが、一先ず、各拡張子のメリット・デメリットについて見ていきましょう!

まとめ:知っておくべきは「JPEG」「PNG」「SVG」「WebP」の4つ

それぞれの拡張子の特徴とメリットデメリットについて

各拡張子の特徴とメリット、デメリットについて述べていきます。

JPEG(ジェーペグ)

拡張子→「.jpg」「.jpeg」「.JPG」「.JPEG」

特徴・メリットとしては色数がフルカラー約1670万色を表現することができ、写真などに最も適した画像であるという点でしょう。
お手持ちのカメラなどで撮影した写真は基本的に「JPEG」が使用されています。

容量に関しても、場合によっては「PNG」を使用するよりも軽くなることがあり、圧縮率を1/5~1/30で指定し色と色の境い目を自然にぼやかし、圧縮して画像の容量を小さくすることもできます。

デメリットは「非可逆圧縮」という点にあります。
言葉は難しいですが、つまりは「圧縮してしまったJPEGは元に戻せない」ということです。
更にはサイズの変更や、上書き保存でも画質が劣化してしまうので、繰り返しの編集や加工を必要とするデータとしては向かないという点がデメリットかと思います。

他にも「PNG」と違って背景透過できない点が挙げられます。

しかしながら、上記でも申したように場合によっては「PNG」よりも相当容量が軽くなるので、使用の際は必要以上の編集やデータのやり取りを避け、画質の劣化を避けながら上手く利用すると良いでしょう!

PNG(ピーエヌジー)

拡張子→「.png」

特徴・メリットとしては「JPEG」とは違い、背景の透過が可能(または基本的に透過されている)という点でしょう。
例えば丸い形の写真。
白い背景に置いてしまえば、見た目では「JPEG」も同じ丸かもしれませんが、黒背景にしてみると・・・「JPEG」の方は実は四角形になっています(笑)

人物のみや、食べ物などの素材のみを切り抜いた写真をサイトで扱いたいときには「PNG」で間違いないでしょう!

他にも可逆圧縮である点が特徴となります。
言葉は難しいですが、何度も加工して編集しても、データの復元が可能なので、「JPEG」と違って画像の劣化はしないよと覚えておけば大丈夫でしょう!

デメリットは、使用する画像の種類によっては「JPEG」よりも容量が大きくなってしまうことでしょう。
「JPEG」と同じくフルカラー約1670万色が表現できますが、比較的単純な画像は得意とするところではあり、グラデーションがかかっていたり、風景写真のような色鮮やかな写真などは苦手としているところとなります。

写真の使用の際は基本的に「JPEG」を使用し、切り抜きなど背景透過したい画像の場合は「PNG」を使用する等、用途に合わせた使い方を心がけましょう!

判断が微妙な際は、「JPEG」「PNG」どちらも用意し、ファイルサイズを見比べるのが良いかもしれません!

SVG(エスブイジー)

拡張子→「.svg」「.svgz」

特徴・メリットとしてはやはり唯一の「ベクター画像」であるということでしょう。
「WebP」が主流になると思うと言いはしましたが、「JPEG」「PNG」が仮に廃れたとしても、「SVG」に取って代わるものはなかなか出てこないのではないでしょうか。
それほどに「ベクター画像」であること自体が大きな特徴であり、魅力であります。

上記でも説明しましたが、やはり画像を拡大しても画質が劣化しないという点が最強にして最大のメリットです。
それに容量も比較的小さいです。
さらに言えば、レスポンシブ時にも様々な大きさに対応が出来るので、別記事「【初級編】Webパフォーマンスにお悩みの方へ、今から実践できるサイト高速化「画像の取り扱いについて1」」で紹介したように、各端末に合わせた適切なサイズの画像を用意する、といった手間を省くこともできます。

これだけみるとかなり有用なフォーマットですが・・・。

デメリットはなんと言っても「写真のような複雑な色情報等が多い画像はSVGとして(ほぼ)利用できない」と言った点でしょう。
計算で処理をしているため、いくらコンピューターでもあまりに複雑すぎる処理には莫大な計算量を必要としてしまいます。

Instagramのアイコンは怪しいところです。グラデーションがかかっているので・・・。

基本的に単色のシンプルなアイコンやロゴには適していますが、心配であればSVGに変換した後にファイルサイズを見てみましょう。
大体は一桁KBぐらいの容量になるかと思いますので、仮に5桁KBぐらいの容量になっていたとしたら、SVGの使用は避けたほうがいいかもしれませんね。

WebP(ウェッピー)

拡張子→「.webp」

特徴・メリットとしては「JPEG」「PNG」のいいとこ取りハイブリッド版ということでしょう。
つまり、写真などの色鮮やかな画像であったとしても比較的画質を落とすことなく軽い容量で保存ができ、なおかつ背景透過も可能ということです。

Google社が開発しただけあって、ファイルサイズを小さくすることが前提とされており、「WebP」の使用でサイトのWebパフォーマンスを上げることが可能でもあります。
Google社自身はほぼ同等の画質で、「PNG」よりも約26%、 「JPEG」より約25〜34%軽くできると発表しています。

こちらのサイトのようなツールで画像変換できますので、変換前後の画質を見比べていただければと思います。

【SYNCER】サイトへ
【squoosh】サイトへ

特にこれといったデメリットはないようにも思いますが、挙げるとするならば、日に日に各ブラウザへの対応は完了していってはいますが、それでも100%対応とまでは行っていない点でしょう。
現在もIEには対応していない状態です。
そんな中でも、現代の先進的なサイト(楽天市場やWikipedia等にも)にはどんどん導入されていっているようです。

また、「JPEG」「PNG」のように手軽に編集することが難しく、現在では専用ソフトによる変換ぐらいにしか対応していない(既存のPhotoshopのような画像編集ソフトが専用プラグインの使用でないと対応できなかったりする)点もデメリットかと思います。

こちらの記事【極秘】ページ高速化でお悩みの方へ画像圧縮便利ツール紹介でも紹介した画像圧縮ツールには対応していない(かも?)ので、もしかしたら今現在でも場合によっては「JPEG」「PNG」のほうが同じぐらいの画質で容量を軽くすることもできるかもしれません。
まぁ、「WebP」への変換の際にクオリティも定めて圧縮できたりするので、さほど問題ではないかもですが(笑)

しかしながら、そんなデメリットは全て時間が解決してくれるでしょう!!!
対応ブラウザも確実に増えると思いますし、もっと手軽に編集・変換できる時代がきっとやってきます。

次世代のフォーマットとして、必ずしも抑えておきたいですね!

WebPの変換についても、必ずや別記事にてまとめていきますので、お楽しみに!

まとめ:各拡張子の特徴を理解し、適切な使用を!

画像拡張子の使い分けまとめ

簡単ですが、使い分けについてまとめます。

  • JPEG→色鮮やかな写真などに最適。
  • PNG→背景透過したいときは基本的にこれ。
  • SVG→ロゴやアイコンなどの単純な画像はこれ。
  • WebP→ファイル容量見比べながら、画像全般に積極的に利用してもいいんじゃないかと!

ほんとに簡潔ですが以上です。(笑)
しかしながら例外は必ずしも存在し、MATEREATEでも「JPEG」「PNG」どちらも用意した上で、ファイルサイズや実際にサイトに反映させた際の表示を見た上で、使用を判断することも多いです。

要検討しながらの適切な拡張子の画像使用で、Webパフォーマンスを上げていきましょう!

MATEREATEのサイトはどの程度の違いが出るのかを測りたかったため、現在は「WebP」を使用しておりません。
(現段階でもモバイル→93、PC→97とかスコアが出ますが笑)その内画像を「WebP」へ変換した後に、前後のスコアの検証も行いたいと思いますので、お楽しみに!

まとめ:Webパフォーマンスを突き詰めるのは楽しいね!!!

総括

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

画像の各拡張子について、一度整理してしまえばそこまで難しくもないと思います!
拡張子どうしようか迷われた際、最終的には、変換できるソフトなどで変換してしまって、ファイルサイズで見比べるという対応でも良いかと思います!

その際は必ずこちらの記事も参考にしてみてくださいね^^
【極秘】ページ高速化でお悩みの方へ画像圧縮便利ツール紹介

手間にはなるかと思いますが、適切な拡張子での構築、画像の最適化や整理を終えることができると、Webパフォーマンスにおいて思わぬ好成績を叩き出すこともできる可能性がありますので、是非お試しください!
よく分からなければご連絡いただければMATEREATEがお手伝いいたしますね(笑)

ではでは!