ブログの画像フォーマットって?初心者向け詳細を解説

当サイトはアフィリエイト広告を利用しています

picture format

悩む画像のフォーマットって何を使えば良いの?

JPG、GIF、PNG

それから次世代フォーマットって?????

 

 

そんなあなたのお悩みにお答えします。

こちらの記事内容は、ブログ画像フォーマット

  • JPG・GIF・PNG・BMPそれぞれの特長について
  • 次世代フォーマットとは?

 

JPG・GIF・PNG・BMPそれぞれの特長について

画像をデータ化したものが、画像拡張子と呼ばれるフォーマットで、一般的に良く知られている、上記4つを解説していきたいと思います。

簡単に説明しますので、どのフォーマットがあなたのサイトに向いているか?

プロのウェブデザイナーの方々は、その用途によって使い分けでいるようです。

JPG・JPEG (ジェイペグ)

デジタルカメラの大半がこのフォーマットを採用しています。

長所
  • サポートする色数が多い
  • フルカラー画像に最適
  • グラデーションカラーにも最適
短所
  • シンプルな画像には、不向き
  • 圧縮後、画質劣化の恐れ

GIF(ジフ)

長所
  • アニメーションに使える
  • ロゴ・ボタン・アイコンに最適
  • ファイルサイズが小さい

 

短所
  • 使える色数が限定されている
  • 画質重視の画像には、不向き
  • 可逆圧縮ができない

PNG(ピング)

 

長所
  • フルカラーをサポート
  • 圧縮後の画像劣化がない
  • 透明・半透明・不透明の表現可能

 

 

 

 

短所
  • アニメーションは不対応
  • 古いバージョンのブラウザーは不対応
  • 古い端末は不対応

BMP(ビットマップ)

BMPは、ファイルが大きいため、メールに添付して送る事は避けた方が良いでしょう。

長所
  • フルカラーサポート
  • 画像の劣化がほぼ無い
  • 解析度の高い画像
短所
  • ファイルサイズが大きい
  • ウェブでは使えないフォーマット

 

新世代フォーマットとは?

つい先日、「Google PageSpeed Insights」でこれとは別に運営しているサイトのスピードを計測しました。

「改善できる項目」に「次世代フォーマットでの画像の配信」と表示され、気になったので、「次世代フォーマットでの画像」とは一体なんなのか?調べてみました。

 

Google PageSpeed Insightsでは、この「次世代フォーマット画像」は、ページの表示速度を改善すると推奨しています。

確かに、Webサイトがサクサクと快適に表示されれば、離脱率も下がるだろうし、Google が推奨しているのだったら、変えた方が良さそうだけど、実際のところはどうなの?と半信半疑でした。

ここからは、具体的に「次世代フォーマット画像」がどういうものか?まとめていきますね。

WebP(ウェッピ―)

Google が開発している静止画フォーマット

長所
  • JPG・PNGを30%圧縮
  • アニメーションに対応

 

 

短所
  • IE・Safariに未対応
  • 閲覧できないブラウザーがある

 

 

 

JPEG2000

長所
  • JPEGよりも高性能
  • 可逆圧縮が可能

 

 

短所
  • Safariのみに対応
  • 閲覧できないブラウザーがある

 

 

 

JPEGXR

マイクロソフトが開発した画像フォーマット

長所
  • 圧縮率が高い
  • 綺麗な画像

 

 

短所
  • IE・Edgeのみに対応
  • 閲覧できないブラウザーがある

 

まとめ

いろいろと調べて、確かに「次世代フォーマット」って画像の圧縮率も上がるし、魅力的だとは思いました。

残念な事に、どのフォーマットもまだ全てのブラウザーへの対応が出来ていないのが現実です。

このような状態では、いくらサイトのスピードアップにつながっても、画像が見れなくなるリスクを考慮し、
使う時期ではない!と言うのが私の結論です。

確かに最近、画像が見れないサイトがポチポチ増えて来ています。最初は、リンク切れかな?と思っていましたが、きっと画像を次世代フォーマットに変えた結果なのでしょう。

サイトのスピードも大切です。ですが、画像は、大切な情報源です。

今現在、私は次世代フォーマットを使っていません。全てのブラウザーで使えるようになるまでは、今のままでと思っています。

次世代フォーマット、画像フォーマットってちょっと専門用語が多いので、大丈夫でしたか?
何か、これって何?よくわからない・・・の疑問があったら、迷わずお問いあわせ!からお便り下さい。

この記事が少しでもお役に立てれば光栄です。