How to explicitly set dimensions for Image in Next.js 13 without being blurry

Question

Whenever i set dimension for my next js images using tailwind classes, the image comes out being blurry

Here's what I've tried

import Image from "next/image";


<Image
  src="/assets/image-1.jpg"
  alt="climate"
  height={0}
  width={0}
  className="w-full h-[300px]"
 />

Whenever i try this, the image comes out being blurry