JPEG文件有兩種保存方式
1.Baseline JPEG（基準式）
2.Progressive JPEG（漸進式）
兩種格式有相同尺寸以及圖像數(shù)據(jù)概漱，它們的擴展名也是相同的湖饱，唯一的區(qū)別是二者顯示的方式不同友鼻。
Baseline JPEG
這種類型的JPEG文件存儲方式是按從上到下的掃描方式，把每一行順序的保存在JPEG文件中锄开。打開這個文件顯示它的內容時，數(shù)據(jù)將按照存儲時的順序從上到下一行一行的被顯示出來称诗，直到所有的數(shù)據(jù)都被讀完萍悴，就完成了整張圖片的顯示。如果文件較大或者網(wǎng)絡下載速度較慢寓免，那么就會看到圖片被一行行加載的效果癣诱，這種格式的JPEG沒有什么優(yōu)點，因此袜香，一般都推薦使用Progressive JPEG撕予。
Progressive JPEG
和Baseline JPEG一遍掃描不同，Progressive JPEG文件包含多次掃描蜈首，這些掃描順尋的存儲在JPEG文件中实抡。打開文件過程中，會先顯示整個圖片的模糊輪廓欢策，隨著掃描次數(shù)的增加吆寨，圖片變得越來越清晰。這種格式的主要優(yōu)點是在網(wǎng)絡較慢的情況下踩寇，可以看到圖片的輪廓知道正在加載的圖片大概是什么啄清。在一些網(wǎng)站打開較大圖片時，你就會注意到這種技術俺孙。
為什么要用漸進式圖片
增加用戶體驗辣卒，開始能看到個大概輪廓
不占過多內存
-
Chrome + Firefox + IE9瀏覽器下，漸進式圖片加載更快鼠冕，而且是快很多添寺，至于其他瀏覽器，與基準式圖片的加載一致懈费，至少不會拖后腿（一個名叫Ann Robson的人计露，最近對各個瀏覽器下漸進式圖片呈現(xiàn)做了測試）
在測試各個瀏覽器（未說明都為最新版本）時發(fā)現(xiàn)：
1.Chrome對“漸進”和“交錯”都支持良好
2.Safari(PC/MAC)對“漸進”不支持，“交錯支持良好”
3.Fiefox對“漸進”和“交錯”都支持良好
4.Opera對“漸進”和“交錯”都支持良好
5.IE9對“漸進”和“交錯”都不支持
- 開始大小框架就定好憎乙，不會像基準式圖片一樣票罐，由于尺寸未設定而造成回流——提高的渲染性能
檢查圖片是否是漸進式圖片
我用的是imagemagick,先安裝了homebrew
$ brew install imagemagick
輸入要檢查圖片
$ identify -verbose file.jpg | grep Interlace
如果返回 Interlace: JPEG 圖片是漸進式
如果返回 Interlace: None 圖片不是漸進式
把圖片變成jpeg漸進式的幾種方法
1.Photoshop,sketch
-
在photoshop中有“存儲為web所用格式”，打開后選擇“連續(xù)”就是漸進式JPEG泞边。
image 在sketch中導出為 progressive
2.PHP
- 使用imageinterlace和imagejpeg函數(shù)我們可以輕松解決轉換問題该押。
<?php
$im = imagecreatefromjpeg('pic.jpg');
imageinterlace($im, 1);
imagejpeg($im, './php_interlaced.jpg', 100);
imagedestroy($im);
?>
3.利用ImageMagick
方法一：convert 2.jpg -interlace Plane 2.jpg
方法二：magick 2.jpg -interlace Plane 2.jpg
相關文章
【Mac技巧】分享幾個打包好的圖像處理腳本：https://sspai.com/post/29492
【如何生成漸進式JPEG】：http://www.qdfuns.com/notes/13972/b445e237058b19b3ab2b55bf5789b72f
