GIFs in markdown do not resize?

[DWShuo]

Description

Currently using Gatsby blog theme, when i include a gif like so ![otter dancing with a fish](./images/dancing-ofter.gif), it doesn't resize it to fit with the other images. I tried looking for documentation on this but its sparse, this is the only one i could find https://www.gatsbyjs.cn/docs/working-with-gifs/#including-gifs-in-markdown
I would appropriate any advice on how to correct this.

Steps to reproduce

1. gatsby new my-themed-blog https://github.com/gatsbyjs/gatsby-starter-blog-theme
2. include a GIF ![otter dancing with a fish](./images/dancing-ofter.gif)
3. gatsby develop

Expected result

This is what the expected result should look like, i manually set the size to 600px, but if i do this it doesn't auto resize when viewed on mobile

Actual result

The actual result makes the GIF bigger than everything else on the page, and makes page scrolling less then optimal experience

Environment

System:
OS: Linux 5.8 Manjaro Linux
CPU: (4) x64 Intel(R) Core(TM) i5 CPU M 540 @ 2.53GHz
Shell: 5.0.18 - /bin/bash
Binaries:
Node: 10.22.1 - ~/.nvm/versions/node/v10.22.1/bin/node
Yarn: 1.22.5 - /usr/bin/yarn
npm: 6.14.8 - ~/.nvm/versions/node/v10.22.1/bin/npm
Languages:
Python: 3.8.5 - /usr/bin/python
Browsers:
Firefox: 81.0
npmGlobalPackages:
gatsby-cli: 2.12.111

[ascorbic]

Hey. This is because the Sharp plugin doesn't support GIFs, so it can't resize them.

[DWShuo]

was there a design reason as to not support GIFs? how would i go about fixing this? im pretty new to Gatsby

[ascorbic]

Hi. No, it's simply that the library we use for resizing images doesn't support them. They are generally a bad idea for performance, as the filesizes are usually massive. You best bet is to manually resize them or use a different format.

[ascorbic]

See discussion here: #26526