Hi Erik,
Thanks for sharing all of those details! I can provide some backing info on why you're seeing those HTML differences and some workarounds.
why there is this divergence in the way the GatsbyImage component is rendered in Previews vs. not
When not previewing, gatsbyImageData is generated by Gatsby's GraphQL server. With this, you are able to pass arguments to adjust the returned object, such as which kind of layout (CONSTRAINED, FULL_WIDTH, FIXED). This gives you full support of gatsby-plugin-image's features.
When in a preview session, gatsbyImageData is generated by gatsby-plugin-prismic-previews. This happens in the browser at runtime. As a result, it does not have access to GraphQL or any of your gatsbyImageData arguments. It can only simulate how the GraphQL server works. The plugin returns an object matching gatsby-plugin-image's defaults.
This means arguments like layout will not be previewable. Based on the HTML you shared, it looks like you are using the FIXED layout. In a preview, gatsbyImageData is using a CONSTRAINED layout (the default layout). This is why you see the constrained class on the image wrapper.
For full preview compatibility, I recommend using the CONSTRAINED layout for all images rather than FIXED. Depending on your site, this may require changes to your CSS. You effectively would be using CSS rather than gatsby-plugin-image to ensure your image is sized correctly.
Notably, I am using ArtDirection for this GatsbyImage. What I found, is that ArtDirection only supports images that have the same aspect ratio .
Are you using gatsby-plugin-image's withArtDirection helper?
Even when using withArtDirection, it only works with images of the same aspect ratio as you found. Gatsby provides suggestions on how you can fix this with CSS here: Gatsby Image plugin | Gatsby
I'm just sharing that link in case changing to CONSTRAINED requires changes to your current art direction setup. :)
Hopefully this helps. If you find you are unable to get previews working as expected, I recommend trying Gatsby Cloud's Preview feature (Netlify Deploy Previews - Share, Review, & Gather Feedback on Web Projects). It runs Gatsby's full build system in the cloud during previews, meaning all of your GraphQL queries will work the same during build time and previews.
You can learn more about setting up Gatsby Cloud and enabling previews here: https://prismic.io/docs/technologies/prismic-gatsby-cloud