micovi.me

This blog post demonstrates the power of combining static images with video previews, creating an engaging reading experience. When you hover over the featured image on the blog listing page, you'll see a video preview play automatically.

Using Images in Your Blog Posts

You can include images anywhere in your blog posts using standard Markdown syntax. The images are automatically optimized and styled to fit within the content flow.

Example: Full-width Image

A beautiful landscape showing mountains at sunset

The image above demonstrates a full-width image with a caption. The system automatically handles responsive sizing and lazy loading for optimal performance.

Example: Code Screenshot

Code editor showing React component structure

Code screenshots are perfect for showing complex UI implementations or explaining architectural patterns visually.

Working with Different Image Sizes

You can use images of various aspect ratios. They'll be displayed responsively:

Square image example showing a logo design

Wide panoramic image showing a city skyline

Video Preview Feature

The video preview feature on the blog listing page creates an interactive experience. Here's how it works:

---
title: "Your Blog Post Title"
date: "2024-01-20"
excerpt: "Brief description..."
image: "/blog/thumbnail.jpg"
video: "/blog/preview.mp4"
---

When users hover over your blog post card, the video automatically plays, giving them a preview of the content. The video should be:

Short: 5-10 seconds maximum
Looped: Seamless loop for continuous playback
Silent: No audio track needed
Optimized: Use MP4 format with H.264 encoding

Best Practices for Blog Media

Image Optimization: Keep images under 500KB for fast loading
Aspect Ratios: Featured images work best at 16:4 ratio (1600x400px)
Alt Text: Always provide descriptive alt text for accessibility
File Organization: Store media in /public/blog/ with descriptive names

Technical Implementation

The blog system uses Next.js Image component for automatic optimization:

// Images in MDX are automatically wrapped with Next.js Image
![Description](/blog/image.jpg)
 
// This becomes:
<Image
  src="/blog/image.jpg"
  alt="Description"
  width={800}
  height={400}
  className="rounded-lg w-full h-auto"
/>

Conclusion

By combining static images with video previews, you can create a more engaging and interactive blog experience. The hover-to-play video feature adds a dynamic element that helps your content stand out while maintaining fast page loads and good SEO.