天博·（中国）官方网站

网站图像优化技巧（二）

另外如果考虑到更全的兼容性问题，还是得回归到 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。

免责声明：本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，请发送邮件至：operations@xinnet.com进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。