网站图像优化技巧（三）

时间:2021-07-16 | 标签: | 作者:Q8 | 来源:网络

小提示：您能找到这篇{网站图像优化技巧（三）}绝对不是偶然，我们能帮您找到潜在客户，解决您的困扰。如果您对本页介绍的网站图像优化技巧（三）内容感兴趣，有相关需求意向欢迎拨打我们的服务热线，或留言咨询，我们将第一时间联系您！

为了提上网站的性能，对网站的图片进行高效的压缩，是非常必要的，在不断开发杀手级功能的同时，确保所有引入的资源都是最精简的，图像优化就是这样一项工作。长久以来，大家认为网站的性能应该包含哪些功能是一个商业问题而非技术问题，所以就算页面懂大小总响应时间影响极大，在性能方面也很少讨论，足够得到重视。

这时我们可以欺骗一下浏览器：

360.jpg 1200w

1200.jpg 9999w

这时浏览器把 360 的图当成了 1200 来用了。这里可能有些疑问，图像的宽度为什么不是90vw 了哪?因为浏览器被骗了但是自己却不知道，他依然按照 1200 的图像，去适配 dpr。414 * 90% *(360 / 1200)约等于 111.7。这种方式很智能，浏览器根据你的 sizes，从 w 列表中选择最合适的图像来调用显示。

如果我们需要更精确的控制浏览器在什么视口大小下显示多大的图像，可以使用 picture 元素。

当视口大于 960 像素时，会加载 960.jpg。大于 768 像素时，会加载 768.jpg。视口小于768，则加载默认图像。虽然不是每个浏览器都支持 picture 元素，还可以使用 Picturefill polyfill。

加载以及显示策略

多图渲染的情况下，结合懒加载，又要保证图像的渲染速度，类似知乎的渲染效果，我们可以沈阳小程序使用 progressive-jpg。

相比 baseline-jpg 一行一行的扫描并显示图片，当然都是从弱网角度考虑，这种显示可能更合适。但还是有不足。参南阳网站开发考了下知乎和 medium 等网站的示图效果，可以进行模拟：

先创建一个为图片占位的预留块，在这个块中会展示图片。块中有另外一个块会先设置一个 padding-bottom 来撑起块的高(即保证需要加载图像也是这个宽度高度的比例)。这样防止图片在加载时发生重排。

加载一个轻量版的图片。这个时候会先请求一个图片的缩略图。并使用模糊 blur 效果

等滚到到可视区域，加载高质量图，加载完毕后取消模糊效果。

medium 下的实现方式更为复杂点，是在缩略图加载完毕后，绘制到 canvas 画布，再通过一个自定义的模糊函数，类似于 StackBlur，同时请求高质量图。等到请求完，再隐藏画布。

上一篇：网站图像优化技巧（二）
下一篇：网站图像优化技巧（一）