【Web知識】画像データの拡張子

今回はWebデザインで扱う画像データの拡張子についてまとめたいと思います。確認しやすいようにそれぞれの特徴を箇条書きで書いていきます。

JPEG（ジェイベグ）

(Joint Photographical Experts Groupの略)

• 拡張子　jpg  jpeg

• 背景の透明が表現できない

• モスキートノイズが出る場合がある

• フルカラー１６７７万色

• 非可逆圧縮

• ビットマップ画像(ピクセル)

EpsonやCannon等のスキャナーを使用しjpegファイルを保存した場合、スキャナーの機種によっては拡張子のアルファベットの文頭が大文字になってしまうこともあるのでスキャナーを使った画像を扱う際は拡張子の文頭が大文字になっていないか確認しておくと良い。拡張子に大文字が含まれていると HTML CSSでは読み込むことができない。

PNG（ピング）

(Graphics Interchange Formatの略)

• 拡張子　png

• 透過・半透明の表示ができる

• ビットマップ画像(ピクセル)

• PNG24(フルカラー)とPNG８(256色)の２種類がある

SVG（エスブイジー）

(Schalable Vector Graphicsの略)

• 拡張子　svg

• ベクター画像

• 拡大・縮小しても劣化しない

• アニメーションやスクリプトで制御可能

Schalableとは”拡張可能な”という形容詞。
scaleは名詞形では”定規”などの意味を持ち、動詞形では”一定の比率で拡大・縮小する”といった意味を持ちます。

Webp（ウェッピー）

• 拡張子　webp

• photoshopで読み込めない

• 透過・半透明の表示ができる

• 非可逆圧縮

• Google社がした静止画像フォーマット

GIF（ギフ・ジフ）

(raphics Interchange Formatの略)

• 拡張子　gif

• アニメーション表現可能

• 256色しか表現できない

• エッジ部分が白くなってしまうことがある（ロゴなど）

HEIC(ヘイク)

(High Efficiency Image Formatの略)

• iOS macOS専用

• ファイル形式は「HEIF　(ヒーフ）(High Efficiency Image Format) 」

• windowsではサポートされていない

• andoroidではversion5.0(2016年以降発売)なら対応可能？

かなりざっくりとしたまとめになりましたが、それぞれの特徴を理解し場面に応じての使い分けをしていきたいと思います。