84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我有一個使用圖片作為主要部分的部分。 問題是圖片對於手機、平板電腦和桌上型電腦來說太大了，有1MB。 我擔心圖片太大了。
我想知道在使用圖片作為主要部分背景時的最佳實踐。
謝謝您的友善建議和意見。
實際上，一個1MB大小的英雄橫幅圖像太大了。網頁的英雄部分通常是使用者首次看到的視覺元素。一個大圖像會導致用戶等待很長時間，卻看不到你的網站內容，他們很快就會離開。
因此，優化這些圖像對於性能和美觀都很重要。你的英雄圖像應該小於100KB。
TinyPNG是一個很好的工具。 https://tinypng.com
#你也可以使用響應式圖像來適應不同的寬高比。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
如果你在使用Next.js，你可以使用Image元件 https://nextjs.org/docs/pages/api-reference/components/image。
最後，你可以用Lighthouse來測試你的網頁效能。 https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk
實際上，一個1MB大小的英雄橫幅圖像太大了。網頁的英雄部分通常是使用者首次看到的視覺元素。一個大圖像會導致用戶等待很長時間，卻看不到你的網站內容，他們很快就會離開。
因此，優化這些圖像對於性能和美觀都很重要。你的英雄圖像應該小於100KB。
TinyPNG是一個很好的工具。 https://tinypng.com
#你也可以使用響應式圖像來適應不同的寬高比。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
如果你在使用Next.js，你可以使用Image元件 https://nextjs.org/docs/pages/api-reference/components/image。
最後，你可以用Lighthouse來測試你的網頁效能。 https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk