diff --git a/README.md b/README.md
index a01f0de4..0c0d8790 100644
--- a/README.md
+++ b/README.md
@@ -413,7 +413,7 @@ Parameters:
 The `paige/hero` shortcode provides a hero section.
 
 ```
-{{< paige/hero alt="" format="" header="" height="" image="" imageclass="" maxheight="" maxwidth="" title="" width="" >}} {{< /paige/hero >}}
+{{< paige/hero alt="" header="" height="" image="" imageclass="" maxheight="" maxwidth="" process="" title="" width="" >}} {{< /paige/hero >}}
 ```
 
 Inner content: Optional. String. Markdown. The body.
@@ -423,8 +423,6 @@ Parameters:
 <dl>
     <dt><code>alt</code></dt>
     <dd>Optional. String. Plain text. Image alt.</dd>
-    <dt><code>format</code></dt>
-    <dd>Optional. String. Image format. Must be <code>bmp</code>, <code>gif</code>, <code>jpg</code>, <code>png</code>, <code>tiff</code>, or <code>webp</code>. Must not be used with <code>method</code> or <code>options</code>.</dd>
     <dt><code>header</code></dt>
     <dd>Optional. String. Markdown. The header.</dd>
     <dt><code>height</code></dt>
@@ -437,6 +435,8 @@ Parameters:
     <dd>Optional. String. CSS value. Image maximum height. Default is <code>20rem</code>.</dd>
     <dt><code>maxwidth</code></dt>
     <dd>Optional. String. CSS value. Image maximum width.</dd>
+    <dt><code>process</code></dt>
+    <dd>Optional. String or boolean. If a string, it is the Hugo image processing <a href="https://gohugo.io/content-management/image-processing/#image-processing-methods">methods</a> and <a href="https://gohugo.io/content-management/image-processing/#image-processing-options">options</a>, mixed together. If no method is specified, resize is used. If no image dimensions are given, the originals are used. If a boolean that is true, the Hugo image processing method resize is used, and the default Hugo image processing options are used.</dd>
     <dt><code>stretch</code></dt>
     <dd>Optional. Boolean. Whether to stretch the image fully horizontally.</dd>
     <dt><code>title</code></dt>
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index 29ac3ce2..3826d2a5 100644
--- a/exampleSite/content/_index.md
+++ b/exampleSite/content/_index.md
@@ -15,10 +15,10 @@ title: "Paige"
 
 {{< paige/hero
     alt="Landscape"
-    format="webp"
     header="An advanced Hugo theme"
     image="https://images.unsplash.com/photo-1490604001847-b712b0c2f967?w=1296"
     imageclass="rounded-4 shadow"
+    process="webp"
     stretch=true >}}
 Paige is designed to put your content front and center, avoiding the typical clutter. The look is seamless and smooth, scalable and readable, portable and efficient. The layout is minimal and responsive, using verticality and white space to focus and delineate parts of the page. The implementation is flexible and extensible. It's a versatile canvas that serves most web needs.
 {{< /paige/hero >}}
diff --git a/layouts/shortcodes/paige/hero.html b/layouts/shortcodes/paige/hero.html
index 5c078084..0838d442 100644
--- a/layouts/shortcodes/paige/hero.html
+++ b/layouts/shortcodes/paige/hero.html
@@ -1,6 +1,5 @@
 {{ $alt := .Get "alt" }}
 {{ $content := .Inner | replaceRE "^\n" "" | replaceRE "\n$" "" | markdownify }}
-{{ $format := .Get "format" }}
 {{ $header := .Get "header" | markdownify }}
 {{ $height := .Get "height" }}
 {{ $image := .Get "image" }}
@@ -8,6 +7,7 @@
 {{ $maxheight := .Get "maxheight" | default "20rem" }}
 {{ $maxwidth := .Get "maxwidth" }}
 {{ $page := .Page }}
+{{ $process := .Get "process" }}
 {{ $stretch := .Get "stretch" }}
 {{ $title := .Get "title" }}
 {{ $width := .Get "width" }}
@@ -29,12 +29,12 @@
                 "alt" $alt
                 "class" $imageclass
                 "fetchpriority" "high"
-                "format" $format
                 "height" $height
                 "loading" "eager"
                 "maxheight" $maxheight
                 "maxwidth" $maxwidth
                 "page" $page
+                "process" $process
                 "src" .
                 "title" $title
                 "width" $width