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: 1ad4292

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 7.02%. Comparing base (62998ab) to head (1ad4292).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@          Coverage Diff          @@
##            main   #1642   +/-   ##
=====================================
  Coverage   7.02%   7.02%           
=====================================
  Files         77      77           
  Lines       3575    3575           
  Branches     138     138           
=====================================
  Hits         251     251           
  Misses      3276    3276           
  Partials      48      48           

☔ 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.