![]() ![]() Second, the sizes value is parsed and used to trim the values in the automatically-created source set. If you don't specify a sizes value, a default value of 100vw (full screen width) is used. The sizes property allows you to tell the browser that the image will actually be smaller than full screen. When the browser chooses, it does not yet know the size of the image on the page, so it selects an image that is the same size or larger than the viewport. The sizes property serves two important purposes related to image performance:įirst, the value of sizes is used by the browser to determine which size of the image to download, from next/image's automatically-generated source set. It will be ignored for images using layout="intrinsic" or layout="fixed". The value of sizes will greatly affect performance for images using layout="responsive" or layout="fill". Here is an example of using a custom loader with next/image: import Image from 'next/image' const myLoader = ( sizesĪ string that provides information about how wide the image will be at different breakpoints. Setting the loader as a prop on the Image component overrides the default loader defined in the images section of .Ī loader is a function returning a URL string for the image, given the following parameters:
0 Comments
Leave a Reply. |