Example: Including Images in Your Posts

Working with images in Markdown is straightforward. Here's how to include them in your Zola blog posts.

Basic Image Syntax

The basic syntax for including an image in Markdown is:

![Alt text](/path/to/image.jpg "Optional title")

For example, here's how to include a logo from your static folder:

Image Styling

You can also use HTML for more control over your images:

<figure>
  <img src="/favicon/favicon-96x96.png" alt="Zola Logo" style="width:100px;">
  <figcaption>The Zola logo with custom width</figcaption>
</figure>

Image Placement

You can align images using HTML and CSS:

<div style="text-align:center">
  <img src="/favicon/favicon-96x96.png" alt="Centered Zola Logo">
</div>

Best Practices

1. Always include descriptive alt text for accessibility
2. Optimize images before uploading (compress, resize)
3. Use relative paths for site portability
4. Consider responsive images for mobile users