有沒有發(fā)現(xiàn)自己明明已經(jīng)在網(wǎng)站內(nèi)容方面費(fèi)盡心思還是無濟(jì)于事，網(wǎng)站在搜索引擎上的排名依舊不佳，而且瀏覽量與轉(zhuǎn)化率也特別低？你知不知道其實(shí)這些問題很有可能是網(wǎng)站的圖片尺寸惹的禍！事實(shí)上，網(wǎng)站圖片尺寸會大大影響網(wǎng)站的加載速度以及在搜索引擎結(jié)果頁的跳出率和排名高低。對于許多網(wǎng)站建設(shè)者來說，在網(wǎng)站置放合適的圖片一直就是個艱鉅任務(wù)。過大的圖片（未經(jīng)優(yōu)化，原始圖大小為 5000px 的圖片）不僅會降低你網(wǎng)站的內(nèi)容加載速度，影響用戶體驗(yàn)，還會對你的SEO策略產(chǎn)生負(fù)面影響但是過小的圖片又對觀感不佳。別急，這篇文章將為你帶來一份挑選最佳網(wǎng)站圖片尺寸的詳細(xì)指南。

文章綱要：

1. 為什么要挑選網(wǎng)站圖片尺寸？

2. 最常用的網(wǎng)站圖片尺寸

3. 如何選擇最適合我的網(wǎng)站圖片尺寸？

4. 文章總結(jié)

1. 為什么要挑選網(wǎng)站圖片尺寸？

還未經(jīng)過優(yōu)化的圖像會導(dǎo)致網(wǎng)站需要耗費(fèi)更長的時間來加載。除了直接影響用戶體驗(yàn)，還會導(dǎo)致網(wǎng)站在搜索引擎的排名不佳，流量和轉(zhuǎn)化率自然也不可觀；相反的，倘若根據(jù)情況以正確的比例優(yōu)化照片后才將它們添置進(jìn)網(wǎng)站將為你帶來許多好處如：

• 提升加載速度

根據(jù)Google研究，如果網(wǎng)頁加載時間超過 5 秒，訪客放棄瀏覽該頁面的可能性會增加 90%。要避免訪客流失，你可以透過縮小和降低圖片尺寸來提高你網(wǎng)站頁面的加載速度。

• 用戶體驗(yàn)

如果你使用高品質(zhì)，尺寸合適且切題的圖片，訪客在瀏覽你的網(wǎng)站時將獲得更佳的體驗(yàn)。所以，你應(yīng)該為網(wǎng)站圖片尺寸做好詳細(xì)策劃，避免網(wǎng)站看起來格式繁雜。經(jīng)過優(yōu)化的圖片加載速度也可更快，可以幫助你為訪客提供流暢的瀏覽體驗(yàn)，鼓勵他們在你的網(wǎng)站上花費(fèi)更多時間并專注于你的內(nèi)容。

你知道嗎？一個企業(yè)的網(wǎng)站背景圖片不僅僅是一張漂亮的圖片，它對整體的用戶體驗(yàn)有著重大的影響。點(diǎn)擊這里，了解如何選擇最佳的網(wǎng)站背景圖片！

• 搜索引擎優(yōu)化

你的網(wǎng)站加載得越流暢，在搜索引擎上的排名就越高。記住！無論是在臺式電腦或行動手機(jī)的搜索結(jié)果頁上，具有優(yōu)化圖片的網(wǎng)頁加載速度都要比未經(jīng)優(yōu)化的快得多。

• 流量與轉(zhuǎn)化率

更快的網(wǎng)站加載速度可幫助你提高搜索引擎對網(wǎng)站的青睞，從而吸引更多訪客進(jìn)入你的網(wǎng)站，增加網(wǎng)站的曝光率與轉(zhuǎn)化率。

2. 最常用的網(wǎng)站圖片尺寸

• 背景圖片

的背景照片編輯工具旨在為你的網(wǎng)站添置匹配各種螢?zāi)怀叽绲膱D片。為確保你的背景圖片在所有設(shè)備螢?zāi)簧隙家宰罴褷顟B(tài)呈現(xiàn)，我們建議你使用 1600 x 900 像素的圖片。如果你要調(diào)整或?qū)R背景圖片，你可以選擇拉伸圖片以讓其填充整個螢?zāi)唬ㄟ@也是系統(tǒng)默認(rèn)設(shè)定，通常最適合用于調(diào)整背景圖片）。請確保背景圖片的內(nèi)容不會太過靠近左右的邊框，以避免圖片里的重要內(nèi)容無法完整呈現(xiàn)在行動段用戶的設(shè)備上。其次，你也可以選擇平鋪——即顯示整個圖片，但不切割任何部分或?qū)D片置放在版塊的中心，需要注意的是這樣圖片的周圍將留出空白部分。

除了背景圖片，我們還有許多適合網(wǎng)站的圖片尺寸，一起來看看吧！

• 全寬圖片

為獲得最佳效果，它們的寬度至少應(yīng)為1400像素，高度無影響。

• 半寬圖片

置放在頭條的半寬圖片至少應(yīng)為700像素，以獲得最佳品質(zhì)，高度無影響。

• 1/3寬圖片

為了獲得最佳品質(zhì)的1/3寬度圖像，推薦至少使用480像素寬度的圖片，高度無影響。

• 1/4寬圖片

要獲得最佳品質(zhì)的1/4寬度圖像，它們的寬度應(yīng)至少為360像素，高度無影響。

• 小圖示或Logo

寬度至少應(yīng)為100像素。

• 圖庫圖片

任何尺寸都適用于圖庫圖片，訪客只需點(diǎn)擊圖庫則可查看完整圖片。

3. 如何選擇最適合我的網(wǎng)站圖片尺寸？

你應(yīng)該根據(jù)頁面布局選擇圖片尺寸，大多數(shù)情況下，圖片應(yīng)盡可能適應(yīng)其框架大小以獲得最佳網(wǎng)站性能。例如，背景圖片通常更大；部落格圖片中等大小；縮略圖更小等等。

• 你首先需要確定網(wǎng)站用于置放圖片的區(qū)域?qū)挾龋憧梢渣c(diǎn)擊滑鼠右鍵使用“頁面標(biāo)尺（Inspect）”瀏覽器擴(kuò)充程式來幫助你獲取相關(guān)資訊。

• 然后，在彈出的工具欄中，點(diǎn)擊左上角的元素選擇器并將滑鼠懸停在你感興趣的網(wǎng)站圖片或內(nèi)容部分上，出現(xiàn)的資訊箱子就會顯示該圖片或內(nèi)容的尺寸。

小提醒： 想要獲取最高品質(zhì)的網(wǎng)站視覺效果，建議你在網(wǎng)站使用的全寬圖片顯示寬度為2560像素（ 27'' 和 30'' 顯示器的常用分辨率寬度）。 你可以自由調(diào)配高度，以達(dá)到你期望的縱橫比。例如，婚禮攝影網(wǎng)站上常見的全寬圖片會保持照片的原始縱橫比，而其他網(wǎng)站則通常使用覆蓋整個頁面寬度但高度較小的圖片（縱橫比約為 3:1）。以上是來自攝影網(wǎng)站的“全景”圖片示例。

除了背景與全款圖片，其余的圖片尺寸無需占據(jù)頁面的整個寬度。也許你會好奇部落格網(wǎng)站圖片尺寸又該怎么選，是不是與其他網(wǎng)站的選擇方式一樣呢？別著急，下面我會向你推薦適合部落格文章的圖片尺寸。

如果你的部落格內(nèi)容不需要用戶手動縮放，則應(yīng)根據(jù)列或內(nèi)容區(qū)域的寬度調(diào)整圖片的大小。你可以透過使用上面提到的“頁面標(biāo)尺（Inspect）”方法測量任何文本段落來確定內(nèi)容區(qū)域的實(shí)際寬度，例如：

有了這些資訊（例如 568 像素），你現(xiàn)在可以將尺寸加倍以匹配Retina顯示器（568像素×2=1650 像素），然后根據(jù)你網(wǎng)站的主題和你對圖片盜竊的風(fēng)險承受能力，你可以將該數(shù)量減少到更合理的最長邊 1200 像素（因此水平圖像應(yīng)為 1200 像素寬，垂直圖像應(yīng)為 1200 像素高，同時保留其原始外觀比率）。 用作縮略圖的較小照片（無需展開）也遵循相同的調(diào)整過程。

4. 文章總結(jié)

這份網(wǎng)站圖片尺寸指南并不一定適用于 PhotoShelter 或 SmugMug 等照片存檔服務(wù)，因?yàn)樗鼈兙哂袃?nèi)置的設(shè)定與措施，會根據(jù)網(wǎng)站的需要將你的原始高分辨率文件生成低分辨率縮略圖。但如果你有一個內(nèi)置圖片編輯工具的專業(yè)網(wǎng)站托管平臺（比如），你就可以遵循這份網(wǎng)站圖片尺寸指南來完成網(wǎng)站圖片編輯。選擇合適的圖片是建設(shè)具有視覺吸引力且加載速度快的網(wǎng)站的重要元素之一，希望這篇文章能為你提供一些相關(guān)方面的知識與幫助。如果對內(nèi)容有疑問，可以透過 support@strikingly.com 與我們聯(lián)絡(luò)。