diff --git a/docs/components/button.md b/docs/components/button.md
index 6fd6bbedb..9028282fc 100644
--- a/docs/components/button.md
+++ b/docs/components/button.md
@@ -41,7 +41,7 @@ outlined, and text.
alt="A phone showing a payment screen with a green filled button that says 'Make
payment'"
title="There are 5 types of common buttons"
- src="images/button/hero.png">
+ src="images/button/hero.webp">
@@ -66,7 +66,7 @@ payment'"
-![The 5 types of common buttons](images/button/types.png "Elevated, filled, filled tonal, outlined, and text buttons")
+![The 5 types of common buttons](images/button/types.webp "Elevated, filled, filled tonal, outlined, and text buttons")
@@ -151,7 +151,7 @@ a button.
![An outlined button with the text "Back" next to a filled button with the text
-"Complete"](images/button/usage.png "Outlined and filled buttons.")
+"Complete"](images/button/usage.webp "Outlined and filled buttons.")
@@ -186,7 +186,7 @@ action and help draw attention.
![A tonal button with a right arrow send icon with text 'send' and a text button
with the text 'open' with a trailing icon arrow
-box](images/button/usage-icon.png "Slot in icons to the appropriate slots")
+box](images/button/usage-icon.webp "Slot in icons to the appropriate slots")
@@ -247,7 +247,7 @@ separation from a patterned background.
-![An elevated button](images/button/usage-elevated-button.png)
+![An elevated button](images/button/usage-elevated-button.webp)
@@ -311,7 +311,7 @@ than an outline would give, such as "Next" in an onboarding flow.
-![A filled tonal button](images/button/usage-filled-tonal-button.png)
+![A filled tonal button](images/button/usage-filled-tonal-button.webp)
@@ -344,7 +344,7 @@ the primary action in an app.
-![An outlined button](images/button/usage-outlined-button.png)
+![An outlined button](images/button/usage-outlined-button.webp)
@@ -377,7 +377,7 @@ options.
-![A text button](images/button/usage-text-button.png)
+![A text button](images/button/usage-text-button.webp)
@@ -421,7 +421,7 @@ Token | Default value
-![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.png "Elevated button theming example.")
+![Image of an elevated button with a different theme applied](images/button/theming-elevated-button.webp "Elevated button theming example.")
@@ -481,7 +481,7 @@ Token | Default value
-![Image of a filled button with a different theme applied](images/button/theming-filled-button.png "Filled button theming example.")
+![Image of a filled button with a different theme applied](images/button/theming-filled-button.webp "Filled button theming example.")
@@ -541,7 +541,7 @@ Token | Default value
-![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.png "Filled tonal button theming example.")
+![Image of a filled tonal button with a different theme applied](images/button/theming-filled-tonal-button.webp "Filled tonal button theming example.")
@@ -601,7 +601,7 @@ Token | Default value
-![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.png "Outlined button theming example.")
+![Image of an outlined button with a different theme applied](images/button/theming-outlined-button.webp "Outlined button theming example.")
@@ -659,7 +659,7 @@ Token | Default value
-![Image of a text button with a different theme applied](images/button/theming-text-button.png "Text button theming example.")
+![Image of a text button with a different theme applied](images/button/theming-text-button.webp "Text button theming example.")
diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 669358401..67408ceb5 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -41,7 +41,7 @@ user needs to select one or more options from a list.
@@ -70,7 +70,7 @@ Checkboxes may be standalone, pre-checked, or indeterminate.
-![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.png "Unselected, selected, and indeterminate checkboxes.")
+![Three checkboxes in a row that are unselected, selected, and indeterminate](images/checkbox/usage.webp "Unselected, selected, and indeterminate checkboxes.")
@@ -87,7 +87,7 @@ Associate a label with a checkbox using the `