這兩種徹底不一樣的JPEG加載方式，你確定見過！

現現在網站所使用的的圖片格式多種多樣，可是有一種圖片格式佔到了 74% 的使用量。它就是 JPEG，即聯合圖像專家組。這類文件的後綴一般爲 .jpg 或 .jpeg，是攝影中常見的圖片類型。

JPEG 和圖像壓縮

JPEG 是 1992 年開發的一種用於壓縮圖像的格式，是目前 Internet 上最經常使用的圖像格式，主要用於一些高色深的照片和複雜的圖形展現。JPEG 圖像是使用有損壓縮算法處理過的圖像，在圖像被壓縮時，會丟失細節信息。這是由於建立 JPEG 圖像的目的是最大限度地減小存儲位數，從而有效地減少文件大小。

依靠壓縮減小文件大小，既能夠節省磁盤空間又能縮短傳輸和加載的時間。而更短的傳輸時間讓圖像在網站上的加載速度更快。可是，在大多數狀況下，減少文件大小會對內容產生影響。就照片和圖形來講，減少文件大小可能會致使圖像質量下降。過分壓縮雖然讓文件加載速度快但也會嚴重影響觀看效果。

而隨着互聯網速度愈來愈快，尤爲到了 5G 時代，咱們對圖片和視頻的清晰度也有了超高的要求。這就致使一些網站爲了保證清晰度，圖片的體積都很是大，咱們在瀏覽時就不能一次性看全整張圖，而須要等等圖片逐漸加載。

一般網站使用的 JPEG 的內容顯示一般有兩種類型。

• 基線或標準 JPEG
• 漸進式 JPEG

基線 JPEG（Baseline JPEG）

這是標準的 JPEG 格式壓縮，包括數碼相機和圖像編輯軟件等一些成像產品都會支持。基線 JPEG 最多見的應用之一是在 Web 瀏覽器中呈現的圖像。基線 JPEG 算法在從網絡下載處理數據時逐行渲染圖像。當數據從網絡到達計算機的緩衝區時，數據以流的形式進行處理。雖然壓縮數據的目的是減少文件大小以加快下載速度，但這也取決於網絡的速度和計算機 CPU 處理數據的能力。若是應用程序支持，GPU 還有助於渲染大文件。壓縮時大於 30 MP（百萬像素）的大型高分辨率 RAW 圖像文件可能須要更長的時間來下載和解碼。這就會造成咱們查看大圖時比較常見的從上至下逐行顯示，即首先顯示圖像的頂部。而後它會逐行加載到底部，直到顯示出完整的圖像。

這種加載方式在面對特別大的圖片時，每每須要咱們等待過長才能看到完整圖片，很容易讓網站流失用戶。爲此，網站通常會選擇相對更好一點的方式漸進式 JPEG（Progressive JPEG）。

漸進式 JPEG（Progressive JPEG）

漸進式 JPEG（Progressive JPEG），即PJPEG，是該標準的三種流行壓縮模式之一。漸進式 JPEG 以特定方式壓縮照片和圖形，與基線 JPEG 不一樣，PJPEG 在 Web 瀏覽器中呈現時，會首先給出模糊圖像的外觀。而後一點一點地開始圖片渲染，直到它顯示徹底渲染的圖像。瀏覽器其實是逐行解釋圖像，但在佔位符中提供了完整圖像的模糊預覽。隨着 Web 瀏覽器的渲染引擎處理數據，圖像的對比度開始變得更清晰、更詳細。直到最後渲染完畢，用戶將看到完整的清晰圖像。

固然咱們一直都在強調沒有什麼是完美的，PJPEG 也有不足，來詳細看一下它的優缺點：

可是相比而言 PJPEG 可以起到一種頗有意義的心理效果，讓用戶有東西可看，而沒必要坐着乾等大型圖像慢慢顯示在屏幕上。

目前 PJPEG 適用於大部分經常使用的瀏覽器，包括 Chrome、Firefox 和 Internet Explorer 9 及更高版本。舊版本的 Internet Explorer 在顯示漸進式 JPEG 時存在一些問題，不過這只是很小一部分用戶。而不支持漸進式 JPEG 格式的瀏覽器會像普通 JPEG 同樣加載照片。

建立 PJPEG

通常咱們正常使用圖形編輯軟件時，軟件會自動將照片和圖形保存爲普通 JPEG。若是須要建立漸進式 JPEG 則須要手動調整。好比在 Photoshop 中，將圖像導出爲 JPEG 後，在格式中勾選「連續」，即保存爲 PJPEG。

還可使用免費程序軟件 IrfanView 建立漸進式 JPEG 。

什麼什麼？你說太麻煩？不怕不怕，我要放大招啦！

又拍雲圖片處理支持直接輸出漸進式 JPEG 圖片，使用 圖片 URL + 間隔符 + /progressive/true 參數就能夠，想用就用，不怕麻煩！

若是你是網站管理者，若是你正在被高清大圖的加載方式所困擾，能夠來嘗試一下漸進式 JPEG 加載哦！除了支持圖片輸出設置，又拍雲圖片處理還支持圖片縮小、放大、裁剪、圖片水印、文字水印、銳化、高斯模糊等 40+ 功能，讓您換個花樣玩轉圖片處理。還在等什麼，趕快來試一試吧！

推薦閱讀

MySQL 中存儲時間的最佳實踐

Ansible 快速入門