# picture

Use the `picture` partial in Hugo templates to render responsive images with format negotiation, lazy loading, and configurable source options.

This guide explains how to render a responsive image with format negotiation (e.g. WebP with JPEG fallback) using the `picture` partial.
For all available arguments, see the [picture partial reference page](/images/reference/partials/picture/).

## Examples

### Required arguments only

```go-html-template
{{- partial "picture" (dict "page" . "src" "images/vincent-van-zalinge-IicWDdQUfsQ-unsplash.jpg") }}
```

### All arguments

```go-html-template
{{- $opts := dict
  "page" .
  "src" "images/vincent-van-zalinge-IicWDdQUfsQ-unsplash.jpg"
  "width" 768
  "sizes" "auto"
  "formats" (slice "webp" "jpeg")
  "process" "fill 1600x900"
  "lqip" "16x webp q20"
  "decoding" "async"
  "fetchpriority" "auto"
  "loading" "eager"
  "alt" "A close-up of a butterfly on a rope"
  "title" "A close-up of a butterfly on a rope"
  "class" "foo"
}}
{{- partial "picture" $opts }}
```