Image component - add more detail to quality prop

[arturogh]

Hi, I think it would be useful to know more about the quality prop for the Image component. I know it's a number, but unsure what are good (recommended) "quality" numbers. Also, what is the default value?

Page: https://docs.astro.build/en/guides/integrations-guide/image/#image-

[sarah11918]

Hi @arturogh, thanks for this, and I agree!

I'm going to reach out to @tony-sull on this one for some clarification, and I think that would be a really helpful addition to our docs. Thank you!

[sarah11918]

Related, re the <Picture /> component, we should confirm with @tony-sull that quality is not an attribute you can use on it, as it seems to be the only one that is only available for <Image /> (without a corresponding equivalent, e.g. format/formats, width/widths, height/sizes. (Or, whether we just don't mention it in the docs and it should be added?)

Also maybe of interest: this workaround with getImage posted in support: (from this Discord thread: https://discord.com/channels/830184174198718474/1033947574136225893/1033994531533770774 )

By the looks of things the Picture component doesn't utilise quality. I'm not sure if this is done by design or I've missed something?

The good news is you can get around this by using getImage and it mirrors the current Picture component with the added benefit of using quality and setting image dimensions on

---
import { getImage } from '@astrojs/image';

// Set some defaults
const imgSpec = {
  src: "...",
  alt: "...",
  width: 320, 
  aspectRatio: 1,
  quality: 80,
  format: "jpg", // quality doesn't seem to work without format being set
};
---

<picture>
{
  ["avif", "webp", "jpg"].map(async (format) => {
    const { src } = await getImage({ ...imgSpec, format });

    return <source type={`image/${format}`} srcset={`${src} ${imgSpec.width}w`} />
  })
            }
  <img {...(await getImage(imgSpec))} loading="lazy" decoding="async" />
</picture>

[delucis]

@sarah11918 & @tony-sull did a deep dive here and we don’t think we can document much more. quality is in the range 0–100, but the defaults vary for each format (and differ depending on if you’re using Squoosh or sharp). By default, it uses the compressor’s internal “best”/default value and we don’t always even know what that is ourselves.

Maybe we could slightly improve the wording, but seems like we’re a bit restricted in how much more we can add.