序文
ほとんどのWebページでは、画像がページサイズの60％-70％を占めました。だから、ウェブ開発で、Webページのパフォーマンスや経験のための異なるシナリオが適切な画像形式を使用することは非常に重要です。画像フォーマットは、多くの唯一のいくつかのWebアプリケーション、一般的に使用される画像フォーマットのための紙の種類：GIF、PNG、JPG、基本的な概要もWEBP。
画像フォーマットの分類
- 非圧縮ありません。非圧縮画像フォーマットを正確に元の画像をレンダリングするために、画像データ処理を圧縮しません。BMP形式は、その一つです。
- ロスレス圧縮。画像圧縮符号化のためのすべてのデータ圧縮アルゴリズムは、同時に画質保証で画像のサイズを小さくすることができます。PNGは、代表の一つです。
- 非可逆圧縮。すべてのデータを圧縮しないであろう画像圧縮アルゴリズムは、符号化されていますが、圧縮されたとき、人間の目に加えて、画像の細部を認識することはできません。したがって、非可逆圧縮が大幅に同一の画質の場合に画像のサイズを小さくすることができます。代表の一つがjpgです。
GIF
エンコードにLZW圧縮アルゴリズムを使用して、インデックスカラーに基づくロスレス画像フォーマットです。古いBMP形式、小型化、および支持透明性、アニメーションに比べて、可逆圧縮の結果として。欠点は、複雑な色、画像の豊富な詳細がGIF形式として保存適合しない（すなわち、最大2 ^ 8 = 256色を表現するために）、GIF格納わずか8指標です。シンプルな色のロゴ、アイコン、ワイヤーフレームに適したGIF形式。
JPG
JPGは、直接色に基づいて、非可逆画像形式です。人の数だけ様々な1ワットについてカラーアイを識別しながら、直接色の結果、カラーJPGは、従って、色が豊富な画像、グラデーションのために非常に適しJPG、多くの1600ワット（2 ^ 24）として使用していてもよいです。JPGの非可逆圧縮は、画像の細部を認識することはできません肉眼を削除した後、それが大幅に画像のサイズを小さくすることができます。
JPGは、適切なアイコンではないGIF / PNG-8と比較してしかし、ロゴは、それはファイルサイズの利点にはしませんでした。
PNG-8
PNG-8可逆圧縮、インデックスは8ビットカラービットマップフォーマットに基づいています。透明GIFより良いサポートに比べPNG-8は、同じ品質の下で、サイズも小さくなっています。代替として非常に適してのGIF。PNG-8だけでなく、アニメーションの明らかな欠如がサポートされていません。また、これは完全にGIF-8 PNGを交換する方法はありません重要な理由です。GIFに代わるアニメーション推奨PNG-8のための需要が存在しない場合。
PNG-24
png-24采用无损压缩，是基于直接色的位图格式。png-24的图片质量堪比bmp，但是却有bmp不具备的尺寸优势。当然相比于jpg，gif，png-8，尺寸上还是要大。正是因为其高品质，无损压缩，非常适合用于源文件或需要二次编辑的图片格式的保存。
png-24与jpg一样能表达丰富的图片细节，但并不能替代jpg。图片存储为png-24比存储为jpg，文件大小至少是jpg的5倍，但在图片品质上的提升却微乎其微。所以除非对品质的要求极高，否则色彩丰富的网络图片还是推荐使用jpg。
png-24与png-8一样也支持透明。
webp
WebP图片是一种新的图像格式，由Google开发。与png、jpg相比，相同的视觉体验下，WebP图像的尺寸缩小了大约30％。另外，WebP图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式，当然目前webp的还没有得到全面的支持。
看一下png图片与webp图片的对比：
详见png VS webp。
再看一下webp的兼容性：
可以看到webp格式的支持度还不是很好，但是移动端的支持整体还可以。
总结
结合以上的介绍，我们了解了各种图片格式的优缺点及适用场景，我们再来通过一个图表来做一个抽象总结：
| 格式 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
| gif | 文件小，支持动画、透明，无兼容性问题 | 只支持256种颜色 | 色彩简单的logo、icon、动图 |
| jpg | 色彩丰富，文件小 | 有损压缩，反复保存图片质量下降明显 | 色彩丰富的图片/渐变图像 |
| png | 无损压缩，支持透明，简单图片尺寸小 | 不支持动画，色彩丰富的图片尺寸大 | logo/icon/透明图 |
| webp | 文件小，支持有损和无损压缩，支持动画、透明 | 浏览器兼容性不好 | 支持webp格式的app和webview |
最后附上Google关于图片格式的选择指南：
