2019年1月20日日曜日

ブログ・サイトに載せる画像は「スクショならpng」「写真ならjpeg」

フリー写真素材ぱくたそ


こんにちは。


皆さん、ブログ・サイトに載せる画像の形式って、どうしていますか?


中には、画像の形式をうまく使い分けている人もいるかもしれませんが、一方で、画像の形式なんかあまり気にしない人もいるでしょう。


ここでは、画像の形式についてあまり考えていなかった方向けに、話を進めていきます。


画像の形式とは



画像をはじめとし、動画ファイルや音声ファイルには、それぞれ違った拡張子が付いていますよね。

「img01.png」「img01.jpg」「img01.gif」「img01.bmp」

「movie01.avi」「movie01.mp4」「movie01.wmv」

「audio01.wav」「audio01.mp3」「audio01.wma」

などなど。
他にもたくさんあります。


ファイルの拡張子は、そのファイルの形式を表しています。


今回は、画像に絞って書いていきます。


画像ファイルの種類には、次のようなものがあります。

  • jpg
  • png
  • bmp
  • gif
  • tif
  • svg
  • EPS


だいたいこんなもんです。


そんな中でも、今回は、Web上でよく使われる「jpg」「png」の2つについて説明していきます。


gifというファイルもWeb上で使われることがありますが、これの主な用途は「gifアニメ」であることが多く、シンプルに画像として貼られることは少ないと思われるので、今回の説明からは、除外させていただきます。

JPEGの用途

このファイルは、「jpg」「jpeg」と表記されることがありますが、どちらも同じ形式のファイルです。


JPEGは、主に写真に使われます。
デジカメやスマホで撮った写真なども、基本的にはこのファイル形式です。


そのため、JPEGはブログ・ホームページにおいて、色数の多い写真に使うのがおすすめです。


では、なぜそうなのか。

この形式の特徴を見てみましょう。

JPEGの利点

まず、JPEGのメリットとして挙げられるのは、「フルカラー1670万色を表現できる」ことでしょう。


そのため、多くの色を扱うことができます。
よって、色数の多い、複雑な写真に向いているわけです。

また、グラデーションの表現もきれいにできます。


もう一つのメリットは、「圧縮するため、ファイルサイズが小さくなっている」ことです。


普通、画像というのは膨大なデータ量です(特に、写真などの色数が多い画像)から、非圧縮のままだと、とても大きなファイルサイズになってしまいます。


ファイルサイズが大きい画像をサイトにアップしたりすると、「サーバーの容量を食う」、「サイトの読み込み速度が遅くなる(これにより、サイトを見る人にイライラを与えてしまいます。)」などのデメリットが伴います。


これを比較的回避できるのが、JPEGの大きな利点ですね。


JPEGの欠点

続いて、JPEGのデメリットです。


基本的に困ることは、「画像の劣化」です。


JPEGは非可逆圧縮という圧縮をすることで、ファイルサイズを抑えています、


この方式だと、「同じ画像ファイルを開いて編集」→「上書き保存」という行為を繰り返すことで、激しく画質が落ちます。


他の欠点としては、画像の一部を透過できないことでしょう。


何かしらのロゴ・アイコンって、背景が透明になっていることが多いですよね。

たぶん背景がないほうがスタイリッシュで格好いからです。
(偏見ですが…)

しかしJPEGだと、これができません。


以上がデメリットになります。

PNGの用途

PNGは主に、画面のスクリーンショット、イラスト、ロゴ、ゲーム素材など、様々なところで使用されています。

WEBに特化した形式です。


スマホでスクリーンショットをとると「.png」で保存されることが多いらしいです。

また、あの有名な「イラストや」での素材も、このPNGです。



つまり、PNGが色数の少ないイラスト、スクリーンショット、ロゴなどにおすすめです。


では、具体的な特徴を見ていきましょう。


PNGの利点

PNGのメリットは、なんといっても、「高画質で保存できる」ことでしょう。


JPEGほどまでは圧縮されないので、JPEGと比べると、画質の劣化は少ないです。


次に、「特定色を透明に設定できる」ことでしょう。


これにより、背景を無色化でき、ロゴなどにも活用できます。

PNGの欠点

デメリットは、「JPEGと比べてファイルサイズが少し大きくなってしまうことがある」ことです。


JPEGとは違い、「人間の肉眼では見ることができない情報をカットしているわけではない」ので、ファイルサイズは少し大きめになります。


そのため、写真はPNGに向かないです。
(写真は色数が多く、ファイルサイズが大きくなりがちですからね。)

以上です。

まとめ

JPEG : 普通の写真

PNG : スクリーンショット、イラスト、ロゴ

こんな感じです。


スクリーンショットがPNGなのは、「スクリーンショットは高画質であるべき」だからです。

スクリーンショットとかだと、文字が含まれる場合などが多いです。


そんなときにJPEGを使ったりすると、文字が汚くなって、読みづらかったりすることがあります。

また、スクリーンショットなどは、同じ色で構成されていて、色数が少ないことが多いので、PNGに向いています。


以上です。

皆さんも、ブログ・ホームページで画像を使うときは、ファイル形式にも気を付けてみてください。


またお会いしましょう。
さようなら。


人気の記事