Working with Images in Your Blog Posts
A guide to adding and formatting images in your markdown blog posts, including local and external images.
Working with Images in Your Blog Posts
This post demonstrates how to add images to your markdown blog posts. You can include images from various sources and they'll be displayed beautifully in your blog.
External Images from URLs
You can embed images directly from external URLs. Here's an example using an Unsplash image:
Different Image Sizes
Full Width Image
Medium Size Image
Small Inline Image
Here's a smaller image that can be used inline with text:
Images with Alt Text
Always include descriptive alt text for accessibility:
Multiple Images in a Row
You can place multiple images to create a gallery effect:
Best Practices for Blog Images
- Use descriptive alt text - This helps with SEO and accessibility
- Optimize image sizes - Use appropriate dimensions for your content
- Choose relevant images - Images should enhance your content, not distract from it
- Consider loading performance - Use lazy loading for better page speed
- Maintain consistency - Use similar styles and quality across your posts
Technical Implementation
In this blog, images are automatically:
- Centered in the content area
- Given rounded corners for a modern look
- Styled with a subtle shadow for depth
- Made responsive to fit different screen sizes
- Lazy loaded for better performance
Using Local Images
You can also use local images by placing them in the public folder:
Conclusion
Adding images to your blog posts is simple with markdown. Just use the standard markdown image syntax, and the blog will handle the rest - making your images look great on all devices!