feat: allow per-format quality settings

[Leon338]

Hey!

I added a feature that lets you pass an object to the quality prop instead of just a single number.

Why?

Different formats handle compression differently. For example, AVIF usually looks great at quality 50, while WebP might need 80 to achieve the same visual fidelity. This update lets us micro-optimize those settings to save bandwidth without hurting the visuals on legacy formats.

Usage

You can now do this:

export default defineNuxtConfig({
  image: {
    format: ["avif", "webp"],
    quality: {
      avif: 50,
      default: 80
    }
  }

It is fully backward compatible. Passing a single number still works exactly like before.

Let me know if you need any changes!

[pkg-pr-new]

Open in StackBlitz

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

commit: a63a4bf

[codecov-commenter]

Codecov Report

❌ Patch coverage is 0% with 13 lines in your changes missing coverage. Please review.
✅ Project coverage is 6.97%. Comparing base (ab652ab) to head (a63a4bf).

Files with missing lines	Patch %	Lines
src/runtime/image.ts	0.00%	12 Missing ⚠️
src/runtime/utils/props.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@           Coverage Diff            @@
##            main   #2037      +/-   ##
========================================
- Coverage   6.99%   6.97%   -0.03%     
========================================
  Files         78      78              
  Lines       3629    3641      +12     
  Branches     140     140              
========================================
  Hits         254     254              
- Misses      3326    3338      +12     
  Partials      49      49              

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