网站图像优化技巧（二）
亿网网站图像优化技巧（二）
- 作者：新网
- 来源：新网
- 浏览：100
- 2018-02-27 17:40:59
另外如果考虑到更全的兼容性问题，还是得回归到 jpg 和 png 上，常规的的选择会用 jpg 作为背景图，png 作为小块的图片，当然都需要经过压缩，服务端可以使用 Gzip ，上传图片前还能使用工具进行一遍压缩，比如使用 ps，或者在线压缩。
另外如果考虑到更全的兼容性问题，还是得回归到 jpg 和 png 上，常规的的选择会用 jpg 作为背景图，png 作为小块的图片，当然都需要经过压缩，服务端可以使用 Gzip ，上传图片前还能使用工具进行一遍压缩，比如使用 ps，或者在线压缩。
< div>TinyPNG 或者客户端工具 ImageOptim。 压缩可分为有损压缩和无损压缩。 使用有损压缩处理图像，是去除某些像素数据。 使用无损压缩处理图像，是对像素数据进行压缩。 压缩的方案可以根据需求选择。 优化策略 常见的优化方案： 使用 Data URI 即(base64)编码代替图片：适用于图片大小于 2 KB，页面上引用图片总数不多的情况，原理是将图片转换为 base64 编码字符串 inline 到页面或 CSS 中，可以减少 HTTP 请求。 合并雪碧图(sprite)： 移动端多图情况下，可以将多图合并到一个图中，通过 CSS 定位背景图的形式来引用图片，可以有效减少 HTTP 请求。 使用 CSS、svg、canvas 或者 iconfont 代替图片：适用于移动端或高级的浏览器，而且绘制的图片比较简单。 懒加载图片(lazyload) 使用 cdn 提供访问图片的入口。 响应式图片 响应式图片可以结合懒加载的形式，这样可以加强网页的体验。很多 网站 logo 就是一个固定宽度的图像的例子，不管浏览器视口的宽度如何，始终保持相同的宽度。 然而在移动端，往往需要不固定的图像，不同视口，不同的分辨率，需要展示不同的图像大小，图虽视口的改变而改变。 这个时候我们需要考虑使用响应式图片： src="360.jpg" alt=""> srcset：我们给浏览器准备了四个质量的图像，分别为 360 768 1200 1920 size：我们来告诉浏览器，在不同的环境下图像的宽度 当视口不大于 360 时，图像的宽度为 100vw，当视口大于 768 时，图像显示为 90vw，以此类推。 最后的 src 是作为默认图像 url 引入，是一个回退方案，当然浏览器不认 srcset 和 sizes 属性时，直接读取 src 渲染。 iphone4(320)下，图像宽度和我们设置的 100vw 一致，而浏览器选择的是 768 图像没有选择 360 图，因为 iphone4 的 dpr 是 2，浏览器智能地选择了合适的 768。 iphone6p(414)下，由于 6p 的 drp 更高，浏览器选择了 1200 质量的图像，显示了 90vw。