2019 網(wǎng)頁(yè)大小已接近 4MB，是 2016 的 2 倍，比起 2011 更達(dá)到 4 倍以上。歸功於頻寬、4G 網(wǎng)路的普及，載入網(wǎng)頁(yè)的速度沒有像網(wǎng)頁(yè)大小一樣呈倍數(shù)成長(zhǎng)，但隨著預(yù)期心理提昇，人們?yōu)g覽網(wǎng)頁(yè)時(shí)等待的耐心變得比以往更少了！

（圖片來(lái)源）

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

今天和大家談的，是最簡(jiǎn)單，卻也最重要的調(diào)整：「適當(dāng)?shù)膱D片」。

這裡只說到圖片，是因?yàn)榘瑘D片尺寸（解析度）、檔案格式、壓縮比例。牽扯到 SEO 等還關(guān)係於 alt 項(xiàng)目設(shè)定等等，就先來(lái)看最重要的「圖片大小」：

最簡(jiǎn)單卻也最必要的調(diào)整：輸出適當(dāng)?shù)膱D片

企業(yè)好不容易請(qǐng)了商業(yè)攝影師，拍了漂亮細(xì)緻的形象圖、示意/空間圖，要放到官網(wǎng)，呈現(xiàn)產(chǎn)品或企業(yè)形象概念，卻常顧慮：「我放這麼小的圖，不會(huì)看不清楚嗎？」（網(wǎng)頁(yè)設(shè)計(jì)公司都會(huì)提示：「圖片大小在 100kb 內(nèi)為佳，卻常常收到用雲(yún)端空間傳來(lái)一張 10MB 的圖檔……）

來(lái)示範(fàn)給大家看，實(shí)際壓縮、縮小後的圖檔，在你的電腦/手機(jī)，是不是真的可以辨別出來(lái)？

別急著往下看解答，點(diǎn)擊放大下面三張圖片，你覺得哪張是壓縮過的，分別的檔案大小又是如何呢？

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

圖片B：原圖，檔案大小 1.8MB，解析度 2674X1569

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

–（解析度上傳時(shí)還是有壓縮）

如何？有選到覺得是最正確的圖片嗎？如果你不放大來(lái)看（或甚至你的螢?zāi)桓静粔蚝茫?，是不是很難分辨這之間的區(qū)隔呢？要是真的放大三張圖來(lái)看，在網(wǎng)頁(yè)或手機(jī)上，真的看得出來(lái)嗎？

由圖片A 到圖片 C 分別是（這裡只擷取 300 x 300 px 大小，故檔案大小不容易超過）：

圖片A：原檔未壓縮，檔案大小 94KB

圖片B：壓縮至 70%，檔案大小 53KB

圖片C：壓縮至 30%，檔案大小 41KB

其實(shí)網(wǎng)頁(yè)顯示顏色時(shí)，因?yàn)?RGB 代碼，一般是 16 位元（例如 #ff0000，就是紅色，# 008000 是綠色），約有一千六百萬(wàn)色（甚至是因?yàn)檠b置的限制，某些裝置只能顯示 256 色 / 8 位元），圖片的壓縮細(xì)節(jié)損失，才沒有那麼容易看出來(lái)勒！

圖片壓縮工具選擇

網(wǎng)頁(yè)在上搞（圖片時(shí)），最大的 NG 就是放了不可思議大小的圖片檔！一個(gè)首頁(yè)以 5MB 計(jì)算，圖片可能佔(zhàn)了 90% 的網(wǎng)站大小，若有 10張 近 500KB 的圖片來(lái)說，全部壓縮到 100KB 以下，網(wǎng)站整體大小可能縮減 70% 以上！

以這篇文章範(fàn)例來(lái)說，是使用 illustrator 圖片編輯轉(zhuǎn)存時(shí)設(shè)置壓縮。若沒有專業(yè)的影像編輯軟體也沒關(guān)係，上網(wǎng)搜「壓縮圖片」其實(shí)有許多免費(fèi)的線上版本可以幫助你縮圖，像是 Tinyjpg，或是 WordPress 的外掛如 WP Smush 都可以達(dá)到類似的效果。（這邊還是會(huì)建議在作圖或是輸出時(shí)，就設(shè)定完畢，減少圖檔可能失真的機(jī)會(huì)）

若是企業(yè) Logo 這種可能需要去背的圖片，就必須存為 png 檔，若能有向量檔，如 svg 檔，在圖片空間節(jié)省上也是很有幫助，且 svg 檔更有著放大看也不會(huì)出現(xiàn)模糊的優(yōu)勢(shì)，更適合當(dāng)做網(wǎng)頁(yè)中 Logo 的檔案格式使用。

總之若是可以提供壓縮檔、原檔（一般是 psd, ai 檔），給網(wǎng)頁(yè)設(shè)計(jì)公司，上稿時(shí)應(yīng)萬(wàn)無(wú)一失；若是需要自行上稿也別擔(dān)心，照著上面的提示，找到適合的大小還是可以壓縮出符合規(guī)格的圖片的。

 

大小對(duì)了，網(wǎng)頁(yè)圖片格式也要正確

列出網(wǎng)頁(yè)設(shè)計(jì)中，常見的圖片格式/大小給大家參考：

? 一般圖片：jpg 檔
? 需要有透明背景的圖檔：png, svg 檔
? 需要有動(dòng)畫效果：gif, svg 檔

? 網(wǎng)頁(yè)中全版 Banner 寬度建議：1920px
? 大面積 Banner 寬度建議：1440px 以上
? 一般大圖 寬度建議：1024 以上
? 中型圖片 寬度建議：800 以上

*高度可依照?qǐng)D片比例調(diào)整，但不宜超出「一個(gè)螢?zāi)豢娠@示之範(fàn)圍」為準(zhǔn)。

細(xì)節(jié)決定了網(wǎng)頁(yè)設(shè)計(jì)的精緻度

一系列「給客戶看的網(wǎng)頁(yè)設(shè)計(jì)」文章下來(lái)，以新文章來(lái)說，自然流量都不錯(cuò)。第一個(gè)是希望想要製作網(wǎng)頁(yè)的企業(yè)/公司，找到適合的網(wǎng)頁(yè)設(shè)計(jì)公司，而非用預(yù)算衡量，如此許多看不到的地方、沒想到的地方，就這樣被遺漏過去，最終製作了網(wǎng)站，也難以達(dá)到預(yù)期成效。

以圖片相關(guān)的網(wǎng)頁(yè)設(shè)計(jì)細(xì)節(jié)還有下面這些，列出以供參考：

?? jpg 壓縮圖片時(shí)，很容易將文字邊緣破壞得模糊不清（又稱為破壞性壓縮）
?? 圖片命名盡可能還是以不要太長(zhǎng)，且有意義的英文為主
?? 太大的圖片，除了讀取速度，也可能增加主機(jī)的負(fù)擔(dān)
?? svg 檔案輸出時(shí)，要格外注意（大小/陰影等）
?? 提供照片時(shí)，盡可能不使用手機(jī)照出來(lái)之成品（感光元件限制）
?? RWD 設(shè)計(jì)時(shí)，圖片注意事項(xiàng)

延伸閱讀

? （一）網(wǎng)頁(yè)字級(jí)大小之範(fàn)例
? （二）那些你沒有想到/過的網(wǎng)頁(yè)功能
? （三）網(wǎng)頁(yè)完成之際，最常問的問題有
? （四）5 個(gè)網(wǎng)頁(yè)設(shè)計(jì)不容許錯(cuò)誤