優化網頁速度第一步－決定網頁照片尺寸
當網站上線一段時間後，客戶一定會遇到「替換照片」這個需求。不管是修改頁面中的圖片，或是新文章裡用到的照片，都脫離不了一件非常重要的事－網頁照片尺寸的大小，它最直接影響到圖檔大小，進而影響網頁的瀏覽速度！
我們常常會遇到客戶對於網頁瀏覽速度有疑惑，測試完之後發現往往與上傳的圖片有絕大的關係。
影響照片檔案大小的重點－尺寸
以 iPhone 11 Pro Max 為例，拍出來的照片尺寸是 4032 × 3024，它的意思是寬有 4032 個相素（pixel）、高則是 3024 px。這個尺寸基本上超過大多數的使用者螢幕顯示範圍（以 2020 年 MacBook Pro 13 吋為例，解析度為 2560 x 1600），更遠遠大於這張照片在網頁區塊中要顯示的大小；尺寸直接反應在檔案大小，未經處理過的照片通常 3MB 到 4MB 跑不掉！由於現在的科技太方便，文章作者常常直接將 iPhone 的照片上傳至文章中。
設想一下：如果這篇文章用了十張照片，光讀取照片的流量就超過 30MB，這樣子網頁怎麼可能快得起來？
修改尺寸的依據－了解 RWD 與網頁區塊
RWD（Responsive Web Design）的意思是響應式網頁設計，白話一點就是你看到的網頁會依照瀏覽的的裝置不同而改變。同一張圖片在電腦可能會使用原始尺寸，在手機則會自動縮小，所以我們要依這張照片會用到的最大尺寸來抓我們應該要縮放的尺寸值。以 Safari 為例，在查詢區塊的尺寸之前，要先介紹檢閱元件的功能（Chrome 叫做檢查）。
首先在網頁點右鍵 → 點選「檢閱元件」。
你也可以使用使用快捷鍵：
Mac 用戶：command + shift + c
Windows 用戶：ctrl + shift + c
開啟功能之後，我們先來看一下網頁內容部份的區塊寬。以 WPW 官網為例：
文章的內容寬度為 1000 px，所以在文章內用到的圖片，寬就設為 1000 px 就好了。
下圖「寬 1000 px 版本」大小為 373 KB：
如果覺得照片全寬太壓迫只想放版面的一半，照片也可以縮小到寬 500 px 也可以。
下圖「寬 500 px 版本」大小為 106 KB：
上傳前的第一件事－縮小尺寸
以 Mac 為例，縮小照片尺寸非常的簡單，只要將要修改的照片打開，選取工具列的「顯示方式」→「顯示標示工具列」。
（或是直接按下快捷鍵：command + shift + c）
將「寬度」修改成你要的值之後，按下「好」。
我們來比較一下三種尺寸的檔案大小：
你可以看到，照片尺寸對檔案大小的影響非常明顯，我們這篇文章使用的照片原檔大小是「寬 1000 px 版本」的 9.92 倍，是「寬 500 px 版本」34.7 倍！
如果你的主機空間有限制，修改照片尺寸是一定要做的功課！
你也必需要取捨－高解悉度的新型裝置
一般舊設備的電腦螢幕的解悉度是 72，但是隨著科技的發展，新型裝置的解悉度也向上增長，例如 Apple 的 Retina 螢幕可以顯示到 144，更高的 4K、5K 螢幕也有更高的解悉度品質。你可以考慮將照片尺寸設成 x2 的大小，以上方教學中的 1000 px 為例，提高到 2000 px。
當然，這不是必需的！當你在提供高畫質的照片時，捨棄掉的是使用者的瀏覽速度體驗，要請大家自行衡量。
下一篇會教你如何壓縮照片品質，更進一步的減少檔案大小！
傳送門 →【網頁壓縮照片的技巧，降低圖檔大小又不失真。】
© 2017-2021 WPW 台中網頁設計 All rights reserved | WordPress Web Design
