WordPress+GraphQL+Gatsby渲染WP页面图片超出最大宽度问题

核心结论 #

这个问题改SCSS解决不了。SCSS只能控制图片在页面上的显示宽高，改不了浏览器实际请求的源文件大小：就算你用CSS把10M的原图缩到100px宽，浏览器还是要完整下载10M的文件，根本压不了加载体积。
问题本质是WordPress内容输出规则+Gatsby渲染逻辑的问题，要从两边分别调整：

1. WordPress侧配置检查 #

• 进WordPress后台「设置-媒体」页，确认图片自动裁剪是开启状态，预设的缩略图、中等图、大尺寸参数和你站点实际需要的展示尺寸匹配，别把所有裁剪尺寸都设成和原图一样大。
• 检查编辑内容时的图片插入设置：不管用古腾堡还是经典编辑器，插图片的时候别选「全尺寸」，根据展示位置选对应的预设尺寸就行，WordPress会自动把裁剪后的图片链接写到生成的HTML里。
• 如果你是用WPGraphQL对接Gatsby，检查下插件配置，别开「强制返回原图链接」的选项。

2. Gatsby侧渲染逻辑优化 #

你现在的写法是直接把WordPress返回的原始HTML字符串插到页面里，完全没走Gatsby的图片优化流程，这才是加载全尺寸原图的核心原因：

<div
  dangerouslySetInnerHTML={{
    __html: page.html,
  }}
/>

对应的优化方法：

• 优先用生态插件处理内嵌图片：装好gatsby-plugin-image，配合gatsby-source-wordpress自带的图片处理能力，再加个gatsby-wpgraphql-inline-images，构建的时候会自动把HTML里的原始img标签替换成优化后的版本，自动生成适配不同屏幕的多尺寸srcSet、转WebP/AVIF这类小体积格式、默认开懒加载，从根上避免加载全尺寸原图。
• 不想加插件的话，也可以拿到page.html之后自己写正则匹配img标签，把src里的原图链接替换成WordPress裁剪后的对应尺寸链接——WordPress裁剪图一般命名规则是原文件名-宽x高.后缀，自己拼路径就行，但这种方法灵活度差，适配新尺寸很麻烦，不推荐长期用。

补充 #

你可以给富文本容器加段基础样式，避免大图片溢出容器，但这只是显示层调整，和加载体积没关系：

.rich-text-container {
  img {
    max-width: 100%;
    height: auto;
  }
}

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