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

文章綱要：

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

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

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

4. 文章總結(jié)

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

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

• 提升加載速度

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

• 用戶體驗(yàn)

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

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

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

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

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

更快的網(wǎng)站加載速度可幫助你提高搜索引擎對(duì)網(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背景圖片，你可以選擇拉伸圖片以讓其填充整個(gè)螢?zāi)唬ㄟ@也是系統(tǒng)默認(rèn)設(shè)定，通常最適合用于調(diào)整背景圖片）。請(qǐng)確保背景圖片的內(nèi)容不會(huì)太過(guò)靠近左右的邊框，以避免圖片里的重要內(nèi)容無(wú)法完整呈現(xiàn)在行動(dòng)段用戶的設(shè)備上。其次，你也可以選擇平鋪——即顯示整個(gè)圖片，但不切割任何部分或?qū)D片置放在版塊的中心，需要注意的是這樣圖片的周圍將留出空白部分。

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

• 全寬圖片

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

• 半寬圖片

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

• 1/3寬圖片

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

• 1/4寬圖片

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

• 小圖示或Logo

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

• 圖庫(kù)圖片

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

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

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

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

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

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

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

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

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

4. 文章總結(jié)

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