docs: supplement responsive usage

[a1mersnow]

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Try to help beginners use <NuxtImg>'s responsive features.

I changed the example below <NuxtImg>'s sizes property:

<!-- before -->
<NuxtImg
  src="/logos/nuxt.png"
  sizes="100vw sm:50vw md:400px"
/>
<!-- after -->
<NuxtImg
  src="/logos/nuxt.png"
  sizes="300px sm:50vw md:400px"
/>

And I recommend giving a pixel value for the default size.

If you use 100vw as the default size, you will get srcsets of 1w and 2w which do not make sense.

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@1642

commit: c18d16b

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 62.97%. Comparing base (c4bba1b) to head (c18d16b).

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #1642   +/-   ##
=======================================
  Coverage   62.97%   62.97%           
=======================================
  Files          77       77           
  Lines        3795     3795           
  Branches      433      433           
=======================================
  Hits         2390     2390           
  Misses       1378     1378           
  Partials       27       27           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.