2021年如何最大化最优化处理图片

在这里我将列出8种图片加载优化技术来减少宽带使用和cpu占用。我将使用html例子来更好的重现这个结果。其中一部分技术已经相当稳定，而另外一些则有些新颖。理想情况下，您最喜欢的发布Web文档的机制（例如CMS，静态站点生成器或Web应用程序框架）可实现所有这些现成的功能。
在本文结尾处，我将使用提供了此处概述的所有优化的技术更新列表。

Google's Core Web Vitals通过以下方案来优化所有的元素

• 通过减少字节，缓存和延迟加载来最大程度地减少最大的内容绘制（LCP）
• 保持累积布局偏移（CLS）为零
• 通过减少（主线程）CPU使用率来减少第一输入延迟（FID）

查看此实例图片的代码，来了解这些技术吧：

1. 响应式布局

这是一种众所周知的技术，可以使图像使用可用的水平空间直到其最大尺寸，同时保留宽高比。
2020年的新功能是，如果为img元素提供了width和height属性，则网络浏览器将在图像加载之前为其保留正确的垂直空间。
这样可以避免累积布局偏移（CLS）。

<style>
  img {
    max-width: 100%;
    height: auto;
  }
</style>
<!-- Providing width and height is more important than ever. -->
<img height="853" width="1280" … />

1. 延时渲染

第二种技术是更前沿。
新的CSS属性content-visibility：auto指示浏览器在图像靠近屏幕之前不要烦扰布局。
这具有各种好处，但最重要的好处可能是，浏览器将不会费心地解码我们模糊的占位符图像或图像本身，除非必须这样做，这样可以节省CPU。

这篇文章的早期版本介绍了如何使用contain-intrinsic-size来影响content-visibility: auto，但是从Chromium 88开始，图片不在需要提供width和height。
其他浏览器引擎（01/27/2021）尚未实现content-visibility: auto，并且在这种特殊情况下可能会追随Chromium的发展。
所以，是的，这现在要简单得多！

  main img {
    /* Only render when in viewport */
    content-visibility: auto;
  }</style>

1. AVIF

AVIF是已在Web浏览器中采用的最新图像格式。
Chromium浏览器目前支持该功能，并且在Firefox中带有标记即可使用。
尚不支持Safari，但考虑到Apple是该格式的支持者，我们可以期待将来
的支持。

AVIF值得注意，因为它以非常重要的方式始终胜过JPEG。
这与WebP有所不同，WebP并不总是产生比JPEG小的图像，并且由于缺乏对渐进式加载的支持而实际上可能会产生净损失。

要实现AVIF的渐进增强，请使用picture元素。
实际的img元素嵌套在picture中。
这可能会非常令人困惑，因为对于没有picture支持的浏览器，有时会将img做为回退，但基本上，picture元素仅有助于src选择，而本身没有布局。
绘制的元素（以及要设置样式的元素）是img元素。

直到最近，在服务器端实际对AVIF图像进行编码仍然相对困难，但是对于像Sharp这样的最新版本的库，现在变得微不足道了。

<picture>
  <source
    sizes="(max-width: 608px) 100vw, 608px"
    srcset="
      /img/Z1s3TKV-1920w.avif 1920w,
      /img/Z1s3TKV-1280w.avif 1280w,
      /img/Z1s3TKV-640w.avif   640w,
      /img/Z1s3TKV-320w.avif   320w
    "
    type="image/avif"
  />
  <!-- snip lots of other stuff -->
  <img />
</picture>

您可能已经注意到上面的代码段中的srcset和size属性。
使用w选择器，它会根据基于sizes属性（媒体查询表达式）计算得出的宽度，根据将图像绘制到用户设备时将使用的物理像素，来告诉浏览器使用哪个URL。

这样，浏览器将始终下载尽可能小的图像，从而为用户提供最佳的图像质量。
或者，例如，如果用户选择了某种数据保存模式，它可能会选择较小的图像。

如果浏览器不支持AVIF,可以使用如下fallbacks
为仅支持旧版图像格式的浏览器提供更多带有srcset的源元素。

<source
  sizes="(max-width: 608px) 100vw, 608px"
  srcset="
    /img/Z1s3TKV-1920w.webp 1920w,
    /img/Z1s3TKV-1280w.webp 1280w,
    /img/Z1s3TKV-640w.webp   640w,
    /img/Z1s3TKV-320w.webp   320w
  "
  type="image/webp"
/>
<source
  sizes="(max-width: 608px) 100vw, 608px"
  srcset="
    /img/Z1s3TKV-1920w.jpg 1920w,
    /img/Z1s3TKV-1280w.jpg 1280w,
    /img/Z1s3TKV-640w.jpg   640w,
    /img/Z1s3TKV-320w.jpg   320w
  "
  type="image/jpeg"
/>

1. 缓存不可变的URL

在图像的URL中嵌入图像中字节的哈希值。
在上面的示例中，我使用图像URL中的Z1s3TKV进行了此操作。
这样，如果图像更改，URL就会更改，并且您可以分别对图像应用无限的缓存过期。
您希望缓存头看起来像这样的cache-control：public，max-age = 31536000，immutable。

immutable是在语义上正确的缓存控制值，但不幸的是，它在浏览器中并未得到广泛支持（我在用Chrome浏览器查看）。
max-age = 31536000是要缓存一年的后备时间。
public对于使您的CDN缓存图像并从边缘传递图像很重要。
但仅在从隐私角度考虑合适的情况下才使用它

1. 延迟加载

在img中添加loading =“ lazy”会指示浏览器仅在图像离屏幕更近且可能会实际呈现时才开始获取图像。

<img loading="lazy" … />

1. 异步编译

在img中添加decoding =“ async”可以使浏览器具有从主线程解码图像的权限，从而避免了用户对用于解码图像的CPU时间的影响。
这应该没有明显的缺点，除了由于遗留原因不能总是默认值。

<img decoding="async" … />

1. 模糊的占位符

   模糊占位符是一种内联图像，它向用户提供了一些图像概念，这些图像最终将加载而无需从网络中获取字节。
   

<img style="
 …
 background-size: cover;
 background-image: 
 url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg'
 xmlns%3Axlink='http%3A//www.w3.org/1999/xlink' viewBox='0 0 1280 853'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeGaussianBlur stdDeviation='.5'%3E%3C/feGaussianBlur%3E%3CfeComponentTransfer%3E%3CfeFuncA type='discrete' tableValues='1 1'%3E%3C/feFuncA%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Cimage filter='url(%23b)' x='0' y='0' height='100%25' width='100%25' 
 xlink%3Ahref='data%3Aimage/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAGCAIAAACepSOSAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAs0lEQVQI1wGoAFf/AImSoJSer5yjs52ktp2luJuluKOpuJefsoCNowB+kKaOm66grL+krsCnsMGrt8m1u8mzt8OVoLIAhJqzjZ2tnLLLnLHJp7fNmpyjqbPCqLrRjqO7AIeUn5ultaWtt56msaSnroZyY4mBgLq7wY6TmwCRfk2Pf1uzm2WulV+xmV6rmGyQfFm3nWSBcEIAfm46jX1FkH5Djn5AmodGo49MopBLlIRBfG8yj/dfjF5frTUAAAAASUVORK5CYII='%3E%3C/image%3E%3C/svg%3E');
 "
  …
/>

英文原文：https://www.industrialempathy...

张鑫旭 AVIF图片格式简介
和使用https://www.zhangxinxu.com/wo...