11月29日18時まで、エックスサーバーで「独自ドメインプレゼントキャンペーン」!更新料金も無料!サーバー新規開設が条件です。

画像ファイルの種類 ~ おススメは.jpgと.png、使い分けと比較

画像ファイルの種類 ~ おススメは.jpgと.png、使い分けと比較
アイキャッチ画像は

DarkWorkXによるPixabayからの画像

この記事は「画像初心者の方」向けです。

エクセルのプロだけど画像を編集する機会はない、とか。

写真を撮るのは好きだけど編集したことは無い、という方は意外といらっしゃるかもしれません。

画像の扱いに関する記事の第一弾「画像ファイルの種類」についてです。

結論を先に申しますと、

ブログに使う画像ファイルは、.jpgと.pngがおススメ。

写真は.jpgそれ以外は.pngで保存すると良いです。

いくみ
いくみ

詳しくは、続きをお読みくださいませ。

画像ファイルの種類

ファイル名にはすべて、「拡張子」というのがついていて、それによって、ファイルの種類が分かるようになっています。拡張子はファイル名の末尾にある部分です。

例えば、ワードファイルなら.docx、エクセルのファイルなら.xlsxという「拡張子」がついています。

画像ファイルの拡張子にもイロイロありまして。主だったものは以下です。

  • .png
  • .jpg (.jpeg)
  • .gif
  • .bmp

これらがファイル名の末尾についていると、「画像ファイル」だと分かります。

いくみ
いくみ

ほんの一部です。ウィキペディアをご覧いただくと、スゴイ数あるのが分かります。

私のおススメは、「.png」と「.jpg(.jpeg)」です。(他の形式については説明を省きます。)

とても一般的なので、何かの機能やソフトウェア、ブラウザで「サポートされていない」っていうトラブルが起こりにくいからです。(.pngは、IE4.0より前のブラウザでは非表示になり、条件付きでIE6.0より前のブラウザでも非対応だそうですが、かなり古いバージョンなので、それらのブラウザが利用されている可能性は非常に低いです。「ブラウザ」はインターネットのサイトを表示してくれるソフトで、Safari、Edge、Internet Explorer(IE)、Chrome、Firefoxなどが主流です。)

画像圧縮のパンダ君サイトのサポート形式も、.pngと.jpgです。

そしてどちらも画質がキレイです。両方とも「フルカラーサポート」と言われています。表現できる色の種類が多いということです。

.jpegと.pngの使い分け

写真は.jpg

写真以外(スクリーンショットやイラスト)は.pngで保存しましょう。

注:.jpgは「透過」にすることができません。透過にしたい部分がある場合は、.pngを使います。

理由は、それぞれ、その方が画像ファイルの容量が少なくて済むからです。

見た目の違いは、イラストの方は分かる気がしますが、写真は違いがよく分かりません。

写真の場合 ~ 容量と見た目の比較

容量の比較 ~ 写真を.jpgと.pngで保存

全く同じ写真を.jpgと.pngで保存しました。

.jpgと.pngの容量の比較、写真の場合

ファイル名に(1)がついているのは「圧縮後」です。

.jpgのが小さい容量になっています。

いくみ
いくみ

いつもは.jpgファイルも圧縮できるのですが・・・。

圧縮サイトを使っても.jpgのサイズが変わっていないのは、チョット意味が分かりません★。

ただ、.pngが圧縮された後でも、.jpegの方が容量が小さいことは分かります。

見た目の比較 ~ 写真を.jpgと.pngで保存

.jpegと.pngの違い、分かりますか?どっちが.jpgだと思われますか?

jpeg pngの違いサンプル1、写真の場合
jpeg pngの違いサンプル1
jpeg pngの違いサンプル2、写真の場合
jpeg pngの違いサンプル2
いくみ
いくみ

正直、私は分かりません。

左が.pngで、右が.jpgです。

私の中では、「見た目的にはどっちでも良いけど、容量が小さくなるから、写真は断然.jpg」という感じです。

イラストの場合~ 容量と見た目の比較

容量の比較 ~ イラストを.jpgと.pngで保存

全く同じイラストを.jpegと.pngで保存しました。

.jpgと.pngの容量の比較、イラストの場合

ファイル名に(1)がついているのは「圧縮後」です。

.pngファイルのが小さい容量になっていますね。圧縮しても同じです。.pngは16KBから9KBに圧縮できました。.jpegは、このサンプルでも、圧縮しても変わりませんでした。普段は、.jpgも圧縮されるのですが★。何だろう・・・。

圧縮率も.pngの方が良いです。

見た目の比較 ~ イラストを.jpgと.pngで保存

イラストの方は、時々分かります。

(「大して変わらないな」と思うときのがほとんどですが★。)

下の2つ、どちらがpngでどちらがjpgだと思いますか?

jpeg pngの違いサンプル、イラストの場合
jpeg pngの違いサンプル1
jpeg pngの違いサンプル、イラストの場合
jpeg pngの違いサンプル2
いくみ
いくみ

同じでは・・・。

一応、左が.jpegで右が.pngです。あまり目立たないですが、「赤色」は特に、pngのが少し鮮やかにみえる気がします。

まぁでも、そんなに大きくは変わらない(と、私は思う)ので、間違えたりしても、問題ないです。笑。どっちみち表示はされますので。

ただ、容量はハッキリ違うので、やはり、おススメは、写真は.jpg、それ以外は.pngです。

実は、間違えてイラストを.png保存しなかった記事があります。直したいなと思いつつ、優先順位が低すぎてそのままになっています★。

おわりに

「文字入れをした写真」は、大部分が写真なので.jpgで保存しています。

編集し終わって、保存形式を選ぶところで、写真なら.jpg、それ以外は.pngを選択します。

よく調べると、.gifも「容量が小さい」というメリットから薦められていることもあるのですが、結構色味が落ちるなぁと思って特に触れませんでした。「GIFアニメーションを作れる」という強みもあるそうですので、そういうことに興味がある方は詳しく検索してみてくださいね。

いくみ
いくみ

画像についての基本情報をシリーズで書いてみようと思っています。

コメント

タイトルとURLをコピーしました