在前端優(yōu)化過程當(dāng)中,為了提升用戶體驗(yàn)，一種叫做progressive jpegs的技術(shù)正被廣泛的應(yīng)用著。
Baseline JPEG和Progressive JPEG的區(qū)別：
JPEG文件格式有兩種保存方式。他們是Baseline JPEG和Progressive JPEG。
兩種格式有相同尺寸以及圖像數(shù)據(jù)，他們的擴(kuò)展名也是相同的，唯一的區(qū)別是二者顯示的方式不同。
-
Baseline JPEG
這種類型的JPEG文件存儲(chǔ)方式是按從上到下的掃描方式，把每一行順序的保存在JPEG文件中。打開這個(gè)文件顯示它的內(nèi)容時(shí)，數(shù)據(jù)將按照存儲(chǔ)時(shí)的順序從上到下一行一行的被顯示出來，直到所有的數(shù)據(jù)都被讀完，就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡(luò)下載速度較慢，那么就會(huì)看到圖片被一行行加載的效果，這種格式的JPEG沒有什么優(yōu)點(diǎn)，因此，一般都推薦使用Progressive JPEG。
-
Progressive JPEG
和Baseline一遍掃描不同，Progressive JPEG文件包含多次掃描，這些掃描順尋的存儲(chǔ)在JPEG文件中。打開文件過程中，會(huì)先顯示整個(gè)圖片的模糊輪廓，隨著掃描次數(shù)的增加，圖片變得越來越清晰。這種格式的主要優(yōu)點(diǎn)是在網(wǎng)絡(luò)較慢的情況下，可以看到圖片的輪廓知道正在加載的圖片大概是什么。在一些網(wǎng)站打開較大圖片時(shí)，你就會(huì)注意到這種技術(shù)。
Progressive JPEG的優(yōu)點(diǎn)：
- 用戶體驗(yàn)
一個(gè)以progressive方式編碼的jpeg文件，在瀏覽器上的渲染方式是由模糊到清晰的。用戶能在漸變的圖像當(dāng)中獲得所需信息的反饋。如果內(nèi)容不是用戶所期待的，用戶就能提前前往新的頁面。 - 文件大小
有實(shí)驗(yàn)證明，在JPEG文件小于10KB的時(shí)候，使用標(biāo)準(zhǔn)型編碼（Huffman表已經(jīng)被優(yōu)化）的JPEG文件要小于使用漸變式編碼的JPEG文件（發(fā)生概率為75%）。當(dāng)文件大于10KB時(shí)，漸變式編碼的JPEG文件有94%的概率擁有比標(biāo)準(zhǔn)編碼的文件更小的體積。
操作步驟：
-
Photoshop
Photoshop存儲(chǔ)Jpeg格式圖片時(shí)，選擇如下即可：
- Linux
檢測是否為progressive jpeg ：
identify -verbose filename.jpg | grep Interlace
//如果輸出 None 說明不是progressive jpeg；
//如果輸出 Plane 說明是 progressive jpeg。
將basic jpeg轉(zhuǎn)換成progressive jpeg：
convert infile.jpg -interlace Plane outfile.jpg
- 使用imageinterlace和imagejpeg函數(shù)我們可以輕松解決轉(zhuǎn)換問題。
<?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
在存儲(chǔ)為PNG的時(shí)候，選擇“交錯(cuò)”就可以得到和漸進(jìn)式JPG圖片一樣的PNG效果了。
參考文章
Baseline JPEG和Progressive JPEG的區(qū)別
使用漸進(jìn)式JPEG來提升用戶體驗(yàn)
