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

The Dead Simple Markdown Guide to Images

by TypesettingAugust 20th, 2024
Read on Terminal Reader
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
Typesetting HackerNoon profile picture

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:



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:


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