How to Resize Markdown Images
When writing Markdown docs, you may find yourself in a scenario where you need to resize an image. We'll walk through how to resize an image inside of your Markdown file.
First off, the usual way we insert images into our Markdown is like this:

For example, this code:

Results in this image:
The logo is a little big, but how can you resize it?
In Docusaurus, you can actually write .mdx
files instead of .md
. The difference
is that .mdx
supports some .jsx
syntax and importing.
JSX is it's own can of worms with lots of features, but what's relevant for inserting
and resizing images is that you must ensure that your file extension for whatever you
are working on is .mdx
rather than .md
. This tells the site you are using
.mdx
import syntax.
Then, at the top of your file, import the images you are going to use:
Note that "top of file" here means BELOW the frontmatter (between the two ---
at the top).
If your file has no frontmatter, this doesn't apply to your specific file.
import firstLogo from './FIRST-logo.jpg'
Then, when you want to use the image:
<img
src={firstLogo}
alt="FIRST Logo"
width="200"
/>

Note that this is just one of three ways to import images. You can read more here on Docusaurus' documentation.
The method showed here is the recommended way to add images for this documentaiton.
For a full example, see this blog post in code to see how we handle images.