如何提高網站速度?什麼是next-gen格式的圖片?

Project Manager Ili Wang

2020-04-30
    Article outline

滿常收到客戶在上線後,反應自己的網站過慢,一進去客戶的網站一看,阿呀!全部都是大圖呢!

而通常也不知道到底犯了什麼錯誤所導致,以及從何改起?這時通常我們都會透過Google PageSpeed Insights,先大概看一下所列出來的圖片,當作"參考",讓你比較快的知道要從哪裡改善,應該絕大部分的用戶都會看到以下資料:提供next-gen格式的圖片

這時候就會有疑問了,什麼是next-gen格式的圖片?

白話來講,就是這三種圖片格式:JPEG2000、JPEG XR、Web P,以下簡單做介紹:

 

1.JPEG2000

JPEG2000是由聯合圖像專家小組創建和維護,通常被認為是未來取代JPEG的下一代圖像壓縮標準,副檔名大多是為.jp2,雖然JPEG 2000在技術上有一定的優勢,但普遍仍是較少使用的圖像文件。

與JPEG相較,JPEG 2000比較明顯的優點就是沒有JPEG壓縮中的馬賽克失真效果,主要為模糊失真。但在低壓縮比情形下(比如壓縮比小於10:1),JPEG圖像質量還是會比JPEG 2000要好,因此JPEG 2000適用在壓縮比較高的情形下,優勢才會明顯。

 

2.JPEG XR

JPEG XR由Microsoft開發,屬於Windows Media家族的一部分,用於替換JPEG2000,增加HDR支援。微軟公司宣稱JPEG XR「使用與JPEG算法相當的計算量與內存消耗可以得到明顯的與JPEG 2000相當的圖像品質。在有損壓縮的情況下可以得到明顯比JPEG好的品質並且文件大小減小一半」。不過仍然是較少使用的圖像文件格式。

 

3.Web P

Web P則由Google推出。跟JPEG採用同樣的壓縮技術,根據Google較早的測試,WebP的無失真壓縮比網路上找到的PNG檔少了45%的檔案大小,即使這些PNG檔在使用pngcrushPNGOUT處理過,WebP還是可以減少28%的檔案大小。也因為是Google本身自行推出,因此在主流瀏覽器Google Chrome是支援的,相對於前兩者來說,會較方便。

 

以上這些圖檔格式的壓縮效率雖然優於PNG或JPEG,能夠減少數據用量,較快的完成下載。但由於next-gen格式的圖片尚未這麼普遍,有些瀏覽器甚至未能支援,也可能因為高壓縮而導致圖片大大失真、色偏,因此這個只是改善方式之一,也能先從將網站內的PNG先轉為JPEG就好,除非圖片真的需要使用透明背景才有必要用PNG。

 

接下來再將JPEG圖檔壓縮、調整解析度,可參考以下兩篇文章的作法:

圖片讀取太久,使用者抱怨流量都被吃光了-解析度篇

圖片讀取太久,使用者抱怨流量都被吃光了-壓縮篇

 

總體而言,可以先從以下方式做好圖片的管理:

1. 若非需要使用透明背景,將圖檔儲存為JPEG格式

2. 圖片尺寸寬不超過1920px,以適當尺寸大小儲存,並且設定於72dpi即可

3. 壓縮檔案大小確保在1M以下

 

在管理網站圖片,可以依據上述重點來製作與上傳圖片,這樣子就可以為網站釋出更多流量,並且提升網站的效能哦!


Related information

Other Articles