Image Types
List of supported image types.
Become a backer or sponsor to support our work.
Site Image Resources
The images located in the assets directory.
To use the site image resources, you’ll need to put a leading slash (/) into the URL’s path.
| Path | Markdown | Matched |
|---|---|---|
assets/images/foo.png |  | N |
assets/images/foo.png |  | Y |
assets/images/bar.png |  | Y |
Page Image Resources
The images located in the page’s directory.
You’ll need to organize pages as page bundles, for example.
1content/
2 blog/
3 hello/
4 index.md
5 foo.png
6 bar.png
The content structure above includes one page (blog/hello) that contains two image resources: foo.png and bar.png.
Then you can render the images in the page content file (blog/hello/index.md).
1
2
Public Images
The images located in the static folder.
| Path | Markdown |
|---|---|
static/images/foo.png |  |
static/images/bar.png |  |
External Images
| Path | Markdown |
|---|---|
https://example.org/images/foo.png |  |
https://example.org/images/bar.png |  |
Limitations
Most of the processing methods work only on site image resources and page image resources, except of alignment and resizing. Moreover, the resizing is implemented by inline styles for public images and external images.
Mounting Public Images
The good news is that Hugo allows mounting the static/* folder, to make them to be site resources, then you can process those images via any methods.
hugo.yaml
1module:
2 mounts:
3 - source: content
4 target: content
5 - source: static
6 target: static
7 - source: layouts
8 target: layouts
9 - source: data
10 target: data
11 - source: assets
12 target: assets
13 - source: i18n
14 target: i18n
15 - source: archetypes
16 target: archetypes
17 - source: static/uploads
18 target: assets/uploads
hugo.toml
1[module]
2 [[module.mounts]]
3 source = 'content'
4 target = 'content'
5 [[module.mounts]]
6 source = 'static'
7 target = 'static'
8 [[module.mounts]]
9 source = 'layouts'
10 target = 'layouts'
11 [[module.mounts]]
12 source = 'data'
13 target = 'data'
14 [[module.mounts]]
15 source = 'assets'
16 target = 'assets'
17 [[module.mounts]]
18 source = 'i18n'
19 target = 'i18n'
20 [[module.mounts]]
21 source = 'archetypes'
22 target = 'archetypes'
23 [[module.mounts]]
24 source = 'static/uploads'
25 target = 'assets/uploads'
hugo.json
1{
2 "module": {
3 "mounts": [
4 {
5 "source": "content",
6 "target": "content"
7 },
8 {
9 "source": "static",
10 "target": "static"
11 },
12 {
13 "source": "layouts",
14 "target": "layouts"
15 },
16 {
17 "source": "data",
18 "target": "data"
19 },
20 {
21 "source": "assets",
22 "target": "assets"
23 },
24 {
25 "source": "i18n",
26 "target": "i18n"
27 },
28 {
29 "source": "archetypes",
30 "target": "archetypes"
31 },
32 {
33 "source": "static/uploads",
34 "target": "assets/uploads"
35 }
36 ]
37 }
38}
The configuration example above mounts the static/uploads on assets/uploads, then you’re able to use the images as we did for the site images resources.
1