前端webp图片

时间: 2019-10-05阅读: 41标签: webp

webp 是目前 Web 比较流行的解决方案,相对于 Jpeg/png, 基于 VP8 的压缩,有着非常不错的压缩率。

比较基础的方法,还是检测 UA 白名单来说,毕竟这些版本都是很早就支持。


这个方法可控性大,而且能够支持 SSR 渲染,在服务端做 UA 判断然后输出对应的图片格式。

当然,常规的另外一种解决方式是,就是远程加载一张 webp 图片观测是否报错

function checkWebPSupport) {
  return new Promise((resolve, reject) => {
	var img = new Image();
	img.onload = function() { resolve(); };
    img.onerror = function() { reject(); };
    img.src = 'http://www.gstatic.com/webp/gallery/1.webp';
  })
}

网络上有一款比较创新的检测方法,利用 canvas 输出图像的方式。


function canUseWebP() {
    var elem = document.createElement('canvas');

    if (!!(elem.getContext && elem.getContext('2d'))) {
        // was able or not to get WebP representation
        return elem.toDataURL('image/webp').indexOf('data:image/webp') == 0;
    }

    // very old browser like IE 8, canvas not supported
    return false;
}


CSS 中嵌入的 背景图

.no-webp .elementWithBackgroundImage {
  background-image: url("image.jpg");
}

.webp .elementWithBackgroundImage{
  background-image: url("image.webp");
}

如果用到 背景图的话,我们可以通过跟元素的 class 来进行图片格式的选择


吐血推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入...

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入...

3.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

链接: http://www.fly63.com/article/detial/6271

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全