老榕树社区

标题: 浅谈图片优化的方法O敬 [打印本页]

作者: 静候世界末日那 时间: 2017-3-13 11:16
标题: 浅谈图片优化的方法O敬
在网站优化中，假如图片优化得好，不但可以进步页面的加载速度，提升网站的用户体验，而且还可以经过图片优化来俭省网站的带宽。那么作为页面构建工程师应该采用什么办法来优化图片，既能保证UI的复原度，又使图片最精简呢？下面我就个人经历，来简单引见一下图片优化的办法，首先我们了解一些图片方面的学问：

1. 矢量图与位图。

矢量图：缩放、旋转不失真的图像格式，不管你离多近去看都看不到图形的最小单位。存储的文件较小，但是很难表现颜色层次丰厚的逼真图像效果。你可以了解成圆满的圆型、抛物线等外形。
位图：又叫栅格图、像素图，最小单位由像素构成，缩放、旋转会失真。举个例子来说，位图就好比十字绣，远看时画面细腻多彩，近看时能看到每一针的颜色过渡。

十字绣十字绣放大

下表为矢量图和位图的比照：

2.有损紧缩、无损紧缩。

有损紧缩：特性是坚持颜色的逐突变化，根据人眼察看理想世界的忽然变化, 然后运用左近的颜色经过突变或其他方式中止填充。由于素点的数据信息，所以存储量会降低，还不会影响图像的复原度质会有所降落。JPG是有损紧缩格式，在存储图像时会把图像合成成8*8像素的网格单单独优化。举个例子：白色小块为8*8px，黑色底色块为*px，当小白块曾经不是纯白色了，它四周的小白块却很锋利，如下图所示：

右上角的白色格子刚好没有在8*8像素的网格单元中，所以保管时会跟四周的8*8的网格单元颜色交融，下图的效果：

这就是平常保管JPG图片时图像会含糊的缘由，下面是几张彩色图的部分比照效果：

无损紧缩：应用数据的统计冗余中止紧缩，真实的记载图像上每个像素点的数据信息。他的原理是先判别哪些颜色相同，哪些不同，将相同颜色的数据信息中止紧缩记载，把不同的数据另外保管。多次存储后图片的质量不会降落。

为什么无损紧缩的图也会有失真的？由于他的紧缩原理是经过索引图像上相同区域的颜色中止紧缩和复原，也就是说只要在图像的颜色数量小于我们可以保管的颜色数量时，才干真实的记载和复原图像，否则就会丧失一些图像信息。例如，PNG-8和GIF格式：

而PNG为真彩色所以颜色表为空，不会失真。

汽车遥控解锁器 http://www.wlkjlereg.com/：nacw01

作者: 大器晚成成不成 时间: 2017-3-13 11:16
貌似不错~~~~~~~~~~~~~~~

作者: 豪鬼大帝 时间: 2017-3-13 11:16
果断mark一下，回去再看。

作者: 江南烟雨88 时间: 2017-3-13 11:16
果断mark下，楼下回答。

作者: 中国杨神经 时间: 2017-3-13 11:16
提示: 作者被禁止或删除内容自动屏蔽

作者: 天天三餐白米饭 时间: 2017-3-13 11:16
真心不错的啊。。。

作者: aslongxing 时间: 2017-3-13 11:16
关注ing 非常谢谢楼主，顶一下

欢迎光临老榕树社区 (http://club.lrswl.com/)