Notification texts go here Contact Us Buy Now!

How to change image size using nextjs

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'/>
  1. for more optimizing you can use this option in Next.config.js: [image-optimization-nextjs]

  2. you don't need to import images on your page. next/image by default recognize /public dir. src="/delta-logo.png"

  3. 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.

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.