mirror of
https://github.com/waynesutton/markdown-site.git
synced 2026-01-12 04:09:14 +00:00
462729de58
Update version to 1.0.0 across package.json and changelog. Configure netlify.toml with Convex deployment URL (agreeable-trout-200.convex.site). Verify TypeScript type-safety for src and convex directories. Confirm Netlify build passes with SPA 404 fallback configured. Update TASK.md with deployment steps and files.md with complete file structure.
100 lines
2.8 KiB
Markdown
100 lines
2.8 KiB
Markdown
---
|
|
title: "Using Images in Blog Posts"
|
|
description: "Learn how to add header images, inline images, and Open Graph images to your markdown blog posts."
|
|
date: "2025-01-18"
|
|
slug: "using-images-in-posts"
|
|
published: true
|
|
tags: ["images", "tutorial", "markdown", "open-graph"]
|
|
readTime: "4 min read"
|
|
image: "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=630&fit=crop"
|
|
---
|
|
|
|
# Using Images in Blog Posts
|
|
|
|
This post demonstrates how to add images to your blog posts. You can use header images for social sharing, inline images for content, and set Open Graph images for better link previews.
|
|
|
|
## Header/Open Graph Images
|
|
|
|
The `image` field in your frontmatter sets the Open Graph image for social media previews. When someone shares your post on Twitter, LinkedIn, or Slack, this image appears in the preview card.
|
|
|
|
```yaml
|
|
---
|
|
title: "Your Post Title"
|
|
image: "https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=1200&h=630&fit=crop"
|
|
---
|
|
```
|
|
|
|
**Recommended dimensions:** 1200x630 pixels (1.91:1 ratio)
|
|
|
|
## Inline Images
|
|
|
|
Add images anywhere in your markdown content using standard syntax:
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
Here's an example image from Unsplash:
|
|
|
|
|
|
|
|
The alt text appears as a caption below the image.
|
|
|
|
## Image Sources
|
|
|
|
You can use images from:
|
|
|
|
| Source | Example |
|
|
| ----------- | --------------------------------- |
|
|
| Local files | `/images/my-image.png` |
|
|
| Unsplash | `https://images.unsplash.com/...` |
|
|
| Cloudinary | `https://res.cloudinary.com/...` |
|
|
| Any CDN | Full URL to image |
|
|
|
|
### Local Images
|
|
|
|
Place image files in the `public/images/` directory:
|
|
|
|
```
|
|
public/
|
|
images/
|
|
screenshot.png
|
|
diagram.svg
|
|
photo.jpg
|
|
```
|
|
|
|
Reference them with a leading slash:
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
### External Images
|
|
|
|
Use the full URL for images hosted elsewhere:
|
|
|
|
```markdown
|
|
|
|
```
|
|
|
|
Here's a coding-themed image:
|
|
|
|
|
|
|
|
## Best Practices
|
|
|
|
1. **Use descriptive alt text** for accessibility
|
|
2. **Optimize image size** before uploading (compress PNG/JPG)
|
|
3. **Use CDN URLs** for external images when possible
|
|
4. **Match OG image dimensions** to 1200x630 for social previews
|
|
5. **Use SVG** for logos and icons
|
|
|
|
## Free Image Resources
|
|
|
|
These sites offer free, high-quality images:
|
|
|
|
- [Unsplash](https://unsplash.com) - Photos
|
|
- [Pexels](https://pexels.com) - Photos and videos
|
|
- [unDraw](https://undraw.co) - Illustrations
|
|
- [Heroicons](https://heroicons.com) - Icons
|