创头条App
扫码下载APP
扫码下载APP

您是个人用户,您可以认领企业号

    免密码登录
  • 图形验证码
  • 获取验证码
  • 立即登录
第三方账号登录
·
·

Hello,新朋友

在发表评论的时候你至少需要一个响亮的昵称

GO
资讯 > 营销广告 > 手把手教你如何将网站图片格式升级为WebP | 干货分享
分享到

手把手教你如何将网站图片格式升级为WebP | 干货分享

时间:11-18 09:27 阅读:10043次 转载来源:又拍云     作者:王成

摘要:WebP,如果还没听过这种图片格式,你就OUT了

文 | 王成

本文转载自SegmentFault


WebP格式介绍

WebP是Google开发的一种新的图片格式,它支持有损压缩、无损压缩和透明度,压缩后的文件大小比JPEG、PNG等都要小。所以可以节省带宽,减少页面载入时间,节省用户的流量。

Android和iOS的App只要引入Google提供的解码库,都可以很轻松的支持WebP格式。不过在Web上,WebP的支持还不是很广泛。根据Can I Use的数据,目前只有Chrome、Opera浏览器,以及Android的WebView是支持WebP的。但是WebP图片有这么多优点,我们能不能在Web页面中使用呢?可以。这篇文章就来讨论一下这个问题。

把已有的图片转换为WebP格式

要使用WebP格式,需要将你网站用到的图片都制作一份WebP格式的版本,如果你使用CDN服务商,它们一般都会提供转码到WebP格式的选项。如又拍云

22222.jpg增加这样的配置后,我们可以通过给图片URL加上相应的后缀,来使用WebP格式的版本资源。

你也可以使用Webpack、Gulp的插件来批量转换图片格式。这里不赘述。

在浏览器中使用WebP格式

因为不是所有浏览器都支持WebP格式,我们就有两种思路:一个是只在支持WebP格式的浏览器中使用WebP格式;一个是让不支持WebP格式的浏览器可以支持WebP。

姿势一: 标签

是HTML5中的一个新标签,类似


 
 

如果浏览器支持WebP格式,就会加载Image.webp,否则会加载Image.jpg。

即使浏览器不支持标签,图片仍然会正常显示,只是CSS可能无法正确选取到Picture元素。比如在IE8中,下面的CSS就不会起作用:

.picture img {  width: 100px;  height: 100px;}

但是可以这样来给图片写样式:

.image {  width: 100px;  height: 100px;}

即使浏览器使用的是WebP格式的图片,最终还是会应用img元素的样式。

不过只要使用了戳我阅读原文哦~


声明:本文由又拍云企业号发布,依据企业号用户协议,该企业号为文章的真实性和准确性负责。创头条作为品牌传播平台,只为传播效果负责,在文章不存在违反法律规定的情况下,不继续承担甄别文章内容和观点的义务。

评论

未登录的游客
游客

又拍云
又拍云
关注企业号
9
分享次数
0

又拍云成立于 2010 年,致力于为客户提供一站式的云加速服务,帮助客户解决云存储、云处理、 CDN 加速和云安全四大功能。

TA的其他文章

包含这篇文章的专题

3,494.0万次

    为您推荐
  • 推荐
  • 人物
  • 专题
  • 干货
  • 地方
  • 行业
+加载更多资讯

阅读下一篇

优办完成3000万美元B轮融资,下一步大动作要做互联网超级平台

优办完成3000万美元B轮融资,下一步大动作要做互联网超级平台

返回创头条首页

©2015 创头条版权所有ICP许可证书京ICP备15013664号RSS