I have a section that uses an image as the main section. The problem is that the image is too big for mobile phones, tablets and desktops, 1MB. I'm worried that the image is too big.
I would like to know the best practices when using images as backgrounds for main sections.
Thank you for your kind suggestions and comments.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Actually, a 1MB hero banner image is too big. The hero section of a web page is usually the first visual element that users see. A large image will cause users to wait a long time without seeing your website content, and they will leave quickly.
Therefore, optimizing these images is important for both performance and aesthetics. Your hero image should be less than 100KB.
TinyPNG is a great tool.https://tinypng.com
You can also use responsive images to adapt to different aspect ratios.https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture
If you are using Next.js, you can use the Image componenthttps://nextjs.org/docs/pages/api-reference/components/image.
Finally, you can use Lighthouse to test your web page performance.https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk