Width & Height
Define the intrinsic dimensions of an image using thewidth andheight properties.
Image Properties
Practice different properties of the Next.js Image component and understand how they help with performance, responsiveness, accessibility, and user experience.
| # | Property | Purpose | Example |
|---|---|---|---|
| 01 | src | Image source | src="/images/photo.png" |
| 02 | alt | Accessibility description | alt="Profile photo" |
| 03 | width | Image width | width={400} |
| 04 | height | Image height | height={300} |
| 05 | fill | Makes the image fill its parent | fill |
| 06 | priority | Loads an important image early | priority |
| 07 | loading | Controls loading behavior | loading="eager" |
| 08 | sizes | Helps responsive image optimization | sizes="(max-width: 768px) 100vw, 50vw" |
| 09 | quality | Controls image quality | quality={75} |
| 10 | placeholder | Shows a placeholder while loading | placeholder="blur" |
| 11 | blurDataURL | Provides a custom blur placeholder | blurDataURL="data:image/..." |
| 12 | className | Adds CSS or Tailwind styling | className="rounded-xl" |
| 13 | style | Adds inline CSS styling | style={{ objectFit: "cover" }} |
| 14 | unoptimized | Skips Next.js image optimization | unoptimized |
Total properties covered: 14
Fill
Thefillproperty makes the image fill its parent container.
Priority
Thepriorityproperty tells Next.js that an important image should load earlier.
Loading
Theloadingproperty controls when the browser loads the image.
Quality
Thequalityproperty controls the requested image quality during optimization.
Responsive Sizes
Thesizesproperty tells Next.js how much space the image occupies at different screen sizes.
Blur Placeholder
Theplaceholder="blur"option displays a blurred preview while the image loads.
Styling
UseclassNameto apply Tailwind CSS classes and customize the appearance of the image.
Unoptimized
Theunoptimizedproperty tells Next.js to serve the image without its normal image optimization process.