天天看點

使用漸進式JPG改善使用者體驗

問題如此:當一張JPG壓縮到無法壓縮的程度,但是它的大小還有有點大,你會怎麼做?

      當時聽到這個問題覺得一頭霧水,根本不知道如何回答,後來面試官問我有沒有聽過一種叫做漸進式的JPG格式?我很坦白的說沒有,後來得知原來這是一種我們WEB中

常見的JPG編碼類型之一,使用這種格式的JPG我們發現圖檔在網頁加載時會經曆從模糊到清晰這個過程。可能這樣表述不清晰,下文會以圖檔對比。

使用漸進式JPG改善使用者體驗

       上圖一:

              圖一中我們可以發現圖檔是從上倒下一條一條逐漸加載的,這種JPG壓縮模式叫做順序式編碼(Sequential Encoding),一次将圖像由左到右、由上到下順序

處理。也是一種常見的JPG編碼模式。

       上圖二:

              圖二中我們可以發現同樣是一樣圖檔,因為圖檔較大圖一要逐漸加載完我們才知道這張圖檔的大緻輪廓,但是在圖二上,由于使用了漸進式JPG格式,在圖檔加載

的時候我們已經可以看到了圖檔的大緻輪廓,這種就是漸進式JPG,使用了遞增式編碼(Progressive Encoding)。

       是以?

             1.所謂的漸進式JPG格式就是采用了遞增式編碼的JPG,你可以通過谷歌搜尋關鍵字JPG Progressive Encoding查的更多英文的資料,因為我發現國内這方面的介紹

不是很多。

              2.這種JPG格式是當圖像傳輸的時間較長時,可将圖像分數次處理,以從模糊到清晰的方式來傳送圖像(效果類似GIF在網絡上的傳輸)。

              是以你可能還是不知道我在講什麼。

        于是再次放出例子:

              在QQ空間看相冊的人會發現畫廊顯示的圖檔一開始會非常非常的模糊,後來才逐漸地清晰起來,其實這就是漸進式的顯示效果。我從自己的QQ空間掏了一張圖檔給

大家看看

使用漸進式JPG改善使用者體驗

     整張圖檔都采用了漸進式的圖檔編碼格式,一開始我們浏覽器加載圖檔的時候效果如圖一,直到整片文章加載完畢之後效果如圖二。SO~?講了這麼多還是教大家如何将圖檔

導出成漸進式JPG吧。

       如何實作漸進式JPG格式?方法一:使用Photoshop導出

使用漸進式JPG改善使用者體驗

      步驟一:

          在PS菜單欄選擇“檔案”-》存儲為WEB和裝置所用格式

使用漸進式JPG改善使用者體驗

       步驟二:

           選擇圖檔格式為JPG0-》選中“連續”(經驗不多,歡迎糾誤。)-》“存儲”即可

       方法二:

           沒有PS或者想用别的快捷工具的可以使用工具“PaintShopPro”

      步驟:

           打開軟體PaintShopPro-》打開圖檔-》點選菜單”FILE”-》選擇”Save as”-》儲存類型選擇”JPG”-》Sub Type選擇”Progressive Encoding”即可

使用漸進式JPG改善使用者體驗

其他方法:

2、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

3、PHP

使用imageinterlace和imagejpeg函數我們可以輕松解決轉換問題

<?php
$im = imagecreatefromjpeg(‘pic.jpg’);
imageinterlace($im, 1);
imagejpeg($im, ‘./php_interlaced.jpg’, 100);
imagedestroy($im);
?>
           

4、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)
           

5、 jpegtran

jpegtran -copy none -progressive <inputfile> <outputfile>

6、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);
}