JPEG 的兩種渲染方式:Baseline JPEG(標準型)和 Progressive JPEG(漸進式)
2018/11/17
萌芽站長
5,188 2
多媒體 , 網路應用 , 網站技術 , 靜圖處理
⚠️ 溫馨提醒:我們發現您可能啟用了廣告阻擋器,請將本站加入白名單以正常閱讀文章內容,謝謝支持 ❤️
JPEG 是一種破壞性圖像格式,藉由破壞性壓縮,在視覺可接受的前提下縮小圖檔大小,減少傳輸圖檔所需要的流量,是網路上非常普及的圖片格式,我們知道,JPEG 其實有兩種渲染方式,這個僅在圖檔載入時候會有不一樣,分別是 Baseline JPEG(標準型)和 Progressive JPEG(漸進式),大多的 JPEG 都是前者標準型。接著我們分別介紹,並提供適合使用該渲染方式的時機,以及如何轉換圖檔的渲染方式。
Baseline JPEG(標準型)
標準型(Baseline)是大多 JEPG 圖檔採用的渲染方式,顯示方式是由上至下載入,所以尚未載入的部分就可能是黑色的(或者預設的背景),如果遇上網速過慢的情況,顯示的過程就會看不到大部分的圖檔。大部分的圖片編輯軟體都是輸出標準型的圖檔,所以如果你需要採用標準型渲染,大多圖片編輯軟體都可以輸出這樣的 JEPG。
✅ 適合使用的情況:網站上的小圖檔、自行保存的任何圖檔。

▲ Baseline JPEG(標準型)載入示意圖。
Progressive JPEG(漸進式)
漸進式(Progressive)是少數 JPEG 圖檔採用的渲染方式,比起標準型較晚發展出來,最主要是改變了載入的方式,會是模糊至清晰的方式載入,網速慢的情況下可以讓使用者先看到圖檔大致的樣子。少部分圖片編輯軟體支援,如:Photoshop,也可以透過線上工具將標準型的圖檔轉換為漸進式的圖檔,如:Jpeg.io、IMG online。
✅ 適合使用的情況:網站上的大圖(如:背景圖片)、社群串流圖(如:聊天室傳輸的圖檔)。

▲ Progressive JPEG(漸進式)載入示意圖。
贊助廣告 ‧ Sponsor advertisements
fooView:手機的多功能浮動按鈕、截圖錄影、區域擷取、文字取出、手勢切換
📆 2017-12-17
📁
多媒體, 行動平台, APP推薦, Android, 串流錄製
AI 預測熊出沒!上智大學深澤研究室推出日本熊遭遇風險地圖
📆 2025-11-04
📁
生活相關, 海外旅遊, 網路應用, 人工智慧
OpenShot Video Editor:自由的影片編輯器
📆 2016-11-23
📁
軟體介紹, 多媒體, 影片編輯
Twemoji:網頁原生表情貼完美替換成 Twitter 表情貼示範
📆 2019-06-28
📁
網站技術, HTML, CSS, JavaScript, jQuery
OpenStreetMap:上傳GPS軌跡,造福更多人!
📆 2016-11-10
📁
網路應用, GIS/GPS, 世界地理
Google Doodle 作品
📆 2014-05-28
📁
網路應用
Apache Tomcat 完整安裝教學、附更改通訊埠 & 虛實位址對應 & 起始檔案設定教學
📆 2019-03-04
📁
軟體介紹, 軟體應用, 網站技術, 伺服器, JSP, 架站資源
PHP:glob() 取得匹配之檔案路徑、filesize() 取得指定檔案大小
📆 2021-10-22
📁
網站技術, PHP
留言區 / Comments
萌芽論壇