docs: add better examples to next/image docs.

[leerob]

Dependent on merging images. Making it easy to copy/paste.

[stefanprobst]

could you also add an example for fixed-size images? thanks

[leerob]

What do you mean by that, exactly?

[leerob]

Found myself needing this today, so really happy we'll have these copy/pastable examples 😄

<div className="columns-3 gap-4 my-8">
  <div className="relative h-40 mb-4">
    <Image
      alt="..."
      src={myImage}
      fill
      sizes="33vw"
      className="rounded-lg object-cover"
    />
  </div>
</div>

[stefanprobst]

What do you mean by that, exactly?

adding an additional example for images which should always be displayed at a specific width and height, irrespective of viewport size, but taking device pixel ratio into account - basically how to do "layout: fixed" from the legacy image component with the new image component.

[leerob]

@stefanprobst can you explain the layout you're trying to build with that image? Trying to understand when you would never want the image to be responsive. Is it a background image of sorts?

[leerob]

@stefanprobst going to go ahead and merge this, but we can always add more 😄

[stefanprobst]

@leerob

can you explain the layout you're trying to build with that image? Trying to understand when you would never want the image to be responsive. Is it a background image of sorts?

let's say we are building a /team page, which should display images of team members at 300x300 pixels, but the original photos are huge, so we want to use the next image component to reduce the size of these photos, because they will only ever be displayed at 300x300 or at 600x600 on high-dpi screens.

[leerob]

You would probably still want those images to be responsive when going down to mobile though, right?

I believe you'd use sizes here: https://nextjs.org/docs/app/api-reference/components/image#sizes