PWA 时代的移动端图片优化新思路

图片通常是移动端网页中最占流量的资源。在很多类型的网站中（比如电商、社区），图片占据了网页的大部分空间。优化图片的质量和加载速度成为提高用户体验的重要途径。

传统方案的弊端

目前有一些被广泛应用的方案，例如选择压缩比更高的图片格式、使用雪碧图、HTTP2、CDN等。5年前的一条知乎回答前端开发中，对图片的优化技巧有哪些？ - 贺师俊的回答 - 知乎现在依然有效，这些方案在各大网站中仍然发挥着重要的作用。

随着移动端兴起，各种移动设备带来了丰富的机型尺寸和像素密度，逐渐暴露出以上方案共同的问题，即都是基于网站粒度的通用方案。我们无法保证在每种机型上都达到最优的效果，只能通过一些取舍来达到较均衡的方案，从而满足大部分用户的体验需求。（虽然通过Media Query等方式可以对不同的屏幕进行一定程度的定制，但粒度较粗且功能有限，书写起来也比较复杂。）

传统方案带来的弊端主要有：

为了兼容旧版浏览器，使用新版浏览器的用户无法享受新技术带来的更优体验。(例如无法使用具有更高压缩比的WebP格式。)
通常采用的2x图方案对小屏幕尺寸是一种浪费，而在三倍屏上效果又不够好。

追求用户体验的道路没有止境。为了解决第一个问题，一些CDN厂商开始提供自适应的WebP图片转换技术，针对支持WebP的浏览器提供WebP格式图片（例如花瓣网使用的又拍云CDN）。

而Service Worker作为PWA核心技术，为我们带来了一些新的思路。

Service Worker

Service Worker是一个注册在指定源和路径下的事件驱动Worker。它采用JavaScript控制关联的页面或者网站，拦截并修改访问和资源请求，细粒度地缓存资源。你可以完全控制应用在特定情形（最常见的情形是网络不可用）下的表现。MDN

下图是Service Worker的支持情况。移动端方面Android的支持度较好，iOS Safari从11.3版本开始支持。总体支持度在84%（受地域和目标用户群体等方面的因素，经过统计，我们产品的设备支持度为63%）。
PWA 时代的移动端图片优化新思路

Service Worker的具体使用方法这里不再赘述。接下来将重点介绍如何使用Service Worker对图片请求做更细粒度的控制，达到渐进式优化的目标。

使用WebP

WebP是一种新的图像格式，它为Web中的图像提供更好的无损压缩和有损压缩。使用WebP可以创建更小、更丰富的图像。
WebP无损图像的尺寸比PNG小26%，有损图像比相同SSIM指数的JPEG图像小25-34%。Google

下图是WebP的兼容性一览。作为Google提出的一项技术，WebP在Android端有很好的支持，但目前的兼容性还无法在移动端网页中广泛使用。默认情况下，我们仍然需要根据实际情况选用恰当的图片格式，在PNG/GIF/JPEG中进行取舍（例如，对于无透明度且色彩丰富的图片，通常会选用压缩比较高的JPEG格式）。

PWA 时代的移动端图片优化新思路

而在使用Service Worker的网站中，由于我们可以拦截和修改网络请求，因此可以针对支持WebP格式的浏览器，修改为请求对应的WebP图片链接；而在不支持的浏览器中依然请求原链接。从而达到向后兼容式的优化。

// sw.js
self.addEventListener('fetch', (event) => {
  const req = event.request.clone()
  let newUrl = req.url
  if (!isImgRequest(newUrl)) {
    return
  }
  // 如果浏览器支持webp格式，则请求webp格式的图片
  const acceptHeader = req.headers.get('accept')
  const supportWebp = acceptHeader && acceptHeader.includes('webp')
  if (supportWebp) {
    newUrl = getWebpUrl(newUrl)
  }
  // 请求处理过的图片链接
  event.respondWith(
    fetch(newUrl, {
      mode: 'no-cors'
    })
  )
})

function isImgRequest(url) {
  // 根据url判断当前是否是需要优化的图片请求
}

function getWebpUrl(url) {
  // 根据图片url获取到对应的webp格式url（一般的图片服务器都会提供获取图片格式转换参数）
}

有关DPI自适应的思考

对于使用rem方案来实现自适应布局的网站来说，图片的展示宽高也会根据实际情况进行缩放。但由于图片通常采用固定的实际尺寸（例如使用2x图），当图片被缩放时，在小屏幕上会产生浪费，在大屏中效果却被打了折扣。如果我们能够根据不同机型，获取匹配实际物理分辨率的图片进行展示，则可针对每种设备最大程度的优化用户体验。

假设网站使用的图片存储服务提供了针对图片的缩放接口（例如，图片https://domain/key可以通过添加参数来将宽/高像素数减少到原来的0.6倍：https://domain/key/thumbnail/!60p）。针对支持Service Worker的浏览器，就可以根据设备的分辨率修改图片请求的缩放参数，从而达到设备粒度的图片尺寸定制。

这里需要注意的是Service Worker作为一种特殊的Worker不能直接操作DOM，全局作用域（通过self关键字访问）上也只有部分和window对象相同的属性和方法。因此我们需要通过Service Worker与网页之间的通信来获取到当前设备的屏幕尺寸和DPI等信息。代码示例如下：

// 网页代码
navigator.serviceWorker.controller.postMessage({ deviceWidth: window.screen.width * window.devicePixelRatio })

// sw.js
const TRIPLE_PIXEL = 1242 // 3x横向像素数
let deviceWidth = 0

self.addEventListener('fetch', (event) => {
  const req = event.request.clone()
  let newUrl = req.url
  if (!isImgRequest(newUrl)) {
    return
  }
  // 如果有屏幕分辨率信息，为请求url添加缩放参数
  if (deviceWidth) {
    const ratio = Math.round(deviceWidth / TRIPLE_PIXEL * 100)
    if (ratio > 0 && ratio < 100) {
      newUrl = getThumbnailUrl(newUrl, ratio)
    }
  }
  // 请求处理过的图片链接
  event.respondWith(
    fetch(newUrl, {
      mode: 'no-cors'
    })
  )
})

self.addEventListener('message', ({ data }) => {
  deviceWidth = data.deviceWidth
})

function getThumbnailUrl(url, ratio) {
  // 返回添加缩放参数的图片url
}

除了使用缩放参数，我们也可以分别导出1x/2x/3x图（默认使用2x图），根据DPI信息将图片请求替换为对应的<n>x图即可。

总结

Service Worker的功能如此强大，目前常用的情形已经有离线访问、构建App Shell等。期待未来Service Worker以及其它PWA技术能够不断带给我们新的思路。

PWA 时代的移动端图片优化新思路

传统方案的弊端

Service Worker

使用WebP

有关DPI自适应的思考

总结

相关推荐