作者简介: 一个平凡而乐于分享的小比特,中南民族大学通信工程专业研究生在读,研究方向无线联邦学习
擅长领域:驱动开发,嵌入式软件开发,BSP开发
作者主页:一个平凡而乐于分享的小比特的个人主页
文章收录专栏:IMX8MP,本专栏记录imx8mp开发板,学习开发过程中的问题及解决方法记录
欢迎大家点赞 👍 收藏 ⭐ 加关注哦!💖💖
图片是我们开发中经常会用到的基础资源,互联网上,几乎任何站点都离不开图片,不管是图片上传,还是背景、内容展示或小图标等等,图片资源无处不在。
而且图片资源相比文字内容,通常都较大,会占用大量的带宽。因此,学习一些图片的基础知识,对我们也是至关重要的。
图片的压缩方式一般是三类:
几乎不对图片进行压缩处理,尽量以原图的方式呈现图片,如bmp格式的图片就属于这一类。
很多图片都采用无损压缩的方式,如 png、gif等。
无损压缩采用对图片数据进行编码压缩,以不降低图片质量的情况下减少图片的大小,
无损压缩只是对像素数据压缩,不会减少像素,几乎没有损耗,所以可以恢复到原始图片。
有损压缩最常见的就是 jpg 格式的图片,它一般是使用去除人眼无法识别的图片像素的方法,降低了图片的质量用以大幅度的减少图片的大小。
这种情况下,有损压缩减少了图片的像素点,导致图片数据部分丢失了,属于不可逆的,所以无法恢复到原始图片。
常见格式的图片:
格式 | 压缩 | 透明 | 动画 | 其他 |
---|---|---|---|---|
jpg | 有损 | 否 | 否 | 色彩丰富、文件小 |
png | 无损 | 是 | 否 | apng支持动画 |
tiff | 无压缩 | 是 | 否 | 非常有限的浏览器支持 |
bmp | 无压缩 | 否 | 否 | 大,约等于原图(raw数据格式) |
gif | 无损 | 是 | 是 | 256色、文件较小 |
svg | 无损 | 是 | 是 | 简单图形,矢量图 |
webp | 无损、有损 | 是 | 是 | 目前相对最优 |
JPEG(或JPG),其全称为Joint Photographic Experts Group(联合图像专家组),是一种有损压缩的光栅图像文件格式,适合作为共享图像。既然JPEG是“有损的”图像,也就是说使用此格式时,若减小文件大小,在一定程度上也会降低图像质量。
JPEG是目前互联网上最常用的图像文件类型之一,因为它的可压缩性及浏览器/操作系统广泛支持。
大多数社交媒体平台(例如Facebook和Instagram)会自动将上传的图像文件转换为JPEG,且会根据不同场景使用固定的尺寸大小来控制图片的分辨率。
优缺点
兼容情况
应用场景
PNG,英文全称为Portable Network Graphics PNG(便携式网络图形),也是一种栅格图形格式,但支持无损压缩,保证颜色之间的细节和对比度。
特别是,PNG提供比JPEG更好的文本可读性。
这使得PNG成为信息图形,横幅Banner,屏幕截图以及其他同时包含图像和文本的图形的最佳表达方式。
优缺点
兼容情况
应用场景
TIFF是本图像文件类型指南不应该缺少的一种格式。
TIFF是“Tagged Image File Format”的缩写,是一种光栅图像格式,最常用于存储和编辑图像,以便于将来打印。
该格式不支持任何压缩,图像质量是该格式的首要保证。
优缺点
兼容情况
使用场景
BMP是一种与硬件设备无关的图像文件格式,使用非常广。它采用位映射存储格式,除了图像深度可选以外,不采用其他任何压缩,因此,BMP文件所占用的空间很大。BMP文件存储数据时,图像的扫描方式是按从左到右、从下到上的顺序。
由于BMP文件格式是Windows环境中交换与图有关的数据的一种标准,因此在Windows环境中运行的图形图像软件都支持BMP图像格式。它是包括Windows在内多种操作系统图像展现的终极形式,能够被多种Windows应用程序所支持。
GIF,英文全称为Graphics Interchange Format,属于另一种栅格格式图像文件类型。该格式也使用了无损压缩,且将图像“约束”为8 bits/每个像素,并限制为256色调色板。
GIF格式也是最有名的(和最常用)的动画图像,因为它的8-bit限制保证了动画体积更小和互联网友好。
优缺点
兼容情况
应用场景
可伸缩矢量图形文件格式(通常称为SVG),由W3C开发的一种标记语言,可以在浏览器中直接渲染为二维图像。
它不像栅格格式那样依赖像素,而是使用XML文本以类似于数学方程式计算勾勒形状和线条获得图形。
也就是说,可以在不损失任何质量的情况下无限放大SVG图像。
优缺点
兼容情况
使用场景
webp是一种相对较新的图像格式,它是谷歌推出的,最大的特点是:视觉效果好、色彩丰富的同时,同样图像的文件大小能比jpg、png减小30%左右。
优缺点
兼容情况
使用场景
Raw图像格式是数码相机用来存储高质量图像以供后期制作和编辑的文件类型。
相机制造商的主要Raw图像文件类型:
RAW文件在一张图片中包含多达16,384种不同的颜色,而不是JPEG文件仅包含256种颜色。也就是说RAW文件在调整颜色和对比度等后期处理时,有着更大的灵活性。
RAW图像不适合用于网络演示或共享,并且主流浏览器或图像查看器兼容性极差,一般需要使用专业的相机图像处理软件处理。
优缺点
使用场景
根据与Web使用相关的数据,三种最常见的图像文件类型分别为PNG,JPEG和SVG。
1. PNG:屏幕截图,Banner横幅,信息图表,图片
由于PNG作为一种更适合于附带文本的图像格式,因此它更常用于屏幕截图,横幅(取决于横幅广告尺寸)等。
并且由于采用了无损压缩,设计师和摄影师能够使用此格式图像在作品集网站上展示高质量的图片。
上述两个因素,加上其通用的浏览器和操作系统支持,使其成为网络上最受欢迎的图像文件类型。PNG在网站上的使用率高达77%。
2. JPEG:图片
有损压缩意味着JPEG是更好的选择,可用于在整个内容中展示图片。有限的质量损失对于普通的互联网用户几乎可以忽略不计,又可以节省大量的服务器磁盘空间和带宽。
这就是为什么它是互联网上第二受欢迎的格式,约72%的网站使用了此格式图像。一般情况下,大多数网站会同时使用PNG和JPEG。
温馨提示:JPG与JPEG之间没有区别,属于同一格式,两者的文件扩展名可以相互切换。
3. SVG:Logo,图标和插画
SVG文件是可缩放的矢量文件,非常适合图标,Logo,图形和简单的插画。该图像甚至可以作为CSS代码直接插入到页面中。
这就是SVG排名第三的原因,有27%的网站使用了SVG。
4.特别提名:GIF动画图片
尽管很少使用此格式作为静态图像的选择,但不可否认GIF已成为共享动画的第一选择。
Raw图像格式的质量最佳,但文件体积超大,可能一个Raw格式的照片就高达几百MB。
对于Web图像,相同质量的情况下,WebP文件格式的文件大小比JPEG小25-35%,也就是说相同的存储空间可以上传更多更高质量的图像,有可以保证网站拥有很好的访问速度。
PNG文件提供无损压缩,但文件体积较大影响加载加载速度。单个PNG文件通常为数百KB甚至1MB +。但如果利用诸如延迟加载(WordPress 5.5+核心支持该功能 )和CDN之类的一些策略,网站还是可以拥有一个较快的加载体验。
(1)一般情况下将静态GIF图像无损转换为PNG后可以压缩率会略为提高(前提是同样采用8位索引模式)。
(2)PNG可提供更大颜色深度的支持,包括24位(8位3通道)和48位(16位3通道)真彩色。加入α通道后可进一步支持每像素64位的表示。
(3)超过8位色深的PNG图像转换为GIF时,图像质量会由于分色(颜色数减少)而下降。
(4)GIF原生支持动态图像,PNG只能通过非标准实现,在PNG的基础上另有发展出支持动画的APNG和MNG格式,但普及度不高。PNG在IE6等旧浏览器上的支持较差。
(1)JPEG可以对照片(或类似)图像生成更小的文件,这是由于JPEG采用了一种针对照片图像的特定有损编码方法,这种编码适用于低对比,图像颜色过渡平滑,噪声多,且结构不规则的情况下。如果在这种情况下用PNG代替JPEG,文件尺寸增大很多,而图像质量的提高有限。相应的,如果保存文本,线条或类似的边缘清晰,有大块相同颜色区域的图像,PNG格式的压缩效果就要比JPEG好很多,并且不会出现JPEG那样的高对比度区域的图像有损。如果图像既有清晰边缘,又有照片图像的特点,就在在这两种格式之间权衡一下了。JPEG不支持透明度。
(2)由于JPEG是有损压缩,会产生迭代有损,在重复压缩和解码的过程中会不断丢失信息使图像质量下降。由于PNG是无损的,保存将要被编辑的图像来说更加合适。