スタッフブログ
2023.10.17
画像ファイルの種類と特徴
JPEG（JPG）
| カラー | フルカラー（約1,677万色）を表現できる |
|---|---|
| 容量 | 高い圧縮率で軽くすることができる |
| 圧縮 |
非可逆圧縮 ・何度も写真を加工や編集するときは向かない |
| 透過 | ✕ |
| アニメーション | ✕ |
| 適した使い方 | 写真や色数を多く扱う画像に使用 |
PNG
| カラー | フルカラー（約1,677万色）を表現できる |
|---|---|
| 容量 | 重くなりやすい |
| 圧縮 |
可逆圧縮 |
| 透過 | 〇 |
| アニメーション | ✕ |
| 適した使い方 |
・ロゴやアイコンなどの色数が少ない画像に使用 ・背景を透明にしたい時に使用 |
GIF
| カラー |
最大256色を表現 |
|---|---|
| 容量 | 軽い |
| 圧縮 |
可逆圧縮 |
| 透過 | 〇 |
| アニメーション | ✕ |
| 適した使い方 |
GIFアニメーション（動く画像）を作れる為、簡易的な動画を入れたいときに使用 |
WebP
| カラー | フルカラー（約1,677万色）を表現できる |
|---|---|
| 容量 | 軽くできる |
| 圧縮 |
非可逆圧縮／可逆圧縮 両方に対応 |
| 透過 | 〇 |
| アニメーション | 〇 |
| 適した使い方 | 画像サイズが軽いのでSEO対策にも最適 |
非可逆圧縮・・・・・圧縮画像データを元の画像に戻すとき画像が劣化し完全には復元できない。
可逆圧縮・・・・・・圧縮画像データを元の画像に戻すとき画像を劣化させずに復元できる。
WebPが優秀！
webpは、JPEG・PNG・GIFのそれぞれの特徴をもったファイルです。
それぞれの良い点を持ち合わせつつ画像ファイルを軽くできるのでホームページを作成するときに最適です。
画質はそのままにファイルサイズが軽いためページの読み込みも早くなるのでSEO対策としてもぴったりです！
Microsoft EdgeやGoogle chromeなど主要なブラウザでも対応しています。
Squooshというアプリを使用すれば簡単に変換できるのでおすすめです！
用途に合わせて画像ファイルをうまく使っていきましょう♪
株式会社クラカズコミュニケーションズホームページ担当
この記事を書いた人
株式会社クラカズコミュニケーションズは、平成元年（1989年）より山口県防府市に本社を構えるIT企業です。パソコン修理・販売からITコンサルタント、WEB制作、デジタルレクチャーまで幅広いサービスを提供しています。
