提升网页加载速度和体验以及图片优化的方法

2020-04-30 15:08:44易采站长站整理

  而PNG24为真彩色所以颜色表为空,不会失真。
  3. PNG 、GIF 、JPG图片对比。
  在我们进行图像优化技术前,需要学习有关的图片格式的一些技术细节。每个图形格式都有自己的优势和弱点,知道他们会使你得到更好的视觉质量和压缩品质。
  网页图片优化是网页加速中非常重要的一步,对图片进行压缩,不仅能够节约带宽,并且加快网页的速度。我们常用的图片编辑软件都可以在压缩图片。
  PNG-8 的高压缩比
  切图时,有时选择 PNG-8 可以获得更高的压缩比。注意,是 PNG-8,不是 PNG-24。不过有些情况下还是 GIF 或 JPG 会小一些,需要根据实际情况调试以选择最佳方案。
  PNG-24 的优化技巧,使用色调分离:
  拿微博左侧导航的小icon为例,压缩后的图像大小对比如下图:
  PS色调分离的操作步骤如下:
  对比大小:
  使用工具优化后,还能够小一些:
请注意,上图中原本是GIF格式的图片
被改为了PNG格式
。所以,在使用工具优化时后需要再查看一下文件格式是否被更改,避免漏过某些图片没有优化。
  图片优化在微博首页上的应用:
  1. 图型类、照片类
  对于图像格式的选择,我们还需要考虑图片的使用场景或功能,概括为两类:图型类、照片类
  图型类:图形符号,具有高度浓缩并快捷传达信息、便于记忆的特性,颜色数量较少。
  图型类一般可以使用PNG格式或者GIF格式。优化时可采用PNG格式为PNG8或者PNG24,品质为32,如果色彩有损失可采用品质64或者128。
  例如:首页左导的图标、feed区图标、勋章图、表情动画都属于图形。
  照片类:照片通常含有百万数量级的颜色,包括平滑的颜色过度和渐变,如果是图形较为复杂,图中有时会出现真实的照片。
  照片类一般用PNG和JPG。可以根据图片色彩的丰富程度而定。
  PNG的品质一般要到128。JPG的品质一般要在70-80之间,以噪点的程度确定。