渐进式图片

渐进式图片

通常情况下,JPGPNG 格式的图片的呈现效果是自上而下的线性加载,但也有另外一种加载方式,就是由模糊逐渐变清晰的渐进加载。

图片来源网络,侵删

第一种方式的图片压缩模式采取的是顺序式编码(Sequential Encoding), 将图像从左到右,由上至下顺序处理;第二种方式的图片采取的是另外一个压压缩模式 — 递增式编码(Progressive Encoding)。

生成渐进式图片

将普通的图片转成渐进式图片有好多种方式,下面介绍一些常用的转换方法:

  • PS 导出图片时勾选 连续 就能导出渐进式图片

  • 通过 imagemagick 工具转换

    1
    magick img -interlace Plane imgR

    介绍下通过 shell 脚本转换的方法,具体的语法参考官网

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    #!/usr/bin/env bash

    :<<EOF
    Description: 该脚本用于将 PNG、JPG 格式图片转换为 Progressive 图片

    Suggestion: 请提前安装好 mgick

    maick 官网 http://www.imagemagick.org/script/index.php

    安装方式 brew install mgick
    EOF

    #for %I in \(*.??g\) do magick %I -interlace Plane %%~nxI
    for i in *.[jp][pn]g

    # do echo $i
    do magick $i -interlace Plane $i

    done
    1
    2

    ·1.

    -interlace 可选的命令可选的 Type 主要有 3 种

    • None: 逐行扫描方式 (RGBRGBRGBRGBRGBRGB…)
    • Line: 逐行交错扫描方式 (RRR…GGG…BBB…RRR…GGG…BBB…)
    • Plane: 交错扫描方式,即渐进式加载方式 (RRRRRR…GGGGGG…BBBBBB…)
  • 通过 GraphicsMagick 工具

  • 七牛云等 CDN 服务商

一点思考

对于大图,个人觉得第二种加载方式会比第一种更为友好,特别是在网络不好的场景下;但对于几十 K 的小图,两种方式在正常网络下不会又太大的区别。

另外,渐进式图片有点吃内存,特别是图片量比较大的情况下。