Adding an image to a document is easy as well. All you need to do is add
your image file within the document’s folder, and then reference the image
from within the document’s
index.md file, using an
or the equivalent Markdown syntax.
It’s as easy as that. Let’s walk through an example:
You should be getting used to this by now, as we’ve done it several times above. Make sure you start with a fresh working branch updated with the latest content from the
mainbranch of the
cd ~/repos/mdn/content git checkout main git pull mdn main # Run "yarn" again just to ensure you've # installed the latest Yari dependency. yarn git checkout -b my-images
Add your image to the document folder. For this example, let’s assume we’re adding a new image to the
cd ~/repos/mdn/content cp /some/path/my-cool-image.png files/en-us/web/css/
filecheckcommand on each image you add. It’ll complain if something’s wrong (see also the Compressing images section below). We’ll automatically run this as one of the tests we run when your new pull request is created, but why wait to fix any possible issues later?
yarn filecheck files/en-us/web/css/my-cool-image.png
Use your image within the document. For example, add the following
<img>element somewhere inside
<img src="my-cool-image.png" alt="My cool image" />
Add and commit all of the deleted, created, and modified files, as well as push your branch to your fork:
git add files/en-us/web/css/my-cool-image.png files/en-us/web/css/index.html git commit git push -u origin my-images
Now you’re ready to create your pull request.
When you add images to MDN, you should make sure that they are compressed as much as possible without degrading quality, to save on download size for our readers. In fact, if you don’t do this our CI process will fail and the build results will warn you that some of your images are too big.
The best way to compress them is by using the built-in compression tool.
You can compress an image appropriately by using the
--save-compression option — this compresses the specified image
as much as possible, and saves the result over the top of the original.
yarn filecheck files/en-us/web/css/my-cool-image.png --save-compression