Markdown Images
Images make your content more engaging and help illustrate your points. Markdown provides simple syntax for adding images, though you'll sometimes need HTML for more advanced features.
Basic Image Syntax
The basic syntax for images in Markdown is similar to links, but with an exclamation mark at the beginning:
Images with Titles
You can add titles that appear when users hover over the image:
Alt Text Best Practices
Alt text is crucial for accessibility and SEO:
1. Be Descriptive
❌ Not helpful:
✅ Descriptive:
2. Keep It Concise
❌ Too long:
✅ Concise:
3. Don't Include "Image of" or "Picture of"
❌ Redundant:
✅ Direct:
Reference-Style Images
Like links, you can use reference-style syntax for images:
![Alt text][image-reference]
[image-reference]: image.jpg "Optional title"
Example
Here's our logo: ![Company Logo][logo]
And here's a screenshot: ![App Screenshot][screenshot]
[logo]: /images/logo.png "My Company Logo"
[screenshot]: /images/app.png "App Dashboard Screenshot"
Image Paths and URLs
Local Images
External Images
Common Patterns
Image with Caption
*Figure 1: Weekly team meeting discussing project milestones*
Before/After Images
## Before
## After
Step-by-Step Instructions
1. Click the settings icon
2. Select "Account Settings"
3. Update your profile information
Image Gallery
## Project Screenshots
  
Troubleshooting Images
Common Issues
- Image not displaying: Check file path and filename
- Broken image icon: Verify image URL is accessible
- Image too large: Resize or compress the image
- Wrong format: Ensure browser supports the image format
Testing Images
- •Preview in your Markdown editor
- •Check in different browsers
- •Verify on mobile devices
- •Test with slow internet connections
Advanced Techniques
Image Links
Combine images with links:
[](full-size.jpg)
Images are a powerful way to enhance your Markdown documents. Use them thoughtfully to support your content and improve user experience!
Need to emphasize text in your content? Learn about strikethrough formatting next.