图片优化

采用 webp 格式

• 根据 accept 请求头判断浏览器是否支持 webp 格式

• document.createElement('canvas').toDataURL('image/webp').includes('data:image/webp')

• 根据 navigator.userAgent 和 caniuse 判断是否支持 webp 格式

picture 和 img 标签，响应式图片

• 有了这些属性后，浏览器会：

  1. 检查设备宽度

  2. 检查 sizes 列表中哪个媒体条件是第一个为真

  3. 查看给予该媒体查询的槽大小

  4. 加载 srcset 列表中引用的最接近所选的槽大小的图像

  5. 不支持这些特性的旧版本浏览器，会忽略这些属性，它们直接越过并按常规加载 src 属性引用的图像文件

<picture>
  <source
    srcset="mdn-logo-wide.webp"
    media="(min-width: 600px)"
    type="image/webp"
  />
  <img src="mdn-logo-narrow.png" alt="MDN" />
</picture>
<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy"
/>
<img
  srcset="elva-fairy-320w.jpg, elva-fairy-480w.jpg 1.5x, elva-fairy-640w.jpg 2x"
  src="elva-fairy-640w.jpg"
  alt="Elva dressed as a fairy"
/>

图片懒加载

• loading 属性 > IntersectionObserver > getBoundingClientRect

优化显示效果

• 根据设备尺寸，分辨率加载不同的图片

• 优先加载小图，大图加载完成后切换成大图

• (medium.com 是如何让图片加载时从模糊到清晰的)[https://www.zhihu.com/question/40757342]

额外

1. pageSpeed for nginx

2. 不管请求路径的后缀，服务器根据请求头，选择返回不同分辨率，不同格式的图片？ 需考虑 cdn 缓存

3. OSS 图片处理服务