有沒有發現自己明明已經在網站內容方面費盡心思還是無濟於事，網站在搜索引擎上的排名依舊不佳，而且瀏覽量與轉化率也特別低？你知不知道其實這些問題很有可能是網站的圖片尺寸惹的禍！事實上，網站圖片尺寸會大大影響網站的加載速度以及在搜索引擎結果頁的跳出率和排名高低。對於許多網站建設者來說，在網站置放合適的圖片一直就是個艱鉅任務。過大的圖片（未經優化，原始圖大小為 5000px 的圖片）不僅會降低你網站的內容加載速度，影響用戶體驗，還會對你的SEO策略產生負面影響但是過小的圖片又對觀感不佳。別急，這篇文章將為你帶來一份挑選最佳網站圖片尺寸的詳細指南。
文章綱要：
1. 為什麼要挑選網站圖片尺寸？
2. 最常用的網站圖片尺寸
3. 如何選擇最適合我的網站圖片尺寸？
4. 文章總結
1. 為什麼要挑選網站圖片尺寸？
還未經過優化的圖像會導致網站需要耗費更長的時間來加載。除了直接影響用戶體驗，還會導致網站在搜索引擎的排名不佳，流量和轉化率自然也不可觀；相反的，倘若根據情況以正確的比例優化照片後才將它們添置進網站將為你帶來許多好處如：
- 提升加載速度
根據Google研究，如果網頁加載時間超過 5 秒，訪客放棄瀏覽該頁面的可能性會增加 90%。要避免訪客流失，你可以透過縮小和降低圖片尺寸來提高你網站頁面的加載速度。
- 用戶體驗
如果你使用高品質，尺寸合適且切題的圖片，訪客在瀏覽你的網站時將獲得更佳的體驗。所以，你應該為網站圖片尺寸做好詳細策劃，避免網站看起來格式繁雜。經過優化的圖片加載速度也可更快，可以幫助你為訪客提供流暢的瀏覽體驗，鼓勵他們在你的網站上花費更多時間並專注於你的內容。
你知道嗎？一個企業的網站背景圖片不僅僅是一張漂亮的圖片，它對整體的用戶體驗有著重大的影響。點擊這裡，了解如何選擇最佳的網站背景圖片！
- 搜索引擎優化
你的網站加載得越流暢，在搜索引擎上的排名就越高。記住！無論是在台式電腦或行動手機的搜索結果頁上，具有優化圖片的網頁加載速度都要比未經優化的快得多。
- 流量與轉化率
更快的網站加載速度可幫助你提高搜索引擎對網站的青睞，從而吸引更多訪客進入你的網站，增加網站的曝光率與轉化率。
2. 最常用的網站圖片尺寸
圖片取自Strikingly產品
- 背景圖片
Strikingly 的背景照片編輯工具旨在為你的網站添置匹配各種螢幕尺寸的圖片。為確保你的背景圖片在所有設備螢幕上都以最佳狀態呈現，我們建議你使用 1600 x 900 像素的圖片。如果你要調整或對齊背景圖片，你可以選擇拉伸圖片以讓其填充整個螢幕（這也是系統默認設定，通常最適合用於調整背景圖片）。請確保背景圖片的內容不會太過靠近左右的邊框，以避免圖片裡的重要內容無法完整呈現在行動段用戶的設備上。其次，你也可以選擇平鋪——即顯示整個圖片，但不切割任何部分或將圖片置放在版塊的中心，需要注意的是這樣圖片的周圍將留出空白部分。
圖片取自Strikingly產品
除了背景圖片，我們還有許多適合網站的圖片尺寸，一起來看看吧！
- 全寬圖片
為獲得最佳效果，它們的寬度至少應為1400像素，高度無影響。
- 半寬圖片
置放在頭條的半寬圖片至少應為700像素，以獲得最佳品質，高度無影響。
- 1/3寬圖片
為了獲得最佳品質的1/3寬度圖像，推薦至少使用480像素寬度的圖片，高度無影響。
- 1/4寬圖片
要獲得最佳品質的1/4寬度圖像，它們的寬度應至少為360像素，高度無影響。
- 小圖示或Logo
寬度至少應為100像素。
- 圖庫圖片
任何尺寸都適用於圖庫圖片，訪客只需點擊圖庫則可查看完整圖片。
3. 如何選擇最適合我的網站圖片尺寸？
圖片取自Strikingly產品
你應該根據頁面佈局選擇圖片尺寸，大多數情況下，圖片應盡可能適應其框架大小以獲得最佳網站性能。例如，背景圖片通常更大；部落格圖片中等大小；縮略圖更小等等。
- 你首先需要確定網站用於置放圖片的區域寬度，你可以點擊滑鼠右鍵使用“頁面標尺（Inspect）”瀏覽器擴充程式來幫助你獲取相關資訊。
圖片取自Strikingly產品
- 然後，在彈出的工具欄中，點擊左上角的元素選擇器並將滑鼠懸停在你感興趣的網站圖片或內容部分上，出現的資訊箱子就會顯示該圖片或內容的尺寸。
圖片取自Strikingly用戶網站
小提醒： 想要獲取最高品質的網站視覺效果，建議你在網站使用的全寬圖片顯示寬度為2560像素（ 27'' 和 30'' 顯示器的常用分辨率寬度）。 你可以自由調配高度，以達到你期望的縱橫比。例如，婚禮攝影網站上常見的全寬圖片會保持照片的原始縱橫比，而其他網站則通常使用覆蓋整個頁面寬度但高度較小的圖片（縱橫比約為 3:1）。以上是來自攝影網站的“全景”圖片示例。
圖片取自Strikingly用戶網站
除了背景與全款圖片，其餘的圖片尺寸無需佔據頁面的整個寬度。也許你會好奇部落格網站圖片尺寸又該怎麼選，是不是與其他網站的選擇方式一樣呢？別著急，下面我會向你推薦適合部落格文章的圖片尺寸。
圖片取自Strikingly用戶網站
如果你的部落格內容不需要用戶手動縮放，則應根據列或內容區域的寬度調整圖片的大小。你可以透過使用上面提到的“頁面標尺（Inspect）”方法測量任何文本段落來確定內容區域的實際寬度，例如：
圖片取自Strikingly用戶網站
有了這些資訊（例如 568 像素），你現在可以將尺寸加倍以匹配Retina顯示器（568像素×2=1650 像素），然後根據你網站的主題和你對圖片盜竊的風險承受能力，你可以將該數量減少到更合理的最長邊 1200 像素（因此水平圖像應為 1200 像素寬，垂直圖像應為 1200 像素高，同時保留其原始外觀比率）。 用作縮略圖的較小照片（無需展開）也遵循相同的調整過程。
4. 文章總結
這份網站圖片尺寸指南並不一定適用於 PhotoShelter 或 SmugMug 等照片存檔服務，因為它們具有內置的設定與措施，會根據網站的需要將你的原始高分辨率文件生成低分辨率縮略圖。但如果你有一個內置圖片編輯工具的專業網站託管平台（比如Strikingly），你就可以遵循這份網站圖片尺寸指南來完成網站圖片編輯。選擇合適的圖片是架設具有視覺吸引力且加載速度快的網站的重要元素之一，希望這篇文章能為你提供一些相關方面的知識與幫助。如果對內容有疑問，可以透過 support@strikingly.com 與我們聯絡。
