GitHub Markdown – How to Change Image Size Without HTML

githubgithub-flavored-markdown

I am limited to using []() syntax to render an image (as opposed to <img>) (the reason for this limitation is because it's currently being used as a workaround for a known bug).

Is there a way to resize an image using only []() convention (not using <img>)?

I have tried some things so far that haven't worked. Most notably:

Adding ?s=200/&s=200 parameter to the end of the image url (recommended here)

The best solution I have so far is to download the image and resize it and re-upload it. Any way of changing its size from the md itself or by way of changing the url (e.g. via a parameter etc) would be much better

Best Answer

The GFM (GitHub Flavored Markdown) specification for images does not include any size attributes.

Meaning a []() won't include any size element in its HTML generated form.

If you change the Markdown processor to Kramdown for GitHub pages, then this would work:

![test image size](/img/post-bg-2015.jpg){:class="img-responsive"}
![test image size](/img/post-bg-2015.jpg){:height="50%" width="50%"}
![test image size](/img/post-bg-2015.jpg){:height="700px" width="400px"}

Using HTML would work (provided you use the https://raw.githubusercontent.com/ of your image, but this is not possible in your case.

<img src="https://your-image-url.type" width="100" height="100">

You can try, for testing:

{:refdef: style="width: 10px; height: 10px"}
[![Octocat](https://github.githubassets.com/images/icons/emoji/octocat.png)](./somelink)
{: refdef}
Related Question