+++
title = "Post Images"
description = "Add large hero images without touching an image editor."
categories = ["experience"]
tags = ["performance", "imaging", "graphics", "posts"]
features = ["code highlighter", "snippets", "related content"]
[[copyright]]
  owner = "Josh Habdas"
  date = "2019"
  license = "agpl-3.0-or-later"
+++

{{< figure
  src="/images/watercolor_pTIyYTqAlF8_w1440h700.jpeg"
  alt="Map image"
  lqipsrc="/images/watercolor_pTIyYTqAlF8_w936h455.jpeg"
  caption="Sample image placement. Not the real deal."
>}}

Add visual appeal to your posts with post images. Post images appear above post content and leverage {{< external href="https://gohugo.io/content-management/image-processing/" text="Hugo Image Processing" />}} and [Lazy Loading](../lazy-loading) to provide fully automatic, lazy-loaded responsive images with <abbr title="Low-Quality Image Placeholders">LQIP</abbr> and built-in art direction.

Using post images requires some opinion with regard to the structure of your content. To create a post with a post image you must:

1. Group image and content in a {{< external href="https://gohugo.io/content-management/page-bundles/" text="Page Bundle" />}} as shown below.
2. Update post {{< external href="https://gohugo.io/content-management/front-matter/" text="Front Matter" />}} as described below.

An example page bundle might look like:

```
├── archetypes
├── content
│   └── post
│       └── secure-your-digital-life
│           ├── images
│           │   └── florian-klauer-119557-unsplash.jpg
│           └── index.md
├── layouts
```

With a `header` image specified in `index.md`:

```toml
[[resources]]
  src = "images/*119557*"
  name = "header"
```

{{% hackcss-alert type="info" %}}**Tip:** Orientation is not significant. For optimal display use larger images.{{% /hackcss-alert %}}

Add an image caption showing the image title:

```toml
[[resources]]
  src = "**291607-unsplash.jpg"
  name = "header"
  title = "Ottawa road in the evening" # adds image caption
```

Add [Structured Data]({{< relref "structured-data" >}}) using {{< external "https://gohugo.io/content-management/page-resources/#page-resources-metadata" "Resources Metadata" />}} to improve accessibility:

```toml
[[resources]]
  src = "**291607-unsplash.jpg"
  name = "header"
  title = "Ottawa road in the evening"
  [resources.params.meta]
    description = "Light trails depicting speed" # adds alt text and image meta
    creator = "Marc-Olivier Jodoin" # updates caption and adds image meta
```

Continue adding metadata to improve accessibility:

```toml
[[resources]]
  src = "**291607-unsplash.jpg"
  name = "header"
  title = "Ottawa road in the evening"
  [resources.params.meta]
    description = "Light trails depicting speed"
    creator = "Marc-Olivier Jodoin"
    sameAs = "https://unsplash.com/photos/NqOInJ-ttqM/" # also updates caption
    license = "https://unsplash.com/license" # attribution not required
    contentLocation = "Ottawa, Canada"
    keywords = ["light trail", "building", "speed", "night"]
```

Supported metadata in examples above. Adjust display using [Custom Styles]({{< relref "custom-styles" >}}).