Gatsby Image component displaying original image instead of custom image size

[upham-ui]

Hi,

We are using html-react-parse to convert raw HTML from the post_content to React components, which seems to work well in terms of Gatsby then converting them into Gatsby Images.

However, if the original img src is a thumbnail size of an image, not the original image, the rendered Gatsby Image is of the original. In other words an image like this:

<img class="Content-thumbnail-image" src="https://our-website.com/wp-content/uploads/2021/01/some-image-filename-250x250.png" alt="">

is displayed in Gatsby like this (there's some additional stuff before but not relevant I think):

<picture><source srcset="/static/25a11384ccdc56fcd7ba963287df2001/85b06/some-image-filename.png 256w, /static/25a11384ccdc56fcd7ba963287df2001/bc282/some-image-filename.png 512w, /static/25a11384ccdc56fcd7ba963287df2001/51e1c/some-image-filename.png 963w" sizes="(max-width: 963px) 100vw, 963px"><img sizes="(max-width: 963px) 100vw, 963px" srcset="/static/25a11384ccdc56fcd7ba963287df2001/85b06/some-image-filename.png 256w, /static/25a11384ccdc56fcd7ba963287df2001/bc282/some-image-filename.png 512w, /static/25a11384ccdc56fcd7ba963287df2001/51e1c/some-image-filename.png 963w" src="/static/25a11384ccdc56fcd7ba963287df2001/51e1c/some-image-filename.png" alt="" loading="eager" style="position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:1;transition:opacity 500ms"></picture>

The -250x250 at the end of the image filename disappears, and Gatsby pulls in the original image.

Any idea why this is happening?

Thanks,
Ben