Next.js 10 Image Optimization and next-optimized-images
Performance comparison of Next.js 10 Image Component and next-optimized-images
Introduction
Next.js, one of our favourite frontend frameworks, has version 10 released on 28th October 2020. Many new features come with Next.js 10 but the most eye-catching feature for me is the built-in image optimization component.
In this story, we are going to compare the performance between the HTML img tag, next/image component, and next-optimized-images plugin.
Why do we need image optimization?
In the Next.js 10 blog post, the team listed out some interesting figures which could be strong reasons why we should always optimize the images on our websites:
- the web is not the only Javascript: it’s also markup and images
- images take up 50% of the total bytes on web pages
- images have a big impact on Largest Contentful Paint
- half of all images are over one megabyte in size
- nowadays users browse the web using their phones, tablets, and laptops, yet images are still a one size fits all
- 30% of images on web pages are outside of the initial…
