Gatsby中StaticImage设置quality=100画质仍较差如何解决

问题复现 #

两种实现的代码与渲染效果对比如下：

• StaticImage组件写法

<StaticImage src='../../images/welcome.svg'
  alt='a'
  placeholder='a'
  width={375}
  height={502}
  quality={100}
/>

渲染效果：

• 原生img标签写法

<img src={image} alt='a' width='375' height='502' />

渲染效果：

核心原因 #

StaticImage组件默认依赖gatsby-plugin-sharp做构建期图片处理，Sharp不支持直接输出矢量SVG，会自动把SVG栅格化为固定分辨率的位图。你设置的*quality参数仅针对JPG、WebP等有损压缩格式生效*，无法改变SVG被转成位图的逻辑，默认生成的1x分辨率位图在高分屏上显示会明显发虚，和原生直接加载矢量SVG的清晰度存在本质差距。
另外代码中placeholder='a'属于无效配置，合法取值为blurred、tracedSVG、none，该配置错误不会直接导致画质下降，但会让占位图逻辑异常。

解决方法 #

优先方案：SVG资源直接引入用原生标签渲染 #

SVG作为矢量格式，本身不需要响应式尺寸适配、格式转换、压缩等StaticImage提供的优化能力，直接引入文件用原生img标签加载是最优解，无任何画质损失：

// 直接导入SVG文件
import welcomeImg from '../../images/welcome.svg'

// 渲染
<img src={welcomeImg} alt="欢迎页插画" width={375} height={502} />

备选方案：必须用StaticImage时适配高分屏 #

如果因业务限制必须使用StaticImage，需要手动配置多分辨率输出适配不同像素密度的屏幕，同时修正无效配置：

<StaticImage src='../../images/welcome.svg'
  alt='欢迎页插画'
  placeholder='none'
  layout="fixed"
  width={375}
  height={502}
  quality={100}
  formats={['png', 'webp']}
  transformOptions={{ fit: "fill" }}
  // 输出1x/2x/3x分辨率资源适配不同DPR屏幕
  sizes="(min-resolution: 3dppx) 3x, (min-resolution: 2dppx) 2x, 1x"
/>

注意：该方案本质还是输出栅格化位图，在页面缩放场景下清晰度依然不如原生矢量SVG，非必要不选。

内容的提问来源于stack exchange，提问作者user42195