渐进式加载 - 基础讲解

时间 2019-11-24

标签渐进加载基础讲解繁體版

原文原文链接

前言:

咱们在PC端用浏览器看图片的时候,常常是先看到一张模糊图,而后再渐渐的变得清晰,这种状况在看漫画的时候尤为常见(模糊图以下),这种效果就叫作渐进式加载.渐进式加载可以大大的提高体验感,咱们先来了解一下渐进式加载的原理.

(图片来自网络)javascript

1.JPEG

要作到渐进式加载,咱们的图片须要是JPEG格式,而JPEG格式的图片又分为两种,咱们要作到渐进式加载的话,须要的是Progressive JPEG.

(1)Baseline JPEG（标准型）

这种格式的图片在保存信息的时候,是从上往下,将每一行的数据顺序的保存起来的,因此读一部分就展现的话,那么效果就会像是从上往下一点一点展现.

(图片来自网络)php

(2)Progressive JPEG（渐进式）

这种格式的图片在保存信息的时候,是一帧一帧的存储的,若是逐帧逐帧的读的话,就会先看到模糊图,而后一点一点变清晰

(图片来自网络)java

(图片来自网络)python

2.解码

如何判断是否JPEG格式的图片呢?下面引用一段Glide框架的代码

//ImageHeaderParser.java

private static final int EXIF_MAGIC_NUMBER = 0xFFD8;

// JPEG.
if (firstTwoBytes == EXIF_MAGIC_NUMBER) {
   return JPEG;
}复制代码

咱们能够看出,JPEG是以FFD8开头的

其实JPEG是以FFD8开头,FFD9结尾,FFDA表明一个帧的开头

FFD8 ... FFDA ... FFDA ... FFDA ... FFD9复制代码

Baseline JPEG 里面只有一个FFDA

Progressive JPEG 里面含有多个FFDA

比较完整的数据结构以下

(图片来自Wiki)
en.wikipedia.org/wiki/JPEGlinux

3.如何保存或者转换成JPEG

(如下转换方法来自网络,因为非java代码,因此没有作验证,特此说明一下)web

一、PhotoShop

在photoshop中有“存储为web所用格式”，打开后选择“连续”就是渐进式JPEG。浏览器

二、Linux

检测是否为progressive jpeg ： identify -verbose filename.jpg | grep Interlace（若是输出 None 说明不是progressive jpeg；若是输出 Plane 说明是 progressive jpeg。）
将basic jpeg转换成progressive jpeg：> convert infile.jpg -interlace Plane outfile.jpg缓存

三、PHP

使用imageinterlace和imagejpeg函数咱们能够轻松解决转换问题。网络

<?php
    $im = imagecreatefromjpeg('pic.jpg');
    imageinterlace($im, 1);
    imagejpeg($im, './php_interlaced.jpg', 100);
    imagedestroy($im);
?>复制代码

四、Python

import PIL
from exceptions import IOError
img = PIL.Image.open("c:\\users\\biaodianfu\\pictures\\in.jpg")
destination = "c:\\users\\biaodianfu\\pictures\\test.jpeg"
try:
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)
except IOError:
    PIL.ImageFile.MAXBLOCK = img.size[0] * img.size[1]
    img.save(destination, "JPEG", quality=80, optimize=True, progressive=True)复制代码

五、jpegtran

jpegtran -copy none -progressive <inputfile> <outputfile>复制代码

六、C

using (Image source = Image.FromFile(@"D:\temp\test2.jpg")) { 
    ImageCodecInfo codec = ImageCodecInfo.GetImageEncoders().First(c => c.MimeType == "image/jpeg"); 
    EncoderParameters parameters = new EncoderParameters(3);
    parameters.Param[0] = new EncoderParameter(System.Drawing.Imaging.Encoder.Quality, 100L);
    parameters.Param[1] = new EncoderParameter(System.Drawing.Imaging.Encoder.ScanMethod, (int)EncoderValue.ScanMethodInterlaced);
    parameters.Param[2] = new EncoderParameter(System.Drawing.Imaging.Encoder.RenderMethod, (int)EncoderValue.RenderProgressive); 
    source.Save(@"D:\temp\saved.jpg", codec, parameters);
}复制代码

4.效果

明白了渐进式加载的原理后,咱们就能想办法在app端也作到渐进式加载的效果了.

(大概就是判断是否JPEG图片,而后根据每一帧的节点来判断并决定是否须要加载)数据结构

下面展现一下效果图

(1)原图

(Progressive JPEG的图一打水印就变成Baseline JPEG,应该是CSDN打水印保存的时候处理了)

(2)解码到第一个FFDA与第二个FFDA的中间

(3)恰好解码到第二个FFDA

(4)解码到第五个FFDA

须要看图片二进制结构的,能够下载一些工具(如hex-editor-neo)
hex-editor-neo下载

在后面的文章里面咱们将具体讲解如何在app端作渐进式加载