Optimizing images

[00:00 - 01:30] Optimizing images. Alright, our app is already in a good shape, however we can make it even better by using optimized images. Next JS 10 introduced next image component that can make it so much easier to create adaptive images and convert them into more lightweight formats on the fly. Let's try using it. In our app we have two components that render images. Postcard and another component the post body. Here we all surrender an image. In the postcard we render a preview image in the post list. The second one post body renders the main post image in the post page. We will use different strategies for optimizing both and I'll explain them along the way. Let's start with the post body component. First let's import image from next image. Then we can replace the IMG tag with the new image component. Image, as I see and I'll stay the same but we need to add a bunch of new props. Loading is gonna be lazy, layout, responsive, object fit, cover, object, position, center. We'll also specify width 960 by height 340. Alright, let's format the document. So let's review the additional props that we've added. Loading tells the browser how to load an image. When it is set to lazy the browser will wait until the image isn't the viewport and load only then. Layout tells next how to scale an image when the viewport size changes.

[01:31 - 02:49] We set it to responsive to make the image adapt to the size of its container when it changes. Object fit and object position basically LSS4 CSS properties we used earlier and width and height properties set the default size of an image. We can also use fixed layout to fix image sizes or intrinsic to make an image only scaled down. The image is ready. Now let's clean up the styles a bit . Open post body style and now you can remove the IMG from the figure and save the file. Before we run our dev server and see what next will output we need to set up a configuration file. In the root of your project create a new file, next config.js with the following code module experts images specify the domains. I chief BBC I CO UK this way we specify the array with external domains that are allowed to load images from. By default next won't let us load an image from the external domains. Then we specify device sizes device sizes 320 640 860 and 1000. Alright we're ready to launch the server. Run yarn dev.

[02:50 - 05:27] Now if you open the website open developer tools tab sources and here look at the loaded images you will see that they are loaded in image webp format. So we basically got support for the newer image formats for free. Now let's work on the postcard import the image from next image change the IMG tag to image set loading lazy layout responsive object fit cover object position center with 320 height 180 sort of the same as we did for the post body but now we also specify the sizes sizes equals mean with 1000 pixels 320 pixels 100 VW the sizes prop is a way for us to talk to the browser and tell it that we already know what image is the best option for a given viewport so let's review the value that we passed to it the string contains two values separated by the comma the first one contains media query and the number the last one contains only the number the media query mean with 1000 pixels specifies the viewport constraint as it does in CSS the following number is the width of an image that fits best in this case here we mean that whenever the viewport is bigger than 1000 pixels we want the browser to load an image with the width of 320 pixels why because our preview card is about 300 pixels wide itself and at this point we don't need 1,600 pixels wide image otherwise and is defined here load whatever suits the whole viewport width why because when the viewport is less than 1000 pixels our layout becomes a column where a card takes 100 of the containers width note that the order of sizes records matters the browser will only take the first matching media query and use it that's why the default value should be the last now we only need to clean up the styles go to the figure and remove the image tag from here make sure that everything still works by launching the app in the browser you might want to update the padding we used to have 56% let's remove it check the browser looks fine let's try the individual post and here we also need to remove the padding go to post body style and remove the padding from here as well all right let's check again, and now the image is displayed correctly.