ブログで使用する画像ファイル形式は何がいいのか?

ブログやWebサイトなどでは画像を使うことが多々ある。理由は単純。そのほうが分かりやすい。文字で書いて写真を入れた方がより直観的に理解できるから。

とはいえ、画像形式にもいろいろある。
jpg、png、bmp…  どれを使ったらよいのかわからない。。。

ということで、どの画像形式が適しているのか?少し調べてみたので、結果をまとめていこうと思う。

結論

こういうのは始めに結論を書いたほうが良いだろう。


結果としては、「pngとjpgを状況に応じて使い分けするのがベスト」と理解した。

以下は結論に至るまで過程。

ファイルの特徴を知る必要がある

どの拡張子にするか?の前に、まずはそのファイル拡張子の特徴について知る必要がある。
ここでは大きく2つ。jpgとpngについて比較していく。
この2つは、ブログやウェブサイトでよく使われているファイル形式(だと思うから)。

PNG (Portable Network Graphics) の特徴

PNGは、非可逆圧縮といって、データを間引かない圧縮方式。
このため、画質劣化がないのが最大の特徴。

呼び方としては「ピング」とか「ピン」とかが一般系らしい。

長所

  • 高画質・劣化なし: 可逆圧縮のため、何度編集・保存しても画質が劣化しない。
  • 透明度のサポート: 背景を透過(透明)させることができる。ロゴ、アイコン、図版など、背景と重ねて表示したい画像、に最適。
  • 色数が少ない画像に強い: 線画、グラフ、ロゴ、文字などくっきりしてほしい画像、色数が少なく色の境界がはっきりしている画像なら、JPEGよりもファイルサイズを抑えられる。

短所

  • 写真には不向き: フルカラー(色数が多い)の写真に使用すると、JPEGよりもファイルサイズが非常に大きくなる。

JPEG/JPG (Joint Photographic Experts Group) の特徴

JPEGは、非可逆圧縮といって、データを間引く圧縮方式。
人間の目には気づきにくい方法でファイルサイズを大幅に削減します。

長所

  • 写真に最適: 色の階調が豊富で複雑な写真において、高い圧縮率を実現するので、ファイルサイズを大幅に小さくできる。
  • ウェブでの標準: ほとんどの写真画像に使用される。読み込み速度向上に大きく貢献。

短所

  • 画質の劣化: 非可逆圧縮のため、保存のたびに画質がわずかに劣化する。また、圧縮率を高めすぎると、ブロックノイズやモスキートノイズといった「圧縮ノイズ」が発生する。
  • 透明度はサポートしない: 原則として背景の透過(透明度)はサポートしない。

どちらを選ぶべきか?

ここまでの内容を踏まえると、「使う場面において変更した方がいい」ということになる。
まとめるとこんな感じ。



基本的にはjpgがいいと思う。サイズも小さくて軽くて表示が早い。SEO的にも有利だろう。
一方で、ロゴやプロフィール写真、図形などはpngがいいかもしれない。その方が文字や線がくっきり見える。

高画質な写真を見せたい場合などはあえてpngを使うこともいいかもしれない。

ほかの形式は?

ほかにも形式はいくつかある。ざっと挙げてみると、

  • GIF:アニメーションや色巣の少ないシンプルなイラスト向け
  • SVG:ロゴやアイコンなど拡大しても劣化しないベクター画像向け
  • WebP:jpgとpngの良いとこ取りみたいな感じ比較的新しい?のでこれから増えていくと思う。

まとめ

使う場面や見せたいもの解像度によって種類が変わることが分かった。
こうして文字を書いている立場であるから、最低限内容は知っておこうと思う。

コメント

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