简介

WebP 在各大互联网公司已经使用得很多了，国外的有 Google（自家的东西肯定要用啦，Chrome Store 甚至已全站使用 WebP）、Facebook 和 ebay，国内的有淘宝、腾讯和美团等。WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。主流浏览器支持webp格式的图片，在高保真的情况下，图片大小只有原来图片的50% - 70% ,所以可以通过转换图片为webp的方式来提示web加载体验

使用

下载智图电脑客户端或者访问智图网站 https://zhitu.isux.us 在线压缩

智图App按照默认方式生成webp文件

如果是背景图 style 添加webp样式 样式中替换 图片路径（注意用background-image 而不是background）

.wrap(v-webp="")

.wrap{
            width: 345px;
            height: 518px;
            background-image: url(/webapp/open-account-hk/apply/banner-bg.jpg);
            background-position: center;
            background-size: contain;
            background-repeat: no-repeat;
            &.webp {
                background-image: url(/webapp/open-account-hk/apply/webp/banner-bg.webp);
            }
        }

如果是image 标签，也可以直接传入 webp文件路径

img(v-webp="")

介绍下我司实现webp的方案

先检测浏览器是否支持，如支持则通过修改样式或者替换img的src路径

// webp.js 判断是否支持webp
let supportWebP = false


let elem = document.createElement('canvas')

if (elem.getContext && elem.getContext('2d')) {
    // was able or not to get WebP representation
    supportWebP = elem.toDataURL('image/webp').indexOf('data:image/webp') === 0
} else {
    // very old browser like IE 8, canvas not supported
    supportWebP = false
}

/**
 * 是否支持webP
 * @returns supportWebP: boolean
 */
function canUseWebP() {
    return supportWebP
}

export default { canUseWebP }

/**
 * 通过该指令，如果dom有 src 属性，会将 src 重新定位到原路径的  webp/imgName.webp
 * 例如 /newoffline/static/images/offline-icon.png => /newoffline/static/images/webp/offline-icon.webp
 * 如果没有 src 属性，会在 dom 上加一个 webp class。可以通过样式文件制定 webp 图片地址
 * 也可以 用 v-webp="webp-source-path" 来指定 webp 图片地址
 */
function isWebp(src) {
    return src.substr(src.length - 4) === 'webp'
}


Vue.directive('webp', (el, binding) => {
    if (Webp.canUseWebP()) {
        if (binding.value) {
            el.src = binding.value
        } else if (el.src && !isWebp(el.src)) {
            let imageSrc = el.src
            let lastPathIndex = imageSrc.lastIndexOf('/') + 1
            let fileName = imageSrc.substr(lastPathIndex)
            let webpPath =
                imageSrc.substr(0, lastPathIndex) +
                'webp/' +
                fileName.substr(0, fileName.lastIndexOf('.')) +
                '.webp'
            el.src = webpPath
        } else if (!el.src && el.classList) {
            el.classList.add('webp')
        }
    }
})