Fork me on GitHub 盒子
盒子
文章目录
  1. 背景
  2. 特性分析
    1. JPG的特性
    2. PNG的特性
  3. 各自适用情况总结

JPG和PNG特性分析及适用范围

背景

由于做移动端开发,必须要考虑到图片尺寸问题,所以就JPG和PNG做简单的分析。

特性分析

JPG的特性

有损压缩

  • 支持摄影图像或写实图像的高级压缩,并且可利用压缩比例控制图像文件大小

  • 有损压缩会使图像数据质量下降,并且在编辑和重新保存JPG格式图像时,这种下降损失会累积

  • JPG不适用于所含颜色很少、具有大块颜色相近的区域或亮度差异十分明显的较简单的图片

童鞋可以自行调整jpg质量或者采用工具压缩jpg进行对比,体积减小明显

PNG的特性

无损压缩

  • 能在保证最不失真的情况下尽可能压缩图像文件的大小

  • PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据

  • 对于需要高保真的较复杂的图像,PNG虽然能无损压缩,但图片文件较大,不适合应用在Web页面上

PNG8最多只能索引256种颜色,所以对于颜色较多的图像不能真实还原;PNG24则可以保存1600多万种颜色,基本能够真实还原我们人类肉眼所可以分别的所有颜色;PNG格式最多可以保存48位颜色通道。

各自适用情况总结

在存储图像时采用JPG还是PNG主要依据图像上的色彩层次和颜色数量进行选择。

  • 一般层次丰富颜色较多的图像采用JPG存储,而颜色简单对比强烈的则需要采用PNG。但也会有一些特殊情况,例如有些图像尽管色彩层次丰富,但由于图片尺寸较小,上面包含的颜色数量有限时,也可以尝试用PNG进行存储。

  • 有些矢量工具绘制的图像由于采用较多的滤镜特效也会形成丰富的色彩层次,这个时候就需要采用JPG进行存储了

  • 用于页面结构的基本视觉元素,如容器的背景、按钮、导航的背景等应该尽量用PNG格式进行存储,这样才能更好的保证设计品质

  • 一些内容元素,如广告Banner、商品图片等对质量要求不是特别苛刻的,则可以用JPG去进行存储从而降低文件大小


如果能给您带去些许帮助,鄙人不甚欢心。如有错误,恳请交流指出,谢谢!
转载请注明出处:http://mcchen.club/


支持一下
扫一扫,支持McChen