Webサイト（ブログなど）で画像を扱う場合、画像ファイル形式に注意する必要があります。
ブログを始めた頃は画像形式に気を使っている余裕はないかもしれませんが、画像形式の種類・特徴を理解し、サイトで最適な使い分けをすることで、Webサイトの表示速度を速めることや、画像の画質やクオリティを高めることができます。
「画像ファイル形式ってなんだろう？」
「ブログに載せる画像形式は何が良いのだろう？」
「ブログでは画像形式をどうやって使い分けるの？」
今回の記事ではこのような疑問が解消されるよう、丁寧に説明していきます。
画像ファイル形式とは
画像ファイル形式とは、皆さんが撮影した写真や描いたイラストなどの表示方法・圧縮方法を決定するものです。
画像形式それぞれに特徴があり、メリット・デメリットがあります。
そのため画像形式についての理解は、ブログ運営を行ううえで重要なことと言えるでしょう。
ちなみに画像ファイル名の後ろに付いている「.jpg」や「.mp3」などの、「.（ピリオド）」以下の部分を拡張子といいます。この拡張子を見ることで、画像のファイル形式を簡単に見分けることができます。
ブログで扱う画像形式の種類と特徴（JPG・GIF・PNG）
画像のファイル形式には多くの種類があります。
中でもWebサイト（ブログなど）で使われるファイル形式は主にJPG・GIF・PNGです。
まずはこの３つのファイル形式の特徴について理解しておきましょう。
JPG
JPGは写真によく使われる保存形式です。拡張子には「.jpg」「.jpeg」の２つがあります。
| メリット | フルカラー約1677万色で表現できるため、色数が多い画像が綺麗に表示できる。 高画質でありながら容量が小さい。 |
| デメリット | 非可逆圧縮をするため、圧縮率を上げると画像の劣化が生じる。 |
GIF
GIFはアニメーションに適した保存形式です。イメージとしてはパラパラ漫画。動画とは異なります。また256色で表現できるアイコン、ロゴ等にもおすすめの形式です。拡張子は「.gif」です。
| メリット | データ容量が軽い。 アニメーション表現・透過処理ができる。 |
| デメリット | 少ない色（256色まで）で構成されている。そのため256色以上のカラーを使用する写真やグラデーションのファイル形式としては適さない。 |
PNG
PNGはWebでの画像表示に使われます。拡張子は「.png」です。
| メリット | JPGと同じでフルカラーで1677万色を扱える。グラデーションを使用した画像にも使える。 透過処理ができる。※半透明も可。 画質劣化しない。 |
| デメリット | ブラウザIE7より対応。古いブラウザでは対応していない場合がある。 JPG・GIFに比べるとデータが重い。 RGB対応・CMYK非対応なため、印刷するとパソコンで表示されていた色から変わってしまう。 |
スマホで撮った写真の保存形式は？
「スマホで撮った写真をブログに使いたいけど、スマホで撮影した写真の保存形式って何だろう？」
このような疑問にお答えします。
注意することは、『普通に撮影した写真』と『スクリーンショットで撮った写真』は保存形式が異なることです。
一般的には、
- 普通に撮影した写真はJPG
- スクリーンショットで撮った写真はPNG
で保存されます。
撮影方法により保存形式が異なることに注意しましょう。
ブログでのJPG・GIF・PNGの使い分け
ブログでの画像形式は下記のように使い分けると良いと思います。
| JPG | 人物・風景・景色など多くの色を使う写真。 |
| GIF | 256色以下のロゴやイラスト。 |
| PNG | 切り抜き画像や色数の多いイラスト。 |
適した画像形式を使い、サイトの表示速度の改善や、画像の画質やクオリティを向上しましょう。
最後に
この記事では『ブログで扱う画像形式（JPG・GIF・PNG）の決め方を解説｜Webサイトで最適な画像形式』についてまとめてみました。
この記事で疑問が解消されれば幸いです。
それではまた次回の記事でお会いしましょう。