因为专注,所以专业
2005 - 2020

在html中如何兼容使用WebP格式的图片【图片升级到WebP】

时间:2020-02-05 17:05:46    作者:八叔模板堂

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

在浏览器中使用WebP格式

姿势一: <picture>标签

<picture class="picture">
  <source type="image/webp" srcset="image.webp">
  <img class="image" src="image.jpg">
</picture>
.picture img {
  width: 100px;
  height: 100px;
}
.image {
  width: 100px;
  height: 100px;
}

姿势二:使用JS替换图片的URL。

function checkWebp(callback) {
  var img = new Image();
  img.onload = function () {
    var result = (img.width > 0) && (img.height > 0);
    callback(result);
  };
  img.onerror = function () {
    callback(false);
  };
  img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
}
function showImage(useWebp){
  var imgs = Array.from(document.querySelectorAll('img'));

  imgs.forEach(function(i){
    var src = i.attributes['data-src'].value;

    if (useWebp){
      src = src.replace(/\.jpg$/, '.webp');
    }

    i.src = src;
  });
}

checkWebp(showImage);

姿势三:使用JS解码WebP图片


赞(0
免费拨打  111-1111-1111
免费拨打  111-1111-1111免费拨打 111-1111-1111
微信二维码
手机二维码
返回顶部
返回顶部返回顶部