Web性能优化： 图片优化让网站大小减少62%

一旦有了 WebP 图像，可以行使以下标志将它们提供应可以行使它们的赏识器，同时向不兼容 WebP 的赏识器行使 png 可能 jpeg。

<picture>  
    <source srcset="sample_image.webp" type="image/webp">  
    <source srcset="sample_image.jpg" type="image/jpg">  
    <img src="sample_image.jpg" alt="">  
</picture> 

行使此标志，领略 image/webp 媒体范例的赏识器将下载 Webp 图片并表现它，而其他赏识器将下载 JPEG 图片。

任何不支持 <picture> 的赏识器都将跳过全部 source 标签，并加载底部 img 标签。因此，我们通过提供对全部赏识器类的支持，慢慢加强了我们的页面。

请留意，在全部环境下，img 标志都是现实泛起给页面的内容，因此它确实是语法的必须部门。 假如省略 img 标志，则不会渲染任何图像。

<picture> 标签和个中界说的全部 source 都在哪里，以便赏识器可以选摘要行使的图片的路径。 选择源图像后，其 URL 将传给 img 标志，这就是表现的内容。

这意味着你无需配置 <picture> 或 source 标志的样式，由于赏识器不会渲染这些标志。 因此，你可以像早年一样继承行使 img 标签举办样式配置。

总结

正如你所看到的，优化 web 上行使的图像的进程并不伟大，通过镌汰页面加载时刻，可觉得客户带来更好的用户体验，但愿本文对你有所辅佐，共前进！

代码陈设后也许存在的BUG没法及时知道，过后为了办理这些BUG，花了大量的时刻举办log 调试，这边趁便给各人保举一个好用的BUG监控器材 Fundebug。

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!