What does the built-in Image component in Next.js do differently from a regular HTML img tag?

The Image component automatically resizes images to fit the size they are displayed at, serves modern efficient formats like WebP when supported, lazy loads images that are not yet visible on screen, and prevents layout shift by reserving the correct amount of space before the image finishes loading.

import Image from 'next/image';

export default function Avatar() {
  return <Image src="/profile.jpg" alt="User profile picture" width={100} height={100} />;
}