Note: This site is currently "Under construction". I'm migrating to a new version of my site building software. Lots of things are in a state of disrepair as a result (for example, footnote links aren't working). It's all part of the process of building in public. Most things should still be readable though.

External Images Arent Responsive In Gatsby With Gatsby Remark Images

Using `gatsby-remark-images` images called from another site weren't responsive for me with:

Code

resolve: `gatsby-plugin-mdx`,
options: {
    extensions: ['.mdx', '.md'],
    // a workaround to solve mdx-remark plugin compat issue
    // https://github.com/gatsbyjs/gatsby/issues/15486
    plugins: [
        `gatsby-remark-images`,
    ],
    gatsbyRemarkPlugins: [

        {
            resolve: `gatsby-remark-images`,
            options: {
                linkImagesToOriginal: false,
                maxWidth: 800,
                quality: 82,
                loading: "eager",
                disableBgImage: true,
            },
        },
        
        ... etc...

TODO: figure out a solution for this