Add a local or a remote image with Markdown. Images are lazyloaded, blurred up, and responsive.

See also the Markdown Guide: Images


Render hook template: ./layouts/_default/_markup/render-image.html. An <img> element is generated for small images, a <figure> element for large images.


Set smallLimit in ./config/_default/params.toml, e.g. smallLimit = "360".

See also: Images

Add a local image

Place your local images in a page bundle:

├── blog/
│   ├── say-hello-to-doks/
│   │   ├──
│   │   └── say-hello-to-doks.png
│   └──

See also the Hugo docs: Page Bundles


![Green Sea Turtle Hatchling by Hannah Le Leu](images/green-sea-turtle-hatchling.jpg "A green sea turtle hatchling cautiously surfaces for air, to a sky full of hungry birds.")

Will be processed into:

Green Sea Turtle Hatchling by Hannah Le Leu

Add a remote image


![Happy Dance by Neil Sanders](

Will be processed into:

Happy Dance by Neil Sanders

Edit this page on GitHub