paint-brush
The Dead Simple Markdown Guide to Imagesby@typesetting
522 reads
522 reads

The Dead Simple Markdown Guide to Images

by Typesetting
Typesetting HackerNoon profile picture

Typesetting

@typesetting

Shaping readable and sustainable publications.

August 20th, 2024
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

To add an image in Markdown, use ![alt text](URL "title"). For linking an image, enclose the image Markdown in brackets and add the link in parentheses. Optionally, include a title for additional context.
featured image - The Dead Simple Markdown Guide to Images
1x
Read by Dr. One voice-avatar

Listen to this story

Typesetting HackerNoon profile picture
Typesetting

Typesetting

@typesetting

Shaping readable and sustainable publications.

Learn More
LEARN MORE ABOUT @TYPESETTING'S
EXPERTISE AND PLACE ON THE INTERNET.

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets, and the path or URL to the image asset in parentheses. You can optionally add a title in quotation marks after the path or URL.


![The San Juan Mountains are beautiful!](/assets/images/san-juan-mountains.jpg "San Juan Mountains")


The rendered output looks like this:


image


Note: To resize an image, see the section on image size. To add a caption, see the section on image captions.

Linking Images

To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.


[![An old rock in the desert](/assets/images/shiprock.jpg "Shiprock, New Mexico by Beau Rogers")](https://www.flickr.com/photos/beaurogers/31833779864/in/photolist-Qv3rFw-34mt9F-a9Cmfy-5Ha3Zi-9msKdv-o3hgjr-hWpUte-4WMsJ1-KUQ8N-deshUb-vssBD-6CQci6-8AFCiD-zsJWT-nNfsgB-dPDwZJ-bn9JGn-5HtSXY-6CUhAL-a4UTXB-ugPum-KUPSo-fBLNm-6CUmpy-4WMsc9-8a7D3T-83KJev-6CQ2bK-nNusHJ-a78rQH-nw3NvT-7aq2qf-8wwBso-3nNceh-ugSKP-4mh4kh-bbeeqH-a7biME-q3PtTf-brFpgb-cg38zw-bXMZc-nJPELD-f58Lmo-bXMYG-bz8AAi-bxNtNT-bXMYi-bXMY6-bXMYv)


The rendered output looks like this:


image

This guide is a Matt Cone project available on Markdown Guide under the CC BY-SA 4.0 license.


L O A D I N G
. . . comments & more!

About Author

Typesetting HackerNoon profile picture
Typesetting@typesetting
Shaping readable and sustainable publications.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
X
Typesetting
Briefly
X REMOVE AD