What are the best practices for images used as main sections?
P粉727416639
P粉727416639 2023-09-19 20:54:07
0
1
716

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.

P粉727416639
P粉727416639

reply all(1)
P粉163951336

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

<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>

If you are using Next.js, you can use the Image component https://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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!