diff --git a/docs/build/workflows.md b/docs/build/workflows.md
index df82c1d2449..d09d3bdcafd 100644
--- a/docs/build/workflows.md
+++ b/docs/build/workflows.md
@@ -100,20 +100,20 @@ You can run a workflow manually in three ways:
 
 This is the default behavior and the input dataclip for your run will be `{}`.
 
-<img src="/img/empty.png" width="400" />
+<img src="/img/empty.webp" width="400" />
 
 #### With a custom input
 
 You can type, copy/paste, or import (browse your file system or drag & drop) any
 file with valid JSON.
 
-<img src="/img/custom.png" width="400" />
+<img src="/img/custom.webp" width="400" />
 
 #### With an existing input
 
 You can pick from a list of previous inputs that were used to run this step.
 
-<img src="/img/existing.png" width="400" />
+<img src="/img/existing.webp" width="400" />
 
 ## Limit Concurrency
 
diff --git a/docs/design/design-workflow.md b/docs/design/design-workflow.md
index 8d59bdd916e..39cbf415bdb 100644
--- a/docs/design/design-workflow.md
+++ b/docs/design/design-workflow.md
@@ -54,4 +54,4 @@ See the below example BPMN diagram for the user story:
 > contacts in my SMS campaign configured on RapidPro to send them automated
 > alerts and program updates.
 
-<img src="/img/sample-bpmn.png" url />
+<img src="/img/sample-bpmn.webp" url />
diff --git a/docs/design/overview.md b/docs/design/overview.md
index 64f0c978c3e..51e216f2ff3 100644
--- a/docs/design/overview.md
+++ b/docs/design/overview.md
@@ -9,7 +9,7 @@ This docs page is under construction. Check back later for the complete docs, or
 :::
 
 # Getting started with workflow automation design for OpenFn projects
-Overview of design process and key outputs/artefacts...
+Overview of design process and key outputs/artifacts...
 
 **Integration design begins with the functional or business requirements (not
 the technical bits).** Therefore, you do not need to be an IT consultant or
@@ -116,7 +116,7 @@ See the below example BPMN diagram for the user story:
 > contacts in my SMS campaign configured on RapidPro to send them automated
 > alerts and program updates.
 
-<img src="/img/sample-bpmn.png" url />
+<img src="/img/sample-bpmn.webp" url />
 
 ## 3. Map data elements to be exchanged
 
@@ -150,13 +150,13 @@ This template includes:
 
 1. Details on the source metadata such as field API name, data type, sample data
    values and comments:
-   ![image](https://user-images.githubusercontent.com/80456839/130796010-fe900c03-1bff-40c0-9263-c29e22d9191f.webp)
+   ![image](https://user-images.githubusercontent.com/80456839/130796010-fe900c03-1bff-40c0-9263-c29e22d9191f.png)
 2. Similar details on the destination metadata:
-   ![image](https://user-images.githubusercontent.com/80456839/130796087-67b0359d-207a-4169-aa88-6609572b2561.webp)
+   ![image](https://user-images.githubusercontent.com/80456839/130796087-67b0359d-207a-4169-aa88-6609572b2561.png)
 3. Notes on data transformations & cleaning required and comments for tracking
    changes & questions for technical input:
 
-   ![image](https://user-images.githubusercontent.com/80456839/130796170-2e29a997-9b41-44f7-ac60-79375d096cc9.webp)
+   ![image](https://user-images.githubusercontent.com/80456839/130796170-2e29a997-9b41-44f7-ac60-79375d096cc9.png)
 
 ### To build a complete mapping specification, you’ll need to...
 
diff --git a/versioned_docs/version-legacy/design/design-quickstart.md b/versioned_docs/version-legacy/design/design-quickstart.md
index d43c0543879..43eb824000c 100644
--- a/versioned_docs/version-legacy/design/design-quickstart.md
+++ b/versioned_docs/version-legacy/design/design-quickstart.md
@@ -109,7 +109,7 @@ See the below example BPMN diagram for the user story:
 > contacts in my SMS campaign configured on RapidPro to send them automated
 > alerts and program updates.
 
-<img src="/img/sample-bpmn.png" url />
+<img src="/img/sample-bpmn.webp" url />
 
 ## 3. Map data elements to be exchanged
 
@@ -143,13 +143,13 @@ This template includes:
 
 1. Details on the source metadata such as field API name, data type, sample data
    values and comments:
-   ![image](https://user-images.githubusercontent.com/80456839/130796010-fe900c03-1bff-40c0-9263-c29e22d9191f.webp)
+   ![image](https://user-images.githubusercontent.com/80456839/130796010-fe900c03-1bff-40c0-9263-c29e22d9191f.png)
 2. Similar details on the destination metadata:
-   ![image](https://user-images.githubusercontent.com/80456839/130796087-67b0359d-207a-4169-aa88-6609572b2561.webp)
+   ![image](https://user-images.githubusercontent.com/80456839/130796087-67b0359d-207a-4169-aa88-6609572b2561.png)
 3. Notes on data transformations & cleaning required and comments for tracking
    changes & questions for technical input:
 
-   ![image](https://user-images.githubusercontent.com/80456839/130796170-2e29a997-9b41-44f7-ac60-79375d096cc9.webp)
+   ![image](https://user-images.githubusercontent.com/80456839/130796170-2e29a997-9b41-44f7-ac60-79375d096cc9.png)
 
 ### To build a complete mapping specification, you’ll need to...