Open LLwanran opened 4 years ago
【给大学生讲讲web图片格式】
常见的存储的图片格式有bmp,jpg,png,tif,gif,pcx,tga,exif,fpx,svg,psd,cdr,pcd,dxf,ufo,eps,ai,raw,WMF,webp等，咱不是UI设计师，不用理解这么多，只需要看下面的内容：
在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，常见的几种web应用中常用的图片格式：gif、png、jpg、webp、svg 图片格式分类包括无压缩、无损压缩、有损压缩。 无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片，位图（Bitmap）.bmp格式就是其中之一。 压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。 压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。 gif采用LZW压缩算法进行编码，是一种无损的基于索引色的图片格式。由于采用了无损压缩，相比古老的bmp格式，尺寸较小，而且支持透明和动画。缺点是由于gif只存储8位索引（也就是最多能表达2^8=256种颜色），色彩复杂、细节丰富的图片不适合保存为gif格式。色彩简单的logo、icon、线框图适合采用gif格式。 jpg是一种有损的基于直接色的图片格式。由于采用直接色，jpg可使用的颜色有1600w之多（2^24），而人眼识别的颜色数量大约只有1w多种，因此jpg非常适合色彩丰富图片、渐变色。jpg有损压缩移除肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小。 但是jpg不适合icon、logo，因为相比gif/png-8，它在文件大小上丝毫没有优势。 png作为无损压缩的图片文件，有多种不同的像素深度和像素格式可以选择，抛开只有黑白的灰度图不说，彩色的png像素格式有三种：8，24，32 png8：8位的png最多支持256（2的8次方）种颜色，8位的png支持不透明、索引透明、alpha透明。 png24：支持2的24次方种颜色，表现为不透明。PS导出png24是会根据你是否需要半透明选择png24还是png32，所以你导出的有半透明的png24实际上是有alpha通道的png32 png32：它是在png在24位的png基础上增加了8位的透明信息，支持不同程度的半透效果 png8和png24后面的数字则是代表这种png格式最多可以索引和存储的颜色值。“8”代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。 webp图片是一种新的图像格式，由Google开发。与png、jpg相比，相同的视觉体验下，webp图像的尺寸缩小了大约30％。另外，webp图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式，当然目前webp的还没有得到全面的支持。 webp格式的支持度还不是很好，但是移动端的支持整体还可以。 svg -无损压缩、矢量模式，svg正变得越来越热门，它不同于以上所有的文件类型，因为它是一个矢量文件格式。这就是说它实际上是由线条和曲线，而不是像素组成的。当你放大一个矢量图像时，你仍然看到一条曲线或一条线。当你放大一个由像素构成的图像时，你会看到像素。
gif
png
jpg
webp
svg
总结——各种图片格式的优缺点及适用场景： gif 优点：文件小，支持动画、透明，无兼容性问题 缺点：只支持256种颜色 适用场景：色彩简单的logo、icon、动图
jpg 优点：色彩丰富，文件小 缺点：有损压缩，反复保存图片质量下降明显 适用场景：色彩丰富的图片/渐变图像
png 优点：无损压缩，支持透明，简单图片尺寸小 缺点：不支持动画，色彩丰富的图片尺寸大 适用场景：logo/icon/透明图
webp 优点：文件小，支持有损和无损压缩，支持动画、透明 缺点：浏览器兼容性不好 适用场景：支持webp格式的app和webview
svg 优点：可呈现任何大小而不降低其质量，现代浏览器支持svg格式，并且面向未来 缺点：设计svg可能会变得复杂，在某些版本过低的浏览器上无法呈现 适用常见：平面图绘制、动画绘制、数据可视化、替代flash
JPG 和 JPEG 格式有什么区别？ 没有区别，全名、正式扩展名是JPEG。但因DOS、Windows 95等早期系统采用的8.3命名规则只支持最长3字符的扩展名，为了兼容采用了.jpg。也因历史习惯和兼容性考虑，.jpg目前更流行。
LLwanran
commented
4 years ago 
LLwanran
commented
4 years ago
【给大学生讲讲web图片格式】
在大多数的web页面中，图片占到了页面大小的60%-70%。因此在web开发中，不同的场景使用合适的图片格式对web页面的性能和体验是很重要的。图片格式种类非常多，常见的几种web应用中常用的图片格式：
gif、png、jpg、webp、svg图片格式分类包括无压缩、无损压缩、有损压缩。 无压缩的图片格式不对图片数据进行压缩处理，能准确地呈现原图片，位图（Bitmap）.bmp格式就是其中之一。 压缩算法对图片的所有的数据进行编码压缩，能在保证图片的质量的同时降低图片的尺寸。png是其中的代表。 压缩算法不会对图片所有的数据进行编码压缩，而是在压缩的时候，去除了人眼无法识别的图片细节。因此有损压缩可以在同等图片质量的情况下大幅降低图片的尺寸。其中的代表是jpg。gif采用LZW压缩算法进行编码，是一种无损的基于索引色的图片格式。由于采用了无损压缩，相比古老的bmp格式，尺寸较小，而且支持透明和动画。缺点是由于gif只存储8位索引（也就是最多能表达2^8=256种颜色），色彩复杂、细节丰富的图片不适合保存为gif格式。色彩简单的logo、icon、线框图适合采用gif格式。jpg是一种有损的基于直接色的图片格式。由于采用直接色，jpg可使用的颜色有1600w之多（2^24），而人眼识别的颜色数量大约只有1w多种，因此jpg非常适合色彩丰富图片、渐变色。jpg有损压缩移除肉眼无法识别的图片细节后，可以将图片的尺寸大幅度地减小。 但是jpg不适合icon、logo，因为相比gif/png-8，它在文件大小上丝毫没有优势。png作为无损压缩的图片文件，有多种不同的像素深度和像素格式可以选择，抛开只有黑白的灰度图不说，彩色的png像素格式有三种：8，24，32 png8：8位的png最多支持256（2的8次方）种颜色，8位的png支持不透明、索引透明、alpha透明。 png24：支持2的24次方种颜色，表现为不透明。PS导出png24是会根据你是否需要半透明选择png24还是png32，所以你导出的有半透明的png24实际上是有alpha通道的png32 png32：它是在png在24位的png基础上增加了8位的透明信息，支持不同程度的半透效果 png8和png24后面的数字则是代表这种png格式最多可以索引和存储的颜色值。“8”代表2的8次方也就是256色，而24则代表2的24次方大概有1600多万色。webp图片是一种新的图像格式，由Google开发。与png、jpg相比，相同的视觉体验下，webp图像的尺寸缩小了大约30％。另外，webp图像格式还支持有损压缩、无损压缩、透明和动画。理论上完全可以替代png、jpg、gif等图片格式，当然目前webp的还没有得到全面的支持。 webp格式的支持度还不是很好，但是移动端的支持整体还可以。svg-无损压缩、矢量模式，svg正变得越来越热门，它不同于以上所有的文件类型，因为它是一个矢量文件格式。这就是说它实际上是由线条和曲线，而不是像素组成的。当你放大一个矢量图像时，你仍然看到一条曲线或一条线。当你放大一个由像素构成的图像时，你会看到像素。总结——各种图片格式的优缺点及适用场景： gif 优点：文件小，支持动画、透明，无兼容性问题 缺点：只支持256种颜色 适用场景：色彩简单的logo、icon、动图
jpg 优点：色彩丰富，文件小 缺点：有损压缩，反复保存图片质量下降明显 适用场景：色彩丰富的图片/渐变图像
png 优点：无损压缩，支持透明，简单图片尺寸小 缺点：不支持动画，色彩丰富的图片尺寸大 适用场景：logo/icon/透明图
webp 优点：文件小，支持有损和无损压缩，支持动画、透明 缺点：浏览器兼容性不好 适用场景：支持webp格式的app和webview
svg 优点：可呈现任何大小而不降低其质量，现代浏览器支持svg格式，并且面向未来 缺点：设计svg可能会变得复杂，在某些版本过低的浏览器上无法呈现 适用常见：平面图绘制、动画绘制、数据可视化、替代flash
JPG 和 JPEG 格式有什么区别？ 没有区别，全名、正式扩展名是JPEG。但因DOS、Windows 95等早期系统采用的8.3命名规则只支持最长3字符的扩展名，为了兼容采用了.jpg。也因历史习惯和兼容性考虑，.jpg目前更流行。