圖片壓縮

圖片壓縮不失真 加速網頁載入速度

2957

Preview Summary

website Reviews : 34 5.0

網頁文件檔案當中通常以圖片檔案的尺寸佔據流量的最大部份,為了因應加快網頁載入的需求,所以會採行圖片延遲載入的 JavaScript,或是直接將圖片檔案予以壓縮,而圖片壓縮成適合網頁型態對於網頁載入速度有很大的幫助。本篇介紹另一種不失真的另類壓縮法,讓你的圖檔既小巧又清晰。

魔鏡啊~魔鏡~請問哪一種圖片壓縮的方式最有效 ?

上一篇 Google 行動版友善網頁標示提及:圖片的載入對於網頁載入速度的分析評分影響甚巨。是否意味著,使用照片圖檔的網頁註定要被 Google Mobile Search 打入冷宮?!這個消息肯定對於喜愛分享實境圖照的網友有很大的打擊。於是你可以發現各種圖片壓縮的線上服務或壓縮軟體,如同特效藥般瀰漫在搜尋結果中。

圖檔的原罪

進入主題之前,有件事應該先思考一會。
當你認同圖片檔案容易造成載入緩慢,並企圖壓縮圖檔時,有沒有想過為什麼要放上圖片?不去使用它不是更快嗎?使用超連結或燈箱效果不是更節能嗎?模糊了焦點是好的選擇嗎?

鬼遮眼的鴕鳥

當你想盡辦法將照片壓縮成少於 30% 的體積,一張分不清楚是如花還是妳的照片又有何意義呢?儘管各家自吹自擂地聲稱壓縮後的圖片「真的」、「幾乎」、「看不出差異」﹍我想大概是忘了使用標點符號斷句,真正的意思是:使用的裝置顯示較差或是忘記戴上眼鏡的訪客,他們真的幾乎看不出壓縮後的差異。

網絡環節的矛盾

當我們一方面節約載入、增加效能,讓網頁載入更順暢輕巧。另一方面又開發高於人類眼力分辨能力的高解析裝置、超高速網際通聯系統。當我使用高解析裝置零時差載入被壓縮過不堪入目的圖檔﹍是怎麼一回事?

圖檔壓縮不失真的選擇

目前最常使用的圖片格式 jpg、jpeg 是一種可壓縮的方便格式;檔案也很小,搜尋一下可以找到許多相關資源。但 jpg 也是一種壓縮後不可逆的格式,如果壓縮效果不是很好,通常我會放棄高壓縮的選項。

這次值得我介紹的線上圖檔壓縮服務,叫做  Tiny Png。它適用的格式是 png,特點是可以依據網頁用色的實際數量壓縮成更高比率的輸出,而且是可逆性可修改的。如果你的圖片屬於顏色不沈重複雜、漸層陰影不明顯、偏向二次元視覺質感的圖檔,可以考慮將 jpg 轉成 png;或是原檔輸出時選擇 png 格式再線上壓縮。

例如:教學用的螢幕擷取、單純構圖與分色的圖片、淡彩質感的照片、小尺寸預覽圖、平面設計所輸出的圖檔﹍

壓縮原理

也許你會覺得原理不重要;結果才重要。那麼我先說結論。
Jpg 每次壓縮都會破壞畫質,即使後來放大也無助於增加品質。但 Tiny Png 說它是壓縮畫質不太正確,它只會壓縮檔案大小;畫質幾乎無損,這是以網頁顯示而言,在技術上來說,檢視位元色編字節壓縮前後的圖片仍是不同。

舉個例,現在有一家五口住在一棟五層樓房裡,每人各自分住於一層樓。而 Tiny Png 的工作就是請這五個人搬到同一層樓去;其餘四層樓則節省空間,但這一家人並無減損人口;但少了隱私。通常 jpg 會砍隻手腳,或挖個眼珠子讓他們壓縮住到小一點的房子。

而這種索引色的特色只有在網頁上才能使用,也因此可以作最大的「壓縮」而無損畫質。你在電腦裝置上是看不出差異的,因為它壓縮的只有一些無用的資訊預留區與位元空間並採取特殊的過濾技術。所以可以放心地壓縮它而不必忍痛看著模糊的圖片。但如果是較大的拍攝照片可能需要考慮比較一下檔案大小而定,畢竟尚未壓縮的 png 原檔會較大。

圖檔壓縮工具

實際操作流程進入它的網頁就知道。準備好 png 檔案,拉到資料框裡面,大熊貓就會自動壓縮照片,然後下載。也可以購買它的 Photoshop 的插件,安裝後無須每次透過網頁上傳下載並可批次處理,有更多壓縮選項與預覽。

Tiny Png 線上圖檔壓縮服務
Tiny Png 線上圖檔壓縮服務

Tiny Png 不僅可壓縮 PNG 檔案,另增添 JPG 壓縮功能。並提供免費 WordPress 壓縮插件。

我要進階介紹的是 png 的有損壓縮;相當於 jpg 的壓縮,但能夠讓檔案更小。萬一該線上服務停用了,仍可以透過 Photoshop 執行壓縮。我不太喜歡介紹網路服務主要是因為網路服務的生命週期大約 3~5 年而已,能繼續保持的也可能因為併購而停止免費服務。

Photoshop 壓縮

首先當然必須有 Photoshop 繪圖軟體。適合圖檔用色較少、背景色單純或背景透明的類型。將格式轉成 png 後依照圖解修改,完成後可得極小的檔案;媲美 Webp 格式。

  • 選擇影像 – 調整 – 色調分離,如圖 1
  • 調整色階至最低程度影響;單色可拉到底,如圖 2
  • png 選項選最小、無交錯,避免多次掃描,如圖 3
  • 將圖檔傳送至熊貓壓縮
  • 影像模式 – 索引色儲存,如圖 4

於圖 3 若使用大圖檔則選擇交錯式。最後一項是在線上服務停止後所採行的方法,雖然比不上熊貓壓縮的技術。

  • 色調分離用以過濾相同色碼
  • 色階範圍越小 檔案越小
  • 小型圖檔無須使用交錯式
  • 不透過線上服務的壓縮法

內嵌圖檔的要點

僅依賴圖片壓縮是不夠的,內嵌圖檔時最好與框架尺寸一致,否則壓縮得再小仍舊被 Google 認定為需要改進;扣分。所以具備圖檔網址尺寸參數的相簿模組就很方便,例如 Picasa。WordPress 則需要事先設定 Media 的各式尺寸以符合實際的文章框架。

假設我的文章框架樣式為 width: 500px,內嵌所使用的圖片寬度也應該是 500px。圖片只能比 500px 小;超出則不合格。這時以 100% 縮放框架而撰寫的樣式如果沒有設置基準點就會有麻煩了!Google 會以 320px 為最大值,任何圖片原檔超出 320px 就出局!

Mobile-friendly 很麻煩,對吧!

34
· ·