CTK pro

關於 CTK PRO:於2011年夏天展開了偉大的航程,初期以開發手機APP為主,2013年開始跨入Web開發,2015年開始用UCD(User-Centered Design)方法協助客戶釐清需求, 2016年大量採用AWS架構, 並導入策略UX產品為客戶在軟體開發各環節破關!

back to top

給客戶看的網頁設計(五)壓縮圖片!節省 60% 以上的空間,加快網頁速度

2019 網頁大小已接近 4MB,是 2016 的 2 倍,比起 2011 更達到 4 倍以上。歸功於頻寬、4G 網路的普及,載入網頁的速度沒有像網頁大小一樣呈倍數成長,但隨著預期心理提昇,人們瀏覽網頁時等待的耐心變得比以往更少了!


圖片來源

雖然網頁速度不是最直接影響到網頁成效、SEO 的項目,但一般通則是超過「3 秒」,使用者就很有可能跳出正在讀取的頁面。之前 CTK 小記也講過許多優化網頁速度的文章,要檢測網站速度,可以使用 Google PageSpeed Insights 或是 GTmetrix 來找出拖慢網站速度的原因,加以改進。

今天和大家談的,是最簡單,卻也最重要的調整:「適當的圖片」。

這裡只說到圖片,是因為包含圖片尺寸(解析度)、檔案格式、壓縮比例。牽扯到 SEO 等還關係於 alt 項目設定等等,就先來看最重要的「圖片大小」:

最簡單卻也最必要的調整:輸出適當的圖片

企業好不容易請了商業攝影師,拍了漂亮細緻的形象圖、示意/空間圖,要放到官網,呈現產品或企業形象概念,卻常顧慮:「我放這麼小的圖,不會看不清楚嗎?」(網頁設計公司都會提示:「圖片大小在 100kb 內為佳,卻常常收到用雲端空間傳來一張 10MB 的圖檔……)

來示範給大家看,實際壓縮、縮小後的圖檔,在你的電腦/手機,是不是真的可以辨別出來?

別急著往下看解答,點擊放大下面三張圖片,你覺得哪張是壓縮過的,分別的檔案大小又是如何呢?

A

B

C

圖片A:壓縮 50%,jpg 檔,檔案大小 246 KB,解析度有縮放,為:1996X1171

圖片B:原圖,檔案大小 1.8MB,解析度 2674X1569

圖片C:壓縮 50%,jpg 檔,檔案大小 397 KB,解析度 2674X1569

–(解析度上傳時還是有壓縮)

如何?有選到覺得是最正確的圖片嗎?如果你不放大來看(或甚至你的螢幕根本不夠好),是不是很難分辨這之間的區隔呢?要是真的放大三張圖來看,在網頁或手機上,真的看得出來嗎?

A

B

C

由圖片A 到圖片 C 分別是(這裡只擷取 300 x 300 px 大小,故檔案大小不容易超過):

圖片A:原檔未壓縮,檔案大小 94KB

圖片B:壓縮至 70%,檔案大小 53KB

圖片C:壓縮至 30%,檔案大小 41KB

其實網頁顯示顏色時,因為 RGB 代碼,一般是 16 位元(例如 #ff0000,就是紅色,# 008000 是綠色),約有一千六百萬色(甚至是因為裝置的限制,某些裝置只能顯示 256 色 / 8 位元),圖片的壓縮細節損失,才沒有那麼容易看出來勒!

圖片壓縮工具選擇

網頁在上搞(圖片時),最大的 NG 就是放了不可思議大小的圖片檔!一個首頁以 5MB 計算,圖片可能佔了 90% 的網站大小,若有 10張 近 500KB 的圖片來說,全部壓縮到 100KB 以下,網站整體大小可能縮減 70% 以上!

以這篇文章範例來說,是使用 illustrator 圖片編輯轉存時設置壓縮。若沒有專業的影像編輯軟體也沒關係,上網搜「壓縮圖片」其實有許多免費的線上版本可以幫助你縮圖,像是 Tinyjpg,或是 WordPress 的外掛如 WP Smush 都可以達到類似的效果。(這邊還是會建議在作圖或是輸出時,就設定完畢,減少圖檔可能失真的機會)

若是企業 Logo 這種可能需要去背的圖片,就必須存為 png 檔,若能有向量檔,如 svg 檔,在圖片空間節省上也是很有幫助,且 svg 檔更有著放大看也不會出現模糊的優勢,更適合當做網頁中 Logo 的檔案格式使用。

總之若是可以提供壓縮檔、原檔(一般是 psd, ai 檔),給網頁設計公司,上稿時應萬無一失;若是需要自行上稿也別擔心,照著上面的提示,找到適合的大小還是可以壓縮出符合規格的圖片的。

 

大小對了,網頁圖片格式也要正確

列出網頁設計中,常見的圖片格式/大小給大家參考:

• 一般圖片:jpg 檔
• 需要有透明背景的圖檔:png, svg 檔
• 需要有動畫效果:gif, svg 檔

• 網頁中全版 Banner 寬度建議:1920px
• 大面積 Banner 寬度建議:1440px 以上
• 一般大圖 寬度建議:1024 以上
• 中型圖片 寬度建議:800 以上

*高度可依照圖片比例調整,但不宜超出「一個螢幕可顯示之範圍」為準。

細節決定了網頁設計的精緻度

一系列「給客戶看的網頁設計」文章下來,以新文章來說,自然流量都不錯。第一個是希望想要製作網頁的企業/公司,找到適合的網頁設計公司,而非用預算衡量,如此許多看不到的地方、沒想到的地方,就這樣被遺漏過去,最終製作了網站,也難以達到預期成效。

以圖片相關的網頁設計細節還有下面這些,列出以供參考:

 ✓ jpg 壓縮圖片時,很容易將文字邊緣破壞得模糊不清(又稱為破壞性壓縮)
 ✓ 圖片命名盡可能還是以不要太長,且有意義的英文為主
 ✓ 太大的圖片,除了讀取速度,也可能增加主機的負擔
 ✓ svg 檔案輸出時,要格外注意(大小/陰影等)
 ✓ 提供照片時,盡可能不使用手機照出來之成品(感光元件限制)
 ✓ RWD 設計時,圖片注意事項

延伸閱讀

Aron Lai

數位行銷工具應用者。從企劃、文案、社群、網路行銷工具無所不包。 希望大腦可以和網路資料庫連結,緩解資訊焦慮症狀。

Follow: