網站優化：如何縮小圖片文件大小

網頁加載速度對搜索引擎優化和用戶體驗至關重要，而縮小圖片大小對加載時間有顯著影響。

一些人會建議使用自動縮小圖片大小的平台或圖片縮減API，但除非您的網站每天要上傳成千上萬的圖片，否則我更傾向於自己動手進行簡單快捷的操作，這個過程如果圖片已準備好，只需一分鐘即可完成。

以下是我們網頁設計公司在所有網站上依賴的一些技巧和最佳實踐：

調整大小

大多數屏幕的分辨率不會超過1920x1080，因此超出這一尺寸的圖片幾乎總是無效的。提高圖片解析度的好處會隨著文件大小的急劇增加而減少。高像素密度屏幕用戶並不足以支持一個1MB的圖片。

我認為，即使是1920x1080px，在大多數情況下也是過多，所以我只在主題橫幅中使用這種尺寸。對於文章的主要圖片，我使用1280px（取決於網站容器的大小）。對於僅占屏幕一半大小的圖片，我就將1280px除以2。但要注意不要弄得太小，因為幾乎所有手機屏幕都是高像素密度，寬度多半不到450px，所以我嘗試保持我的全屏圖片至少有900px寬。

壓縮圖片

像TinyPNG這樣的在線工具在這方面非常好用。TinyPNG在不大犧牲圖片質量的情況下，可以減少大多數圖片的文件大小。

當您使用JPEG格式和Photoshop時，您會想以漸進式圖片形式保存，以獲得稍微更小的大小和更好的網頁優化圖像查看體驗，因為網頁瀏覽器加載漸進式保存的圖片與基線圖片相比有所不同。您可以在這裡深入了解。

緩存圖片

現代瀏覽器會將圖片保存到其緩存中。如果一張圖片在您的網站上多處出現，請確保只上傳一次，然後在網站其他地方重用該圖片。

圖片格式大多數瀏覽器支持下一代圖片格式（如webp），與它們的前身（如gif、png和jpeg）相比，它們的大小要小得多。因此，如果適合您的網頁開發流程，請儘可能使用它們。您可以在這裡進一步了解webp。

一些網絡平台（例如Wix）會自動將您上傳的圖片轉換為下一代圖片格式。

懶加載

當您盡可能避免工作，直到最後一刻，這就是懶惰。瀏覽器加載圖片時也適用相同的概念，但您需要告訴瀏覽器在最後一刻才加載資源。幸運的是，常見的網絡工具和平台，如WordPress和Webflow，預設告訴瀏覽器懶加載每張圖片，並且該設置只是一個可以輕鬆開啟或關閉的選項。

自動圖片調整大小

現代網絡工具在您上傳圖片時會創建多個不同尺寸的版本，以便在保持足夠清晰的同時提供最小尺寸的圖片。如果您所在的平台不提供自動調整大小功能，您可以手動創建不同尺寸的圖片，並在桌面、平板和手機的不同斷點使用它們。

CDN

如果您的網站有來自世界各地的訪客，而您是從位於美國的中央服務器提供圖片，那麼您來自非美國地區的訪客將會體驗到更高的圖片加載時間，這是不好的。為了解決這個問題，您可以將圖片上傳到CDN（內容交付網絡），該網絡會通過將內容緩存到每個終端用戶訪問互聯網的地方附近來分發您的圖片。這將顯著減少後續訪問的圖片加載時間。

如果您使用的是像Webflow這樣的平台，平台會自動為您處理這個問題。如果不是，您可以查看像AWS（亞馬遜網絡服務）這樣的服務提供商。

總結：

• 調整圖片大小
• 使用工具壓縮圖片
• 緩存圖片
• 盡可能使用下一代圖片格式
• 懶加載圖片
• 為不同的斷點使用不同尺寸的圖片
• 將圖片上傳到CDN

我們在這篇文章中提供的技巧和竅門應該有助於您減少網站上圖片的加載時間。如果您對網頁設計的更多話題感興趣，請務必訂閱。