nextjs image optimization
author image

David Dumont

20/09/2022

Improve image loading speed and page performance using Next.js and Suncel

Managing image size, compression, quality and responsiveness are tedious tasks when dealing with a lot of content and a lot of images.

Fortunately, it is possible to edit content and publish images with relatively little concern for image optimization. How? Thanks to Next.js and its image optimization module.

Example of optimization

The following optimization example has been done with Suncel CMS which optimizes images with Next.js.

The process is very simple. We uploaded (without retouching) this picture : original size 1920x2880 pixels and 898KB (Photo Credit : Gökhan Sen).

Once uploaded on Suncel CMS (see bellow), we can take advantage of Nextjs optimizations without any particular actions :

  • Original : 1920x2800 pixels, 898KB

  • Result - image resizing : 1280x1920 pixels on large screens and 238x357 pixels on small screens.

  • Result - Image weight : from 898KB to 390KB ➜ 56% improvement in image weight !

image optimization reduced size nextjs

Image optimization with Next.js

Next.js uses many optimizations on images that allow for optimal loading time and user experience for your site users.

  • Image resizing : serve the correct size for each device

  • Cumulative Layout Shift : important for Core Web Vitals, Next.js avoid CLS and improve visual stability 

  • Faster loading : images are loaded only when the user view them. You can use as well a blur option, that load a blurred picture before the original picture (for a faster loading).

Original picture :

ballon
made with ❤️ with Suncel
All Systems Operational