Really high-quality image resize pipeline

[vadimkantorov]

Here are two images. Top one is produced by Astro Image pipeline with setting (<Image width="300" quality="max" ... />), and the bottom one is produced from the original hi-res webp by the Astro Markdown image processing pipeline with whatever default settings (and resized down to width="300" using CSS and Safari's resizing). Why is the bottom one much sharper? How can I replicate it with explicit <Image settings? The top one is so much blurrier which makes me think that it's not caused by bespoke Safari's image resizing, but that some quality options are not actually being applied.

I'd like to get some high-quality pre-downscaled images for blog image covers and so forth - mainly to save bandwidth and speed-up page loading and skip downloading megabytes of images, just to have the browser resize them to small scale.

[vadimkantorov]

Oops, I had them resized to width="300", but displayed in browser as width="640"

After fixing it, it seems that Safari's still producing a sharper downsize (even for width="640" quality="max"):

[FelixFangX]

It's resolution, not compression. On a retina screen (DPR 2), an image displayed at 640 CSS px covers 1280 device pixels. The <Image width="640"> output is only 640 px wide, so the browser upscales it. The Markdown one is the full-res original, so Safari downscales it, and that always looks sharper. That's also why quality="max" doesn't change anything.

Have Astro generate a 2x variant as well (astro 3.3+):

<Image src={cover} width={640} densities={[1, 2]} alt="" />

That outputs a srcset with 640 and 1280 px files. If the display width varies, use widths + sizes instead. Both are in the <Image /> reference. Densities larger than the source get skipped, so the original needs to be at least 1280 px wide.