Teachnique
      CourseRoadmaps
      Login

      Introduction

      Project SetupCLI

      IntroductionAPP RouterTemplateLoading UIError Handling404 Page

      Linking and Navigating

      Dynamic RoutesRoute groupsParallel RoutesIntercepting Routes

      Route handlersCacheCommon Questions

      Middleware

      CSRSSR & SSGISR

      React Server ComponentsServer-Side Rendering

      SuspenseStreaming

      Server & Client ComponentServer vs. Client ComponentBest Practices

      Server-Side Rendering Strategies

      Data Fetching & Caching & RedirectThird-Party Request Libraries on the Server SideBest Practices

      Request MemoizationData CacheFull Route CacheRouter Cache

      Server Actions IFormServer Actions IIOptimistic Update

      Tailwind CSSCSS-in-JSSass

      Environment VariablesAbsolute Imports& Module Path AliasesRoute Segment Config

      Image & LCPImage IImage IIOptimizing IOptimizing II

      Next FontFont ParameterApply Styles

      Feedback

      Submit request if you have any questions.

      Course
      Image II

      Next.js Mastery: From Fundamentals to Full-Stack

      Unlock the power of Next.js with this comprehensive course! Starting with the basics, you’ll learn essential skills such as routing, data fetching, and styling. Progress through practical projects, including building your own React Notes app, to gain hands-on experience. Dive into the source code to understand the inner workings and core principles of Next.js. Perfect for developers with a basic knowledge of React and Node.js, this course ensures you’ll be ready to create high-performance full-stack applications efficiently. Join us and master Next.js, backed by industry experts and a supportive learning community.

      Image II

      11. Quality

      The quality prop specifies the image's quality, with values ranging from 1 to 100. A value of 100 represents the best quality, but also the largest file size. The default is 75.
      quality={75} // {number 1-100}

      12. Priority

      The priority prop indicates the image's loading priority, with a Boolean type. The default value is false. When set to true, it indicates high priority and preloads the image. Using priority automatically disables lazy loading.
      priority={false} // {false} | {true}
      Here are two recommendations for using this attribute:
      • Use it for images visible on the first screen.
      • Use it for LCP (Largest Contentful Paint) image elements. Considering different viewport widths may have different LCP images, you can set multiple.
      When running next dev, if the LCP element is an image but the priority prop is not set, a warning will appear in the console:
      
      Here’s an example:
      // app/page.js
      import Image from 'next/image'
      import profilePic from '../public/me.png'
      
      export default function Page() {
        return <Image src={profilePic} alt="Picture of the author" priority />
      }

      13. Placeholder

      The placeholder prop specifies the placeholder while the image is loading. It can be set to blur, empty, or data:image/..., with empty as the default.
      placeholder='empty' // "empty" | "blur" | "data:image/..."
      When set to empty, there will be no placeholder, just an empty space.
      When set to data:image/..., a Data URL is used as the placeholder image during loading. A Data URL, prefixed with the data: scheme, allows content creators to embed small files directly into the document. For example, a base64 image is a Data URL.
      When set to blur, the blurDataURL prop’s value will be used as the placeholder image. If the image is statically imported and is in .jpg, .png, .webp, or .avif formats, blurDataURL will be automatically generated, but this is not the case for dynamic images. For dynamic images, you must provide the blurDataURL prop.
      Here’s an example of the default blur effect:
      

      14. blurDataURL

      The blurDataURL prop only takes effect if you set placeholder="blur".
      It must be a base64-encoded image. The image will be enlarged and blurred, so it’s recommended to use a very small image (10px or smaller).
      You can use the blurDataURI to achieve this kind of color effect:
      
      You can quickly obtain a Data URL for a solid color image using png-pixel.com/.

      15. Style

      The style prop allows you to set the image’s style.
      // components/ProfileImage.js
      const imageStyle = {
        borderRadius: '50%',
        border: '1px solid #fff',
      }
      
      export default function ProfileImage() {
        return <Image src="..." style={imageStyle} />
      }
      When you modify the image width using style, be sure to set height to auto to maintain the aspect ratio; otherwise, the image will be distorted. This is because Next.js automatically adds width and height attributes to the image. If you only modify the width through style, adding the original height attribute will cause the image to become distorted.

      16. onLoadingComplete

      'use client'
      
      <Image onLoadingComplete={(img) => console.log(img.naturalWidth)} />
      This callback function is executed when the image has fully loaded, and the placeholder image will be removed. The function receives a parameter, which is a reference to the underlying <img> element.
      Note: Since the component accepts a function as a parameter, it needs to be used as a client component.

      17. onLoad

      'use client'
      
      <Image onLoad={(e) => console.log(e.target.naturalWidth)} />
      This callback function is also executed when the image has loaded. However, it may be triggered before the placeholder is removed and before the image is fully decoded. So, if you want to wait until the image is fully loaded, use onLoadingComplete.
      Note: Since the component accepts a function as a parameter, it needs to be used as a client component.

      18. onError

      'use client'
      
      <Image onError={(e) => console.error(e.target.id)} />
      This callback function is executed when the image fails to load.
      Note: Since the component accepts a function as a parameter, it needs to be used as a client component.

      19. Loading

      loading='lazy' // {lazy} | {eager}
      This prop sets the image's loading behavior, with lazy as the default value.
      When set to lazy, the image will be loaded lazily, meaning it will only load when it is near the viewport.
      When set to eager, the image will load immediately.
      Using eager typically harms performance. Next.js recommends using the priority prop instead.

      20. Unoptimized

      The unoptimized prop disables optimization. When set to true, the source image is used without changing its quality, size, or format. The default value is false. Here’s an example:
      import Image from 'next/image'
      
      const UnoptimizedImage = (props) => {
        return <Image {...props} unoptimized />
      }
      Since Next.js 12.3.0, you can set all images to be unoptimized via next.config.js:
      // next.config.js
      module.exports = {
        images: {
          unoptimized: true,
        },
      }

      21. Other Props

      Any other props passed to the <Image /> component will be passed to the underlying <img> element, except for the following:
      • srcSet: Next.js generates this automatically. If you want to change it, use the deviceSizes option in the configuration, which will be discussed in the next section.
      • decoding: Its value is always "async".