Adding Images to Hugo Sites

Goal

Add images to your Hugo site pages using the appropriate method for your use case.

Methods

Page Bundles

Place images alongside your markdown file:

content/posts/my-post/
├── index.md
├── my-image.jpg

Reference in index.md:

![Alt text](my-image.jpg)

or with full path:

![Alt text](/posts/my-post/my-image.jpg)

Static Directory

For globally shared images:

static/images/my-image.jpg

Reference in markdown:

![Alt text](/images/my-image.jpg)

Hugo Figure Shortcode

For captions and additional styling:

Alt text

            
Image Title

With static directory:

Alt text

            
Image Title

External URLs

![Alt text](https://example.com/path/to/image.jpg)

HTML

For custom dimensions:

<img src="/images/my-image.jpg" alt="Alt text" width="600">

Which to Use