我有一個使用圖片作為主要部分的部分。 問題是圖片對於手機、平板電腦和桌上型電腦來說太大了，有1MB。 我擔心圖片太大了。
我想知道在使用圖片作為主要部分背景時的最佳實踐。
謝謝您的友善建議和意見。
P粉1639513362023-09-20 12:29:17
實際上，一個1MB大小的英雄橫幅圖像太大了。網頁的英雄部分通常是使用者首次看到的視覺元素。一個大圖像會導致用戶等待很長時間，卻看不到你的網站內容，他們很快就會離開。
因此，優化這些圖像對於性能和美觀都很重要。你的英雄圖像應該小於100KB。
TinyPNG是一個很好的工具。 https://tinypng.com
#你也可以使用響應式圖像來適應不同的寬高比。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
<picture> <source srcset="small.jpg" media="(max-width: 600px)"> <source srcset="medium.jpg" media="(max-width: 1200px)"> <source srcset="large.jpg"> <img src="large.jpg" alt="Hero Image"> </picture>
如果你在使用Next.js，你可以使用Image元件 https://nextjs.org/docs/pages/api-reference/components/image。
最後，你可以用Lighthouse來測試你的網頁效能。 https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk