markdown_readme_images.md

Images in README.md Markdown Files

Testing

Image Sizes

Image source

https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

Resize it!

Supposedly this works best on Github

<img src=“https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png” width=50% />

<img src=“https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png” width=“100px” />

---

![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png | width=100) 

![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png =250x250) 

![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)

• Copy <img> in browser DevTools. Replace ![](url) to <img>. Add width(and height) attr.
• <img src=“https://camo.githubusercontent.com/...” data-canonical-src=“https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png” width=“200” height=“400” />

---

<div style=“width: 60%; height: 60%”>
  ![](https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png)
</div>


---

Reference Images

In the body use ![image description][imageName]. Note the 2 sets of [].

Now, at the bottom of the document provide the src url with the [imageName]:

![image description][imageName]

[imageName]: https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png

or omit the description…

![imageName]

[imageName]: https://gyazo.com/eb5c5741b6a9a16c692170a41a49c858.png