2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

JPEGとPNGの違いについて

Posted at

画面遷移する際やWebページを読み込む際に遅いといった事があるかと思いますが、実はそれぞれの特徴に関係してるのです!
JPEGとPNGのそれぞれの特徴についてまとめましたので、よかったら参考にしていってください🙇‍♂️

JPEG

通常JPEGは非可逆圧縮となっており、一部データが欠けるなどして、画像がぼやける事があります。その代わりに、データの圧縮率も高く、大きな画像を小さな画像に圧縮できるのが特徴となっています。

PNG

可逆圧縮となっていて、圧縮前と同じ状態にする事ができます。データが欠けるなどはなく、画質が落ちることもないのが特徴ではあるものの、ファイルサイズが大きいといったデメリットがあります。ファイルサイズが大きいとデータの転送量が増えて、サーバー側への負担も大きくなってしまい、Webページの読み込みが遅くなったりします。

圧縮率が高いと何がいいのか!!!!

圧縮率が高いほど、画像ファイルのサイズが小さくなり、ファイルを効率的に保存または転送することができます。
具体的には、以下3つの特徴があります。

1. ディスクスペースの節約
2. 高速なデータ転送
3. ストレージの効率化

1.ディスクスペースの節約

圧縮率が高いと、同じ品質の画像でもファイルサイズが小さくなり、ディスクスペースを節約する事ができます。

2.高速なデータ転送

圧縮されたファイルは小さいため、ネットワーク上でのデータ転送が高速になります!特に、インターネット上で大量の画像を送受信する場合に有利です。

3.ストレージの効率化

圧縮された画像を使用することで、ウェブサイトやアプリのストレージ容量を節約する事ができる。これにより、ユーザーのデバイスに対する負荷が軽減される可能性があります。

可逆圧縮って何!!!

文章ファイルなどは、圧縮したものを完全に元に戻す必要があり、このような圧縮方法は可逆圧縮といい、ランレングス法やハフマン法などが使用されている。
PNGの画質が落ちないのは、このため。
ちなみに、ランレングス法などはFAXなどに用いられたりします!(気になる方は調べてみてください)

非可逆圧縮って何!!!

画像,音声,動画などのファイルは、画質などを完全に元に戻す必要がない場合もあります。このような圧縮方法を非可逆圧縮といい、可逆圧縮に比べて圧縮率をあげることができることが多いのが特徴です。

例)動画、音楽データ

おまけ

JEPG XL

PNGと同様にロスレスエンコーダーの特徴を持ち、PNG以上の圧縮率であり、プログレッシブデコーディングを採用してることから、ダウンロードが完全に終わっていなくても、逐次画像を解析することで、表示する事ができる特徴を持っているのがJPEG XLです。通常JPEGは、非可逆圧縮となっており、画像がぼやけてしまうが、JPEG XLはロスレスエンコーダーの特性を持ち合わせいることから、可逆圧縮である事が言える。

JPEGXLの特徴

  • ロスレスエンコーダー
  • プログレッシブコーディング
  • 可逆圧縮

つまり、圧縮率と画質はトレードオフの関係であるが、JPEG XLはこのトレードオフの関係を限りなく無くした新しい圧縮技術と言えます。

まとめ

日常でかなり目にするJPEGとPNGですが、それぞれの特徴を押さえておくと、Webページを作成するときなどになぜ読み込みが遅いのかの原因を突き止めたりする事ができるので、可逆圧縮と非可逆圧縮は覚えておいて損はないと思います!!!

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?