Next.js Image Optimization on Build Time (Static Export)

hello everyone in this tutorial we'll be talking about how to use image optimization in nextjs static exports I have a simple project which is an image gallery here in vs code with the local div server running it just a few images here and it is running with the default configuration but if I set this project to export mode I type in output export hit save refresh the page you'll see an error that image optimization is not supported with the export mode and there are two possible solutions so we can remove the export mode but if it's not your case and you need the static files of your project so we're moving to the next one we can configure to use unoptimized images let's try this one images un optimize it and set the true refresh the page and as you see it's really working but if we go to the network page and filter all the requests for images you see that we've fetched around 18 megabytes for just six images here which is unefficient and it will load slowly on mobile networks so if I set the network throt to fast 3G refresh the page you see how long it would take to load all the images here because of their size so I suggested to use the another approach we can actually convert our images at build time and use those images in our project and for that we will use the next image export Optimizer basically what it does this Library optimizes all static images after the next static export it converts and generates a set of images for different device sizes and if we scroll down a bit to see the official documentation of this Library we see a list of features that this Library provides so it does a conversion to webp format by default it generates blur placeholder images when you only load your images it even supports typescript you can even use remote images and animated images here and at the last you can set the image quality which is super useful first we need to install it using this command then we need to add the configuration to our nextjs settings so let's replace that and here we need to set image folder path to public because our images are placed in the public folder hit save we will go through every settings here step by step a bit later next we need to add the export command to our package Json file so we will run it each time we need to build the static files for our project let's go to our package Json file and place down here our new command and as the last step we need to replace all the native image components to exported image component of this Library so we need to import it in this way let's copy that go to our page component and replace it here and here as well where we render our images let's hit save and go to our project hit refresh let's turn off the network throtl and you see that in Death Mode it's working properly however you see those errors here and in the console as well because next image export Optimizer is trying to find the optimized images in public fold but we are not generated them yet we will do it in a second so let's build our project using our new export command by running mpm run export and you see after the export the optimization is started and we need to wait a bit so the optimization is finished and let's see what it looks like you see that the library has created the next image expert Optimizer folder and if we open it you will see a set of images for every image in our project that we use and it goes from 10 pixels 16 32 and way done to 4K resolution let's surf our project with npx serf and we pass out hit enter let's refresh the page everything works let's go to the network page and as you see while we're previewing our project in a really small device with 392 pixels the nextjs ls only 640 pixels wired image and if I zoom out a bit and we will slightly go up to the desktop size and when we pass the 640 pixels resolution here in a second you see that the next JS loads and another set of images with 750 pixels and it works again if we expand our window even more and those resolutions like 715 828 1,80 1,00 are defined in the nextjs config file and here are our resolutions and actually we can tweak those values depending on our project needs however I've already tried to experiment with image sizes and different and device sizes but haven't noticed any difference between set those sizes in device sizes or image sizes uh what do I mean if we just move those values to the device sizes it would work the same way let me know in the comments if you found the difference for my project I would delete those tiny sizes so I would like to render only a few resolutions for our images Let It Be 360 pixels 480 pixels 768 992 pixels 1,200 and the full HD resolution and we will delete those hit save and let's also go through the each setting here here we set the image folder path which is our public folder but if you use another folder for the images just set it here relative to your next config file the next one is export folder path by default it's the out folder and here's the quality I'd like to set it to 80 the next one enables the webp format here's the export folder name that is created near the image files and here we can enable or disable blur placeholder images if we res set to true it will generate a 10 pixel resolution file for each image and show it while your images are loading let's go back to Chrome and set our Network throt to fter G and let's refresh the page and you see those blurry images here and we've already loaded our 10x 10 tiny images here this is exactly how it works if we disable it by setting to Falls it would not generate the 10x 10 pixel images and the last settings is the C and setting for remote images which is by default is n seconds and that's it this library is not complicated at all I just showed you how this Library works and how it can replace the native image optimization in your static exports if you're already Tred it let me know in the comments and if you found this tutorial helpful please hit the like button and subscribe to the channel your support helps me to stay motivated in the long run thanks for watching and see you in the next video

Channel: Vladyslav Dihtiarenko

Views: 180

Keywords: next js, next.js, next.js tutorial, Next.js Image Optimization on Build Time, next.js image optimization, next.js static export, next.js output export, next.js static html export, next.js image compression, web dev tutorial, frontend tutorial, next image export optimizer, nextjs firebase deploy, next.js static deploy

Id: H8npSql69xc

Length: 8min 37sec (517 seconds)

Published: Wed Mar 13 2024