Image Optimizations Part 2: Advanced Styles & Magic Imports

Welcome back! In Part 1, we covered the basics of our OptimizedImage component. Now, let’s dive into the advanced features that will really make your blog stand out.

1. Auto-Import Magic

You might have noticed in Part 1 that we didn’t need to import the OptimizedImage component.

We’ve configured our blog layout to automatically provide this component to all MDX files. This keeps your content clean and focused on writing.

2. New Styles

We’ve added some exciting new styles to make your images pop.

Polaroid

Give your images a nostalgic feel with the polaroid style.

3D Depth

Add some depth with the 3d style.

Popping off the screen

Brutalism

Go bold with the brutal style.

3. Organic Shapes

Move beyond the rectangle with new shapes.

Blob

Rounded

Soft and friendly

4. Animations

Bring your content to life with entrance animations.

Rotate In

Spinning into view

Bounce

Usage

Just like before, simply use the component directly:

<OptimizedImage
  src="/path/to/image.jpg"
  alt="Description"
  width={500}
  height={300}
  style="polaroid"
  animation="rotate-in"
  caption="Your caption here"
/>

Now go forth and make your images beautiful!