hugo-geekblog/exampleSite/content/posts/post-with-images/index.md

title	date	authors	tags	resources
Post with images	2020-06-22T20:00:00+02:00	richard-roe john-doe	Open Source Development	name src params feature images/feature.jpg credits [Angelina Litvin](https://unsplash.com/@linalitvina) on [Unsplash](https://unsplash.com/s/photos/writing) name src title params testimage images/testimage.jpg This is a test image credits [David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)

If you need more flexibility for your embedded images, you could use the img shortcode. It is using Hugo's page resources and supports lazy loading of your images.

Attributes:

Name	Usage	default
name (string)	Name of the image resource defined in your front matter.	empty
alt (string)	Description for displayed image.	resource .Title
size (string)	Thumbnail size (tiny|small|medium|large).	empty
lazy (bool)	Enable or disable image lazy loading. Can be controlled globally by site parameter geekblogImageLazyLoading.	true

Example:

Define your resources in the page front matter, custom parameter params.credits is optional.

---
resources:
  - name: testimage
    src: "images/testimage.jpg"
    title: This is a test image
    params:
      credits: "[David Pennington](https://unsplash.com/@dtpennington) on [Unsplash](https://unsplash.com/s/photos/test)"
---

{{</* img name="testimage" size="small" lazy=true */>}}

{{< img name="testimage" size="small" lazy=true >}}