更多关于渐进式图片加载的实现

在以前的一篇文章中，我仔细分析了Medium.com用来展示图片的技术，这种技术可以在展示图片的时候让图片从一张模糊的图片过渡到一张清晰的图片。从那以后，我找到了其他一些同样采用相似方式展示图片的网站。下面让我们来看一下Quora, Quartz 以及 Clicktorelease 是如何实现的。

快速导读

图片是网页中最大的静态资源，他们通常会占据三分之二的空间。图片优化和选择正确的图片格式是至关重要的。另外，有些网站会在图片没有加载的时候，使用小的缩略图当作占位符。这种技术通常也被称作“blur-up“。这种技术主要是为了提升用户感知性能，如果搭配懒加载使用，还可以达到节省流量的效果。

当然这项技术还是有其他可替代的技术的。其中一种是使用一张单独的JPEG图片，调整它的扫描脚本使得可以快速渲染出一个原始的像素化的版本，并且在后续扫描中逐步渲染出最终清晰的图片。我推荐你通读Progressive JPEGs and green Martians 去更了解这项技术。

还有一点，如果你喜欢图片加载优化这方面的内容，可以关注Cloudinary’s Blog，里面有很多关于这方面话题的博文。

Quartz

Take a look at the following video, recorded when accessing a page on QZ.com with a throttled connection:

看一下下面的这个视频，它记录着当使用慢速的网络访问QZ.com的网页时，Quartz's 的方式按照下面的步骤实现：

1. Request a small <img /> that will be blurred. In their case, they use 50px width images, with a 80% quality.
2. 请求一个小的用于被模糊的<img />。在这种情况下，他们使用宽度为50px，质量为80%的图片。
3. 通过CSS filter应用模糊效果。
4. 请求一个大的图片。

关于Quartz的一个有趣的地方在于，他们使用响应式图片的语法去标记指定大图片。最大的不同点在于他们使用data-srcset属性，这样他们就可以控制何时发起请求并且防止浏览器在标记被解析之后去请求大尺寸的图片。

我发现这种方式非常优雅，因为他们尝试遵循“标准”的方式去处理图片，就是通过增加额外的字段以实现懒加载和实现过度动画。

<figure class="progressive-image featured-image size-extra-large">

  <picture style="padding-bottom: 56.1875%; background-image: url(https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50);">

    <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=50">

    <img alt="INDIA-fishermen" />

    <noscript>
      <img src="https://qzprod.files.wordpress.com/2017/01/fish.jpg?quality=80&strip=all&w=320" alt="INDIA-fishermen">
    </noscript>
  </picture>
  <figcaption>...</figcaption>
</figure>

Quora

Quora也是在他们的po文里面实现了图片blur-up技术。例子详见head to this page。

这里我们可以看到当显示模糊占位图片的时候页面的样子。

让我们深入代码来看看到底时如何实现的。首先，让我们来看看HTML标记：

<div>


    <canvas class="qtext_image_placeholder portrait qtext_image zoomable_in zoomable_in_feed"
        width="499"
        height="874"
        data-src="data:image/PNG;base64,UklGRmgAAABXRUJQVlA4IFwAAADwAQCdASoGAAoAAUAmJYgCdEf/g…iD0z/yA/5ipcuk5xHSdrS38j8CkH7s+vKeZu9EwRy0f/KPIlo/+UifdfcpiRcJiRnXXAAAAA==">
    </canvas>




    <img src />
</div>

为什么同时使用data-src和master-src？master_src 图片是当点击图片获取更大尺寸时加载的那张图片。

Quora没有使用模糊效果。他们使用canvas.drawImage()在canvas里渲染小的缩略图。你可以看到通过查看他们的代码发现这个方法，在捆绑在主要JS文件的shared/lazy_load_images模块中可以看到：

// draw the data-uri image on the canvas
function a(e) {
    if (e.getAttribute("data-src")) {
        var t = new Image;
        t.src = e.getAttribute("data-src");
        var i = e.getAttribute("width")
          , n = e.getAttribute("height")
          , o = e.getContext("2d");
        t.addEventListener("load", function() {
            o.drawImage(t, 0, 0, i, n)
        }, false)
    }
}
// go through all canvas on the page with a data-src
function r() {
    var e = document.querySelectorAll("canvas[data-src]");
    d.insertionQ("canvas[data-src]").every(function(e) {
        a(e)
    }),
    [].forEach.call(e, a)
}

简单来说，Quora所使用的技术主要包括：

1. 在canvas中渲染一个内联的非常小的png。
2. 使用Webp（如果支持的话）或者其他格式请求大尺寸图片。
3. 将大尺寸图片设置为<img />元素的资源，然后逐渐变化它的透明度并且隐藏canvas。

Clicktorelease

Clicktorelease.com, @thespite，刚刚重新设计过，也为图片设置了懒加载。

这里最重要的部分是缩略图并不是要加载的图片本身，而是缩略图DCT矩阵的值，这使得负载非常非常小。

加载图片的步骤具体如下：

1. 请求thumb-src图片。这是一个16x4的PNG 缩略图，通常大小在300B左右。
2. 创建一个<canvas />并且在上面绘制通过反向计算缩略图的DCT得到的图片。
3. 使用original-src地址请求大尺寸的图片。如果浏览器支持webp格式，那么“.webp”就会被添加到src上，这样就会请求webp格式的图片。

原始的标记大概是这样的:

<div>




    <div>

    <div>

        <noscript><img src="/images/graphical-web-2016.jpg"></noscript>
    </div>
</div>

我认为这是一个非常好关于渐进增强的例子，提供了<noscript> 作为替代，并且逐步叠加效果，从一个固定的背景图片，到一个模糊的图片，再到最后的支持webp的大尺寸的图片。

总结

看到实现渐进式图片加载的这些微小的变化非常有趣，其中有使用Javascript实现的，有基于响应式图片实现的，有使用CSS filters实现的，还有使用canvas实现的。

如果你想要一个基础的例子，可以移步my “Reproducing Medium loading image effect” pen。如果你也看到其他的网站实现了同样的技术，请记得一定要告诉我。

相关内容

我在我的RenderConf 2017的演讲Progressive Image Rendering中涉及到这个话题，当然这中间还一并提到其他一些可以使得图片更高效加载的技术。

我也写过关于使用SVG去创建占位符的方法，详见Using SVG as placeholders — More Image Loading Techniques。

原文发布时间：2018-07-02

本文来源掘金，如需转载请紧急联系作者