当前位置: 首页 > 面试题库 >

你有使用过webp的图片格式吗?

令狐嘉禧
2023-03-14
本文向大家介绍你有使用过webp的图片格式吗?相关面试题,主要包含被问及你有使用过webp的图片格式吗?时的应答技巧和注意事项,需要的朋友参考一下

webp格式的优势和兼容处理

优势
  • 更优的图像数据压缩算法 带来更小的图片体积
  • 肉眼识别无差异的图片质量
  • 支持有损和无损压缩
  • 支持动画 透明
  • 色彩丰富 24-bit颜色数
兼容性处理
1.通过picture标签进行选择判断
<picture>
    <source srcset="img/pic.webp" type="image/webp">
    <source srcset="img/pic.jpg" type="image/jpeg">
    <img src="img/pic.jpg">
</picture>

该种方法要求在每个要请求webp图片的标签下都要通过picture标签来进行兼容性处理,
同时注意该标签在IE的兼容性并不是很好,不过已经比webp的兼容性好一些。

2.通过服务端判断请求头中的Accept的值判断是否支持webp

通过HTTP request header中是否存在Accept: image/webp来判断,
这种方法的缺点在于:很多时候我们的图片等静态资源都会放到CDN服务器上,在这个层面加上判断webp的逻辑会更麻烦一些

3.由浏览器端判断是否支持WebP格式
if(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0){
   //  该浏览器支持WebP格式的图片
 }

该种方法的原理为:

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型,默认为 PNG 格式。

1.如果画布的高度或宽度是0,那么会返回字符串“data:,”。

2.如果传入的类型非“image/png”,但是返回的值以“data:image/png”开头,那么该传入的类型是不支持的。3.Chrome支持“image/webp”类型。

 类似资料:
  • 本文向大家介绍描述下你所了解的图片格式及使用场景相关面试题,主要包含被问及描述下你所了解的图片格式及使用场景时的应答技巧和注意事项,需要的朋友参考一下 通常网页在显示的图片(图形)的时候,有以下几种格式:GIF、PNG、JPG、SVG,还有个比较新的WebP格式。 ▍GIF 优点:GIF是动态的;支持无损耗压缩和透明度。 缺点:的详细的图片和写实摄影图像会丢失颜色信息;在大多数情况下,无损耗压缩效

  • 网站需要使用webp格式图片,请问在amh中需要开启哪个扩展环境,或者安装那个插件可以实现该功能

  • 本文向大家介绍说说你对jpg、png、gif的理解,分别在什么场景下使用?有使用过webp吗?相关面试题,主要包含被问及说说你对jpg、png、gif的理解,分别在什么场景下使用?有使用过webp吗?时的应答技巧和注意事项,需要的朋友参考一下 之前总结的图片选择流程图:

  • 本文向大家介绍Android通过Movie展示Gif格式图片,包括了Android通过Movie展示Gif格式图片的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享Android通过Movie展示Gif格式图片的相关代码,供大家参考,具体内容如下 自定义属性res/values/attrs.xml文件: 在Activity中使用: 以上就是本文的全部内容,希望对大家的学习有所帮助。

  •  吉里吉里/KAG 支持各种各样的图片格式,这些格式各有特色。 BMP 图片  吉里吉里支持无压缩的 BMP 图片格式。吉里吉里中使用的 BMP 不能使用 RLE 圧縮、游戏打包时的压缩也无法很有效的减小容量、但虽然容量很大、BMP 格式图片的读取速度却是最快的。 JPEG 图片  JPEG 、(一般情况下) 是使用了不可逆图片压缩技术的格式。因此、图片一旦转为JPG格式,就无法100%还员原来图

  • The Python Imaging Library supports a wide variety of raster file formats. Nearly 30 different file formats can be identified and read by the library. Write support is less extensive, but most common