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
<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
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
实际上，一个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