Because of their size, images are the largest assets of your website. As the size increases, the speed of your web app decreases along with it. According to the HTTP Archive, images make up on average 21% of a total webpage weight. Different image formats also affect your site’s overall performance. In this talk, I am going to speak about how Next.js natively helps you optimize your images. How it provides a built-in solution with its Image component that uses various techniques to make sure your site is fast, consumes less bandwidth, and at the same time has a great user experience.
Following are the reasons why I created this demo:
- Explain the issues associated with
<img>tag and show it live - Explain the working of
<Image/>component of Next.js - Showcase some of the pros of
<Image/>component over<img>tag
I have curated a detailed list of all the open-source projects I have authored. Do take out a moment and take a look.
- MIT © Saad Irfan
- Code of Conduct