初めまして、1歳児の息子を育てるワーママの【はつまい】と申します。
息子の誕生をきっかけに資産運用の重要さを認識し、副業でブログを開設致しました。
ブログ初心者の方が知りたい情報を中心に記事を執筆しています。
| 著者 | はつまい |
|---|---|
| ＠_hatumai | |
| ブログ |
本記事では、ブログ運営に欠かせない「画像ファイル形式」について解説していこうと思います。
ブログで誤ったファイル形式を使用してしまうと、容量が重くなりページ読み込みも遅くなります。
読み込みが遅いサイトは読者の満足度が低いため、結果的に検索順位が下がるなどSEOにも影響する大切な要素です。
ブログに適したファイル形式をしっかりと理解し、適した画像を使用していきましょう。
ブログで使用する画像ファイル形式（JPG、PNG）
ファイル形式には上記2種類以外にGIFやTIF、SVG、BMPなどがありますが、基本的にブログの記事内で使用する画像ファイルはJPGとPNGの2種類でOKです。
まずは大まかな違いを理解しましょう。
| JPG | PNG | |
|---|---|---|
| 拡張子 | .jpg (.jpeg) | .png |
| 色数 | 1670万色 | 1670万色 |
| 圧縮方法 | 非可逆 | 可逆 |
| 透過 | 不可 | 可 |
| 容量 | PNGより大きめ | JPGより小さめ |
- 拡張子 …ファイルの種類を識別する文字列
- 色数 …表現できる色の多さ
- 圧縮方法 …非可逆だと画像を保存する度、画質が劣化する
- 透過 …背景透過機能の有無
- 容量 …JPGの方が大きくなりがち
それではそれぞれの特徴を詳しく見ていきましょう。
JPG（JPEG）
JPG（ジェイペグ）はJPGやJPEGなどと表現されますが、どちらも同じファイル形式です。
JPGは1670万色扱うことが出来るため、フルカラーで対応が可能です。
よって写真や色彩が多い画像に適したファイル形式です。
デジタルカメラの画像形式として使用されることが多いことからも、多彩な画像に適しているのがわかりますね。
メリット：
- 容量が多い画像を大幅に圧縮できる
JPGの最大のメリットは容量が多い画像を大幅に圧縮できる点です。
特に写真に限っては、見た目を大きく変えずに画像を圧縮することが可能です。
ページ全体のサイズを抑えるには画像1枚1枚の容量が非常に重要ですので、容量を小さく抑えられる点はJPGの大きなメリットとなります。
デメリット：
- 保存形式が不可逆圧縮
「不可逆圧縮」という言葉を聞いたことがない方も多いと思いますが、簡単に言うと「1度保存したデータは元の画質に戻らない」保存方法のことを言います。
JPGは容量を抑えるために圧縮処理を施し、データを一部切り捨て保存されます。
1度圧縮処理して保存されてしまった画像は元には戻らないため、保存を繰り返す度に画質が落ちていきます。
元々の画質を維持したい場合、元画は別で保存し、ブログ投稿用の写真だけJPGで圧縮保存をするなど、対策が必要です。
- 文字や線などぼやけやすい
先ほどのメリットで記述した通り、JPGは容量を大幅に圧縮できます。
しかし、その点が同時にデメリットにもなります。
JPGは圧縮する際、細かい色の違いを省略することで容量を小さくしているため、色の境界線がぼやけ（にじみ）やすい（＊）傾向にあります。
*この現象を「圧縮ノイズ」と言います。
PNG
PNG（ピング）はウェブでの使用を前提に開発された比較的新しいファイル形式です。
JPGの特徴である1670万色フルカラーと、GIF（ジフ）でも可能な「背景透過」の特徴を併せ持った形式として開発されました。
GIFでは対応が出来なかった半透明の透過処理も可能にしています。
JPGやPNGとは異なり色数が最大256色と非常に限られた色数で構成されている画像形式です。
色数が少ない分、図形やアイコン、イラストやロゴなど少ない色数での画像に適しており、容量は3種類の中で一番抑えられるファイルです。
また可逆圧縮を採用しているため、ロゴなど何度も保存を繰り返す画像に適したファイルと言えます。
指定した色を透明にできる「背景透過」機能も備わっていますが、PNGとは異なり半透明には対応していません。
メリット：
- 何度保存しても画質が劣化しない「可逆圧縮」形式を採用
保存の度に画質が落ちていく「不可逆圧縮」形式なJPGとは異なり、何度保存しても画質が劣化しない「可逆圧縮」形式を採用しています。
- 背景透過が可能
JPGにない機能として、PNGは画像の背景を透明・半透明にすることが可能です。
デメリット：
- ファイルサイズが大きい
PNGはJPGのように肉眼で見えないような細かい色を切り落として圧縮しているわけではないため、JPGよりもサイズ容量が大きくなりがちです。
「容量をいかに小さく抑えるか」が重要なブログにとって、この点は大きなデメリットとなります。
ブログにはどちらのファイル形式を使った方が良いのか？
双方のメリット・デメリットを理解した上で、ブログにはどちらのファイル形式を使った方が良いのでしょうか？
結論：
- 基本的には圧縮したJPGを使用
- 色の境界線をハッキリとさせたい画像はPNG
ブログでのJPG、PNGは上記の使い分けがおすすめです。
ブログで画像を挿入する際、多くの方は写真をメインに使用すると思います。
JPGもPNGもどちらも画質は問題ありませんが、少しでも容量を抑えるために、基本的にはJPGを選ぶようにしましょう。
但し、JPGのデメリットでも記述した通り、JPGはPNGに比べて色の境界線がにじみやすい特徴があります。
よって、境界線をはっきりと出したい画像については、PNGを選択するようにしましょう。
（例：グラフやテキストのスクリーンショットなど）
まとめ
ブログ運営者にとって、ページ表示スピードに大きく影響する画像ファイルの選択がいかに重要か、ご理解いただけたかと思います。
JPG、PNG、それぞれのメリット・デメリットを理解し、画像毎に適したファイルの選択ができるようになれば、ページ全体の容量も抑えられると思います。
読者の方に満足してお帰り頂けるように、画像ファイルにも注意して運営していきましょう。
本記事が少しでもお役に立てると嬉しいです。
