css|多种常用图片格式介绍☂️☂️

429 阅读2分钟

BMP

无损的,几乎不进行压缩,所以图片文件较大!

GIF

无损的,文件小,支持动画,但是图片色彩不高,适合对色彩要求不高需要文件体积小的场景

JPEG

有损的,色彩丰富,适合用来存储图片,不适合存储LOGO ,会导致图片模糊,图片文件比GIF大一些

PNG-8

无损的,图片文件比GIF较小一些,在不需要动画的情况下,选择PNG-8代替GIF是很好的选择

PNG-24

无损的,同样的图片文件大小比BMP小,但是比GIF、JEPG、PNG-8都要大

SVG

无损的,矢量图,图片在放大时看到的还是直线和曲线,不是像素点,适合做LOGO和icon

WEBP

是谷歌开发一种新的图片格式,目前只有chrome和opera浏览器支持,好处还是在图片的文件大小上,支持无损和有损两种压缩方式,比其他格式的图片文件大小都要小

思考💡:JPEG和JPG,JPEG和PNG的区别?

JPEG和JPG是相同的文件格式

Windows系统的早期版本(特别是MS-DOS 8.3和FAT-16文件系统)在文件扩展名长度上有3个字母的限制,所以JPEG必须被缩短为JPG。

而Mac和Linux系统便没有这样的限制,所以用户会继续将图像保存为JPEG格式。

当时流行的图像编辑软件,比如Photoshop和Gimp是在不同的操作系统上工作的,所以最终这些软件会将默认的JPEG文件扩展名设置为JPG,以尽量减少不同系统之间的兼容问题。

这就是为什么我们最终得到了相同格式的两个文件扩展名:JPEG和JPG,其实无论你选择保存为哪个拓展名,它们之间是没有区别的。

JPEG和PNG对图片的区别

JPEG格式PNG
1代表JPEG代表联合图像专家组。PNG代表可移植网络图形。
2算法类型JPEG使用有损压缩算法。PNG使用无损压缩算法。
3画面质量JPEG图像可能会丢失一些图像数据,从而导致质量下降。PNG图像质量高。
4图片大小JPEG图像通常小于相同图像的PNG图像。PNG图像通常大于相同图像的JPEG图像。
5透明度JPEG不支持图像的透明度。PNG支持图像的透明性。
6扩展名JPEG图像使用.jpeg或.jpg扩展名。PNG图片使用.png扩展名。
7用法JPEG图像用于摄影。PNG图像通常用于图标创建。