What are the best practices for images used as main sections?

Question

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.

Answer 1

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