JEPG、PNG、WEBP、GIF、SVG的学习使用、 各种网络图片格式学习-JPEG

吐槽、建议、解惑入口网址

GPEG
介绍

    JPEG(Joint Photographic Experts Group:联合图像专家小组,1972年)是第一个国际图像压缩标准。JPEG压缩标准描述将图像转换为字节的数据串流(streaming),没有说明如何将这些字节存储。

JPEG算法原理解析(整理像素点,以数学三角函数表示,通过哈夫曼树进行存储)
JPEG算法解密一
JPEG算法解密二
JPEG算法解密三
JPEG算法解密四
JPEG算法解密五
CSDN-JPEG图像压缩

    .jpeg/.jpg是最常用存储JPEG图像文件格式,是一种有损压缩格式。通常将图像压缩在很小的储存空间并且会将图像中重复或不重要的资料丢弃,因此容易造成图像数据的损伤。一般不建议将JPEG重复压缩会导致数据丢失越来越严重。

JPEG压缩标准实现开源库:libjpeg、mozjpeg、miniJPEG
[libjpeg](http://libjpeg.sourceforge.net/)    
Libjpeg is a widely used C library for reading and writing JPEG image files. It was developed by Tom Lane and the Independent JPEG Group (IJG) during the 1990’s and it is now maintained by several developers using various services identified in the SourceForge summary.
The latest release is version 6b of 27-Mar-1998. This is a stable and solid foundation for many application’s JPEG support.

1、JPEG是有损压缩算法。有损压缩就是为了将图片压缩到更小,利用人眼观察图片的特点改变某些丢弃掉一些人眼不易察觉的原始颜色信息,而这个是不可逆的。
2、其压缩算法可以精确控制压缩比,以图像质量换得存储空间。 Photoshop存储JPEG格式图片,提供11级压缩级别,以0—10级表示。其中0级压缩比最高,图像品质最差。即使采用细节几乎无损的10 级质量保存时,压缩比也可达 5:1。
3、它不支持透明背景图像,更加适合颜色复杂的图像。
4、JPEG存储图片一个像素使用24位表示,属于真彩色图片。

后续针对JPEG第一代压缩标准的改进变化,依次出现了:
JPEG2000(2000年、支持有损和无损压缩,支持渐进传输、开源库:openJPEG)、JPEG XR(2009年, 增加HDR支持)

JPEG的特性

1、支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小。
2、有损压缩会使图像数据质量下降,并且在编辑和重新保存JPG格式图像时,这种下降损失会累积。
3、JPEG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片。
4、它并不适合于线条绘图(drawing)和其他文字或图示(iconic)的图形,因为它的压缩方法用在这些图形的型态上,会得到不适当的结果;
5、当它处理矢量图形和 Logo 等线条感较强、颜色对比强烈的图像时,人为压缩导致的图片模糊会相当明显。且不支持透明度处理。

使用场景

1、大的背景图
2、轮播图
3、Banner图

什么时候应该使用JPEG?
    从上面介绍的JPEG的特性来看,它更适合用来存储具有丰富色彩层次的摄影或写实照片。这是因为色彩层次丰富的图像一般会由于阴影、反光或透视等效果形成明暗、深浅不同的区域,如果我们选择使用PNG8来储存的话,可能一些颜色在调色板上找不到,导致图像上一些数据的丢失,如果使用PNG24的话,它确实可以查找到图像不同层次的颜色,但它会因数据较多增大图片的体积,严重拖慢加载速度,在网站上也容易显示不全。所以,JPEG是最好的选择,它能在尽量压缩文件大小的情况下较好的还原图片的品质。为什么这里不使用SVG呢?SVG有自身的局限性,由于它是点和线精准计算的,一些位图如摄影元素SVG无法实现合适的缩放。
引用:横向对比GIF/JPEG/PNG/SVG,教你如何合理选择图像格式

基准式JPEG和渐进式JPEG

基准式JPEG和渐进式JPEG是两种不同编解码方式,还有主要是在网速比较慢的时候,图片加载方式也是不一样的。
基准式JPEG
基准式JPEG加载情况
渐进式JPEG
渐进式JPEG加载情况

参考资料

使用渐进式 JPEG 来提升用户体验
每个前端工程师都应该了解的图片知识
JPEG图片格式详解
JPG?GIF?PNG?前端如何选择图片格式?
网站建设中使用的png和jpg两种图片格式都有哪些特点和区别
横向对比GIF/JPEG/PNG/SVG,教你如何合理选择图像格式

下一代Web图像格式:JPEG、JPEG XR、JPEG2000、WebP、BPG

不曾拥有,所以努力。(坚持原创技术分享,您的支持将鼓励我继续创作!)