Images
Anonymous contributor
Published Aug 6, 2021Updated Dec 10, 2024
Contribute to Docs
Embedding an image is very similar to adding a link in Markdown:
![Alt text](URL or file path)
- Add an exclamation mark
!
- Followed by the alt text in square brackets
[Alt text]
- And the path or URL to the image asset in parentheses
(
)
.
For example:
![Sonny and Mariel high fiving.](https://content.codecademy.com/courses/learn-cpp/community-challenge/highfive.gif)
The output would be:
An optional title can also be added after the URL, still in the parentheses:
![Sonny and Mariel high fiving.](https://content.codecademy.com/courses/learn-cpp/community-challenge/highfive.gif 'High Five')
Linked Images
To add a link to an image, enclose the Markdown for the image in brackets, and then add the link in parentheses.
[![A mushroom-head robot drinking bubble tea](/assets/images/codey.jpg 'Codey the Codecademy mascot drinking bubble tea')](https://codecademy.com)
The above example results in the following linked image:
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn Markdown on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner Friendly7 hours