# UsageLearn how to use Thulite Images in content and templates with Markdown, shortcodes, and partials for responsive, optimized image output.
This guide shows how to add and render images in content and templates with Thulite Images.

## Supported formats

Thulite Images supports all image formats that Hugo can process.
For the complete and current list, see [processable images](https://gohugo.io/quick-reference/glossary/#processable-image).

## Image placement

{{< link-card
  title="Image placement"
  description="Store your images as page, section, global, or remote resources."
  href="/docs/basics/image-placement/"
>}}

## Add to content

Add images to content pages with standard Markdown syntax or the `img`, `picture`, and `figure` shortcodes.

### Markdown syntax

{{< link-card
  title="Markdown"
  description="Add optimized, lazy-loaded images to content pages using standard Markdown image syntax."
  href="/docs/basics/markdown/"
>}}

### Shortcodes

{{< card-grid >}}
{{< link-card
  title="img"
  description="Render a responsive image with lazy loading and LQIP support."
  href="/docs/shortcodes/img/"
>}}
{{< link-card
  title="picture"
  description="Render a responsive image with format negotiation (e.g. WebP with JPEG fallback)."
  href="/docs/shortcodes/picture/"
>}}
{{< /card-grid >}}

{{< card-grid >}}
{{< link-card
  title="figure"
  description="Render a responsive, lazy-loaded image with an optional caption."
  href="/docs/shortcodes/figure/"
  class="w-50"
>}}
{{< /card-grid >}}

## Add to templates

Add images to templates with the `img`, `picture`, and `figure` partials.

### Partials

{{< card-grid >}}
{{< link-card
  title="img"
  description="Render a responsive image with lazy loading and LQIP support."
  href="/docs/partials/img/"
>}}
{{< link-card
  title="picture"
  description="Render a responsive image with format negotiation (e.g. WebP with JPEG fallback)."
  href="/docs/partials/picture/"
>}}
{{< /card-grid >}}

{{< card-grid >}}
{{< link-card
  title="figure"
  description="Render a responsive, lazy-loaded image with an optional caption."
  href="/docs/partials/figure/"
  class="w-50"
>}}
{{< /card-grid >}}