You can either use width
and height
properties in Image
like
<Image src={logo} alt='Picture of our Logo' width={500} height={500}/>
OR
Define a class for your image in your CSS file, and add that className
to your Image
tag like
<Image src={logo} alt='Picture of our Logo' className='yourClass'/>
-
for more optimizing you can use this option in Next.config.js: [image-optimization-nextjs]
-
you don't need to import images on your page.
next/image
by default recognize/public
dir.src="/delta-logo.png"
-
and You can either use width and height properties in
Image
tag.
I changed the size of the image using the following approach
<div className="relative w-[50px] h-[50px] md:w-[100px] md:h-[100px]"> <Image src="/images/myImage.png" alt="logo" fill /> </div>
Enclose the <Image>
tag within a <div>
element, apply the 'relative' positioning to the <div>
, and adjust the image size using Tailwind CSS classes. Additionally, make sure to include the 'fill' property on the <Image>
tag.
NextJS' <Image>
components added an option called "sizes", which main objective is to provide information about the sizes of the image in different breakpoints.
import Image from 'next/image' // ... Your code export default function Page() { return ( <div className="grid-element"> <Image fill src="/example.png" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" /> </div> ) } // ...Your code
Additionally, you can install the sharp module that optimize images for production with npm install sharp
.
Check more info in the NextJS Docs.