I have been using Next Image for several years, have read the documentation several times, and still find its use to be tedious and its dx abysmal. I'm ready to be proven otherwise and have a few questions along the way.

First, let's compare it to simply using <img> using latest Next in app directory:

// Works as expected, no problem at all 
<div className="w-96">
  <img src={images[0] ?? "/images/placeholder.png"} />
</div>

Next Image

1. Try to be simple like <img>

<div className="w-96">
  <img src={images[0] ?? "/images/placeholder.png"} />
</div>

Result >> Error: Image with src "/images/placeholder.png" is missing required "width" property

2. Listen to provided Next Error for required width. Provide abstract number

<div className="w-96">
  <Image src={images[0] ?? "/images/placeholder.png"}
  alt="Alt is required by Next Image" 
  width={300}
  />
</div>

Result >> Error: Image with src "/images/placeholder.png" is missing required "height" property

3. Listen to error for height. What do the width and height numbers do anyways?

<div className="w-96">
  <Image
    src={images[0] ?? "/images/placeholder.png"}
    alt="Alt is required by Next Image"
    width={300}
    height={300}
  />
</div>

Result >> Image with src "/images/placeholder.png" has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio.

(Alternative) At this point, ask #gpt-help. I'll skip the results, but it gives obviously incorrect advice. Abort.

4. Finally! Still no idea what width and height do to be required.

<div className="w-96">
  <Image
    src={images[0] ?? "/images/placeholder.png"}
    alt="Alt is required by Next Image"
    width={300}
    height={300}
    style={{ width: "auto" }}
  />
</div>

I'd like to hear a discussion and am ready to be persuaded.