H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【前端技术】页面加载性能之WebP在项目中的应用

项目中的静态图片,一般有两种使用方式:

  • HTML中的 <img> 标签
  • CSS中的 background-image 属性

尽可能的使用CSS的方式去加载图片,当然如果你依赖图片本身的宽高等比缩放的特性,还是使HTML的方式。

框架

本文将以vue-cli 3.0脚手架搭建的项目为例。

转换工具

我们选择的是 Imagemin,版本选择6.1.0,因为7.0.0之后的版本在windows上有兼容性问题,目前还未修复。

npm install imagemin@6.1.0 --save-dev
npm install imagemin-webp --save-dev

转换脚本

我们的转换脚本需要支持全量转换,单个目录转换,以及单文件转换三种模式,质量默认选择75,实际测下来发现,75的质量跟100的质量肉眼基本看不出来区别,以下是脚本代码的实现:

/**
 * 脚本位于tools目录,即 ./tools/webp.js
 * 项目的源码均位于src目录,即 ./src/
 * 可以自行调整代码中的部分目录配置
 */
const imageMin = require('imagemin')
const imageMinWebp = require('imagemin-webp')
const path = require('path')
const fs = require('fs')

let quality = 75
let rootDir = path.join(__dirname, '../src')

async function init (dir) {
  console.log('start!')
  await loop(dir)
  console.log('completed!')
}

async function loop (dir) {
  let res = fs.readdirSync(dir, {
    withFileTypes: true
  })
  await imageMin([path.join(dir, '*.{jpg,png}')], dir, {
    plugins: [
      imageMinWebp({
        quality: quality
      })
    ]
  })
  console.log(dir)
  for (let i = 0, length = res.length; i < length; i++) {
    if (res[i].isDirectory()) {
      await loop(path.join(dir, res[i].name))
    }
  }
}

if (process.argv.length >= 3) {
  if (process.argv[3]) {
    quality = process.argv[3]
  }
  let dir = path.join(__dirname, '../', process.argv[2])
  const stats = fs.statSync(dir)
  if (stats.isDirectory()) {
    rootDir = dir
    init(rootDir)
  } else if (stats.isFile()) {
    console.log('start!')
    imageMin([dir], path.dirname(dir), {
      plugins: [
        imageMinWebp({
          quality: quality
        })
      ]
    })
    console.log(dir)
    console.log('completed!')
  }
} else {
  init(rootDir)
}

转换全部图片:

node ./tools/webp.js

转换 src/components 目录下的全部图片:

node ./tools/webp.js src/components

转换单个图片文件 src/images/picture.png:

node ./tools/webp.js src/images/picture.png

转换全部图片,并设置转换质量为100:

node ./tools/webp.js src 100

检测是否支持

https://modernizr.com/downloa…

打开上面的链接,点BUILD,即可下载

有以下两种引入方式:

  • Es6 Module: 通过import引入
  • Inline Push(内联脚本): 通过将代码放在 <head> 标签中引入

Es6 Module

适合纯前端渲染的架构,如Vue,React,Angular等。这种架构在JS执行之前,页面上没有图片内容,所以不用考虑 FOUC (Flash of Unstyled Content) 的情况。

Inline Push(内联脚本)

适合后端渲染的架构,如PHP,Nodejs等。这种架构下,页面上可能已经有了图片,所以必须将 Inline Script 放在 <head> 中,并且位于所有 <style><link> 标签之后,一方面让js可以尽快执行,另一方面可以避免出现 FOUC 的情况。

HTML中使用

Vue框架中,可以在js里面判断:

<template>
  <div class="container">
    <img :src="picture">
  </div>
</template>
<script>
import picture from 'picture.jpg'
import pictureWebP from 'picture.webp'

export default {
  data () {
    return {
      picture: window.Modernizr.webp ? pictureWebP : picture
    }
  }
}
</script>

CSS中使用

用SCSS预编译语言:

.picture {
  background-image:url(picture.png);
  .webp & {
    background-image:url(picture.webp);
  }
}

边界问题

使用Es6 Module方式引入的时候,如果需要立刻判断是否支持,需要依赖监听函数,因为检测是需要消耗一定的时间,如下:

window.Modernizr.on('webp', (result) => {
  if (result) {
    // support
  } else {
    // not support
  }
})

兼容性

  • 安卓基本都支持
  • 苹果全部不支持,等 iOS 14Safari 14 发布之后,就能支持WebP了
  • 除Safari之外,PC浏览器基本都支持

注意事项

由于webpack打包图片,针对小于1k的图片会直接使用base64的格式,这类图片不需要使用webp

总结

WebP格式是图片的一大变革,以往的一张500K的PNG的图片,转换成WebP之后,只有50K左右,压缩比例高达90%。

再者,随着 iOS 14 的即将发布,WebP的移动端支持率将达到90%以上。

尽早将WebP用起来,也能为你的用户省去一大笔流量,让你的页面打开更快。

本文地址:H5W3 » 【前端技术】页面加载性能之WebP在项目中的应用

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址