初心者ひつじjpeg、png、svgって、結局どう違ってどの場面で使えばいいの？
「jpeg、pngとsvgはなんとなく違うのは分かるけど、jpegとpngとは何が違うの？」
なんて思ったことはありませんか？
今回は、そんな方に向けてjpeg、png、svgの3種類の画像の特徴と違いについて解説していきます。
特に、Web制作やデザインを仕事や副業にしていく方にとっては、今回の知識は必見です。
粗い画質の画像を使ったり作ったりしてしまうと、クライアントの信頼を損ねてしまいかねませんからね。
この記事で、3種類の画像の違いをスラスラと言えるくらい理解しちゃってください。
それでは始めていきましょう！
jpegとは？
jpegとは、写真を高画質にできる非可逆圧縮性の形式のことです。
非可逆圧縮性というのは、一度圧縮してしまったら元に戻せない性質のことを言います。
この非可逆圧縮性を利用すると、画像のサイズを小さくできるのでサイト表示速度を速くすることができるんですね。
ちなみに、jpg表記でもjpeg形式でも特に意味に違いはありませんが、画像の拡張子では「jpg」、言葉の説明としては「jpeg」が使われる傾向にあります。
ラスター画像とは？
ラスター画像とは、ピクセルと呼ばれる小さな点の集合からできている形式の画像のことです。
今回扱っているjpegやpngはラスター画像に当たります。
逆に、svgなどはベクター画像と呼ばれ、画像を数値で表します。
よく画像のサイズで「横1,200px、縦600px」みたいな表示を見たり耳にすると思いますが
あれは、横方向にピクセルが1,200個、縦方向にピクセルが600個あるという意味です。
jpegのメリットとデメリット
jpegには、以下のようなメリットとデメリットがあります。
| メリット | デメリット |
|---|---|
| 写真やデジタルイラストなどに適している 画像の容量を軽くできる | 拡大・縮小すると劣化する 透過処理は行えない |
写真やデジタルイラストなどに適している
ラスター画像であるjpegは、色彩表現などに適しているため、写真やデジタルイラストとして使用するのに適しています。
これは、ラスター画像の1つ1つのピクセルが色の明るさや濃さなどの情報を持つためです。
1つ1つのピクセルが色の明るさや濃さなどの情報を持つため色彩表現が豊かになり、写真やデジタルイラストなどとして利用した方が使い勝手がいいということです。
画像の容量を軽くできる
jpegは、圧縮することによってファイルの容量を小さくすることができます。
これは、先述しましたがjpegが非可逆圧縮性を持っているからです。
非可逆圧縮では、人が認識できない（目に見えない）情報を捨てることによってサイズを軽くしているので
非可逆圧縮を行なっても、容量を小さくしても見た目に変化が生じない場合も多いです。
しかし、非可逆と言っている通り一度変換したら元には戻せませんし、見た目に変化が生じないと思って何回も圧縮してしまうと、画像が劣化してガビガビの状態になってしまうので注意しましょう。
拡大・縮小すると劣化する
この記事を見ているあなたも写真を一度は拡大してみたことがあると思いますが、拡大すればするほどぼやっとして
何を表現しているのかわからなくなってしまった経験はありませんか？
このようにラスター画像であるjpegを拡大したり縮小したりすると、劣化してしまうという特徴があります。
透過処理は行えない
jpegはpngと違い、透過処理を行うことができません。
なので、背景に馴染ませたい画像や写真がある場合は、png化することをお勧めします。
iLoveIMGなどのツールを使えば、無料で簡単にjpegをpngに変換することができます（テキストをクリックするとリンク先に飛びます。）
iLoveIMGでは、jpegをpngに変換するだけではなく、jpegをpdfに変換したりその逆もできたりと、あらゆる形式を別のそれに変換することができるサイトなので、覚えておいて損はないでしょう。
コーディングでの記述の仕方
jpeg画像を表示する際は、imgタグを利用して以下のような記述をします。
<img src="xxx.jpg" alt="jpeg画像">imgタグでは
・width
・height
・alt
この3つの要素は、基本的に付与する必要があります。
一般的なのは、widthとheightはCSSで当て、altはimgタグの中に入れることですが
3つともimgタグの中に入れることもできます。
<img src="xxx.jpg" width=200 height=300 alt="jpeg画像">ただし、widthとheightをimgタグの中に入れてしまうとその値が固定になってしまい、その後の調整が効きにくいので
CSSにて記述することをお勧めします。
pingとは？
pingとは、透過性がある可逆圧縮性のラスター画像の形式のことです。
主にイラストやロゴなどで使用されるのが特徴です。
可逆圧縮性というのは非可逆圧縮性の逆で、一度圧縮しても元に戻せるという意味。
その名の通り、pngは一度圧縮しても元に戻すことができる性質も持っています。
pngのメリットとデメリット
pngには、以下のようなメリットとデメリットがあります。
| メリット | デメリット |
|---|---|
| ロゴ画像などに適している 透過処理を行える | 容量が大きくなりやすい |
ロゴ画像などに適している
jpegはカメラなどで撮影した写真に適していましたが、逆にpngはイラストやロゴなどの作成に適しています。
イラストやロゴに適している理由は、先ほど話した「可逆圧縮性」により元に戻せることと
これからお話しする「透過処理」という、画像の背景を透明化できる機能を持っているからです。
透過処理を行える
pngでは透過処理を行えます。なので、対象物の周りを透明にして背景などを写すことも可能です。
通常の画像って、例えば白いキャンバスの真ん中にイラストが載っている画像を保存したら
中央のイラストだけでなく、周囲の白い背景も一緒に保存されますよね。
なので、その画像を青い背景の画像の中に入れても、こんな感じで画像の大きさだけ白い背景が表示されてしまいます。
しかし、透過処理を行えばイラストの周りは透過されるので、白い部分はなくなり、青い背景だけが反映されます。
上の画像は先ほどの画像と、りんごの大きさや青背景に対するりんごの位置（中央に配置されている）なども全く一緒で、透過処理を行ったか行っていないかの違いしかありませんが
透過しているので、あたかも青い背景にりんごのイラストを載せているようですね。
こんな感じで、pngは透過処理を行うことができるので
Webサイト制作において、既に背景色がついているセクションなどに画像を当てても
対象物だけくっきりと載せることができます。
容量が大きくなりやすい
pngは、jpegと比べるとどうしてもファイルサイズが大きくなりやすいです。
jpegは非可逆圧縮でいらない情報をどんどん削ぎ落とすことができますが、pngではそれができないからですね。
なので、サイト内でpng画像を使いすぎると、サイトや該当ページの読み込み速度が遅くなってしまうことがあります。
これはSEO的にもあまり良くないので、画像が使えないくらいに劣化が激しい状態でなければ、jpegで代用するなどの策を取る必要があります。
また、サイト速度を軽量化するにはpngの画像をGoogleが開発した画像形式であるWebp形式に変換することも有効です。
jpegやpngをWebpに変換する方法とその確かめ方については、下の記事を参考にしてください。
コーディングでの記述の仕方
ping画像も、jpeg画像と同じようにimgタグで記載をすることができます。
<img src="yyy.png" alt="ping画像">pngに関しても基本的にwidthとheight、altの要素を付けてあげることはjpegと一緒です。
svgとは？
svgとは、Scalable Vector Graphicsの略で、画像の大きさを自由に変えることができる画像形式のことです。
名称にVectorと入っている通り、svgはベクター画像の分類になります。
ベクター画像とは？
ベクター画像とは、ピクセルではなく数値で大きさを表現する画像のことです。
ベクター画像は、拡大・縮小をした際には計算をし直すので画像が劣化しないという特徴があります。
svgのメリット・デメリット
svgのメリット・デメリットは次のようなものになります。
| メリット | デメリット |
|---|---|
| 拡大•縮小しても劣化しない 一般的な画像形式より軽い | 写真やデジタルイラストなどは苦手 |
拡大・縮小しても劣化しない
svgはベクター画像なので、どれだけ画像を拡大したり縮小しても劣化しないのが特徴です。
ベクター形式の画像は、大きさを指定するのではなく、座標などのデータをもとに位置関係を決定しています。
位置関係を変更することに伴って、大きさも変化するのでどれだけ拡大・縮小しても画像が劣化することがないのです。
一般的な画像形式より軽い
svgは、jpegやpngなどの一般的な画像データより容量が小さいことが多いです。
これは、svgがテキストデータで構成されているから。
その証拠に、svgはMacに標準で搭載されているテキストエディタなどのアプリケーションで開くことができます。
jpegやpngと比べて、数十分の一の容量しかないこともあるので
pngで表示しているアイコンなどをsvgに置き換えられるのなら、置き換えた方がサイトが軽くなる可能性があります。
写真やデジタルイラストなどは苦手
ラスター画像は、1つ1つのピクセルに色の明るさや濃さを持つため写真やデジタルイラストなどに適していましたが
対してベクター画像は、写真やデジタルイラストなどの表現は苦手です。
これは、色の明るさや濃さの情報量が多すぎてしまって数値が複雑で、計算量が膨大になってしまうためです。
ベクター画像が得意なのは、アイコンやロゴなどの単純な図形で表せるものです。
コーディングでの記述の仕方
svgをコーディングで記述する方法は、2つあります。
1つ目は、jpeg画像、ping画像と同じようにimgタグで記載する方法です。
<img src="zzz.svg" alt="svg画像">2つ目は、同じようにHTML内に記述しますが
svgタグを利用する方法です。
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
初心者たぬきなるほどポン！でも、何が違うポン？
わい後者の記述方法だと、ホバーをした時などに色の変更をつけたりできるよ！
「前者と後者で何が違うの？」と思うかもしれませんが、前者ではアイコンなどをsvgで指定した時に色を変えたりホバーでの変化を加えることができません。
しかし、後者のsvgタグで記載することで、そのような変化をアイコンにつけることができます。
まとめ
ということで、今回はjpegやpng、svgの違いについて解説してきましたが、いかがでしたでしょうか？
・jpegは写真やデジタルイラストに適しているが、拡大・縮小すると劣化する
・pngはイラストやロゴに適しており、透過処理などが行える
・svgは写真やデジタルイラストは苦手だが、拡大・縮小しても画像が劣化しない
という感じでしたね。
今回の記事の内容を踏まえて、上手に3つの画像形式を使い分けるようにしてみてください。
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
わい記事をSNSで拡散すると、有益な投稿をするアカウントだと思われ
フォロー数やいいね数が増えるかもしれないよ！
＼ 最新情報をチェック ／
コメント