画像のフォーマットって何を使えば良いの?
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のみに対応
- 閲覧できないブラウザーがある
まとめ
いろいろと調べて、確かに「次世代フォーマット」って画像の圧縮率も上がるし、魅力的だとは思いました。
残念な事に、どのフォーマットもまだ全てのブラウザーへの対応が出来ていないのが現実です。
このような状態では、いくらサイトのスピードアップにつながっても、画像が見れなくなるリスクを考慮し、
使う時期ではない!と言うのが私の結論です。
確かに最近、画像が見れないサイトがポチポチ増えて来ています。最初は、リンク切れかな?と思っていましたが、きっと画像を次世代フォーマットに変えた結果なのでしょう。
サイトのスピードも大切です。ですが、画像は、大切な情報源です。
今現在、私は次世代フォーマットを使っていません。全てのブラウザーで使えるようになるまでは、今のままでと思っています。
次世代フォーマット、画像フォーマットってちょっと専門用語が多いので、大丈夫でしたか?
何か、これって何?よくわからない・・・の疑問があったら、迷わずお問いあわせ!からお便り下さい。
この記事が少しでもお役に立てれば光栄です。