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">
 
 </catalog-component-header>
 
@@ -66,7 +66,7 @@ payment'"
 
 <!-- no-catalog-start -->
 
-![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")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -151,7 +151,7 @@ a button.
 <!-- no-catalog-start -->
 
 ![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -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")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -247,7 +247,7 @@ separation from a patterned background.
 
 <!-- no-catalog-start -->
 
-![An elevated button](images/button/usage-elevated-button.png)
+![An elevated button](images/button/usage-elevated-button.webp)
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -311,7 +311,7 @@ than an outline would give, such as "Next" in an onboarding flow.
 
 <!-- no-catalog-start -->
 
-![A filled tonal button](images/button/usage-filled-tonal-button.png)
+![A filled tonal button](images/button/usage-filled-tonal-button.webp)
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -344,7 +344,7 @@ the primary action in an app.
 
 <!-- no-catalog-start -->
 
-![An outlined button](images/button/usage-outlined-button.png)
+![An outlined button](images/button/usage-outlined-button.webp)
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -377,7 +377,7 @@ options.
 
 <!-- no-catalog-start -->
 
-![A text button](images/button/usage-text-button.png)
+![A text button](images/button/usage-text-button.webp)
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -421,7 +421,7 @@ Token                                   | Default value
 
 <!-- no-catalog-start -->
 
-![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -481,7 +481,7 @@ Token                                 | Default value
 
 <!-- no-catalog-start -->
 
-![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -541,7 +541,7 @@ Token                                       | Default value
 
 <!-- no-catalog-start -->
 
-![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -601,7 +601,7 @@ Token                                   | Default value
 
 <!-- no-catalog-start -->
 
-![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -659,7 +659,7 @@ Token                               | Default value
 
 <!-- no-catalog-start -->
 
-![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
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.
 
 <img
     class="hero"
-    src="images/checkbox/hero.png"
+    src="images/checkbox/hero.webp"
     alt="A list of burger additions represented with checkboxes"
     title="Checkboxes in a list of items.">
 
@@ -70,7 +70,7 @@ Checkboxes may be standalone, pre-checked, or indeterminate.
 
 <!-- no-catalog-start -->
 
-![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.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/checkbox/usage.html" -->
@@ -87,7 +87,7 @@ Associate a label with a checkbox using the `<label>` element.
 
 <!-- no-catalog-start -->
 
-![Two checkboxes with labels](images/checkbox/usage-label.png "Labeled checkboxes.")
+![Two checkboxes with labels](images/checkbox/usage-label.webp "Labeled checkboxes.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/checkbox/usage-label.html" -->
@@ -142,7 +142,7 @@ Token                                    | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a checkbox with a different theme applied](images/checkbox/theming.png "Checkbox theming example.")
+![Image of a checkbox with a different theme applied](images/checkbox/theming.webp "Checkbox theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/checkbox/theming.html" -->
diff --git a/docs/components/chip.md b/docs/components/chip.md
index c5766fb4a..6b83a6d93 100644
--- a/docs/components/chip.md
+++ b/docs/components/chip.md
@@ -36,7 +36,7 @@ elements.
 
 </catalog-component-header-title>
 
-<img class="hero" src="images/chips/hero.png" alt="Two collections of filter chips, with some options selected and some unselected."
+<img class="hero" src="images/chips/hero.webp" alt="Two collections of filter chips, with some options selected and some unselected."
 title="Filter chips">
 
 </catalog-component-header>
diff --git a/docs/components/dialog.md b/docs/components/dialog.md
index 87017bc39..f81b40aa5 100644
--- a/docs/components/dialog.md
+++ b/docs/components/dialog.md
@@ -32,7 +32,7 @@ important prompts in a user flow.
 
 </catalog-component-header-title>
 
-<img class="hero" src="images/dialog/hero.png" alt="A dialog displaying phone ringtone options."
+<img class="hero" src="images/dialog/hero.webp" alt="A dialog displaying phone ringtone options."
 title="A dialog">
 
 </catalog-component-header>
diff --git a/docs/components/divider.md b/docs/components/divider.md
index 3a50498a5..0185c0235 100644
--- a/docs/components/divider.md
+++ b/docs/components/divider.md
@@ -16,7 +16,7 @@ that groups content in lists and containers.
 Dividers can reinforce tapability, such as when used to separate list items or
 define tappable regions in an accordion.
 
-![Screenshot of five stacked dividers](images/divider/hero.png "Dividers separating items in a list.")
+![Screenshot of five stacked dividers](images/divider/hero.webp "Dividers separating items in a list.")
 
 *   [Design article](https://m3.material.io/components/divider) <!-- {.external} -->
 *   [API Documentation](#api)
@@ -27,7 +27,7 @@ define tappable regions in an accordion.
 
 Use full width dividers to separate larger sections of unrelated content.
 
-![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.png "Full width divider example")
+![A full width divider separating two paragraphs of "Lorem ipsum"](images/divider/usage.webp "Full width divider example")
 
 ```html
 <section>
@@ -41,7 +41,7 @@ Use full width dividers to separate larger sections of unrelated content.
 
 Use inset dividers to separate related content within a section.
 
-![A list of design system names separated by an inset divider](images/divider/usage-inset.png "Inset divider example")
+![A list of design system names separated by an inset divider](images/divider/usage-inset.webp "Inset divider example")
 
 ```html
 <section>
@@ -54,7 +54,7 @@ Use inset dividers to separate related content within a section.
 Inset dividers are equally indented from both sides of the screen by default.
 Use `inset-start` or `inset-end` to change this.
 
-![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.png "Leading inset divider example")
+![A list of design system names separated by a leading inset divider](images/divider/usage-inset-start.webp "Leading inset divider example")
 
 ```html
 <section>
@@ -101,7 +101,7 @@ Token                    | Default value
 
 ### Example
 
-![A customized divider with a different color and thickness](images/divider/theming.png "Divider theming example.")
+![A customized divider with a different color and thickness](images/divider/theming.webp "Divider theming example.")
 
 ```html
 <style>
diff --git a/docs/components/elevation.md b/docs/components/elevation.md
index 82d658876..8f2eb90c7 100644
--- a/docs/components/elevation.md
+++ b/docs/components/elevation.md
@@ -17,7 +17,7 @@ Material's elevation system is deliberately limited to just a handful of levels.
 This creative constraint means you need to make thoughtful decisions about your
 UI’s elevation story.
 
-![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.png "Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.")
+![Diagram showing the five elevation levels and their respective dp values](images/elevation/hero.webp "Material uses six levels of elevation, each with a corresponding dp value. These values are named for their relative distance above the UI’s surface: 0, +1, +2, +3, +4, and +5. An element’s resting state can be on levels 0 to +3, while levels +4 and +5 are reserved for user-interacted states such as hover and dragged.")
 
 *   [Design article](https://m3.material.io/styles/elevation) <!-- {.external} -->
 *   [API Documentation](#api)
@@ -30,7 +30,7 @@ Elevation can be set from 0 to 5 using the `--md-elevation-level` CSS custom
 property. The elevation will automatically fill the nearest `position: relative`
 element's size and shape.
 
-![A rounded square with a drop shadow beneath it.](images/elevation/usage.png "A surface with an elevation shadow.")
+![A rounded square with a drop shadow beneath it.](images/elevation/usage.webp "A surface with an elevation shadow.")
 
 ```html
 <style>
@@ -99,7 +99,7 @@ Token                         | Default value
 
 ### Example
 
-![Image of an elevation surface with a different theme applied](images/elevation/theming.png "Elevation theming example.")
+![Image of an elevation surface with a different theme applied](images/elevation/theming.webp "Elevation theming example.")
 
 ```html
 <style>
diff --git a/docs/components/icon-button.md b/docs/components/icon-button.md
index 66c696267..7c2f581b3 100644
--- a/docs/components/icon-button.md
+++ b/docs/components/icon-button.md
@@ -30,7 +30,7 @@ people take supplementary actions with a single tap.
 <img
     class="hero"
     alt="The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot."
-    src="images/iconbutton/hero.png">
+    src="images/iconbutton/hero.webp">
 
 </catalog-component-header>
 
@@ -55,7 +55,7 @@ people take supplementary actions with a single tap.
 
 <!-- no-catalog-start -->
 
-![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.png "1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)")
+![Side by side view of standard and contained icon buttons](images/iconbutton/buttons.webp "1 - Standard Icon Button. 2 - Contained Icon Button (including filled, filled tonal, and outlined styles)")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/buttons.html" -->
@@ -79,7 +79,7 @@ the icon font.
 
 <!-- no-catalog-start -->
 
-![A row of icon buttons](images/iconbutton/usage.png "Icon buttons can be used within other components, such as a bottom app bar")
+![A row of icon buttons](images/iconbutton/usage.webp "Icon buttons can be used within other components, such as a bottom app bar")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/usage.html" -->
@@ -119,7 +119,7 @@ attribute to turn the icon button into a link.
 
 ![Two rows of toggling icon buttons, the top row is unselected and the bottom
 row is
-selected](images/iconbutton/usage-toggle.png "Unselected and Selected Icon Button")
+selected](images/iconbutton/usage-toggle.webp "Unselected and Selected Icon Button")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/usage-toggle.html" -->
@@ -203,7 +203,7 @@ emphasis of the icon buttons.
 
 <!-- no-catalog-start -->
 
-![A check icon](images/iconbutton/usage-standard.png "Standard Icon Button with Check icon")
+![A check icon](images/iconbutton/usage-standard.webp "Standard Icon Button with Check icon")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/usage-standard.html" -->
@@ -220,7 +220,7 @@ emphasis of the icon buttons.
 
 <!-- no-catalog-start -->
 
-![A circular button with a check icon](images/iconbutton/usage-filled.png "Filled Icon Button")
+![A circular button with a check icon](images/iconbutton/usage-filled.webp "Filled Icon Button")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/usage-filled.html" -->
@@ -240,7 +240,7 @@ actions.
 
 <!-- no-catalog-start -->
 
-![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.png "Filled Tonal Icon Button")
+![A filled tonal icon button with a check icon](images/iconbutton/usage-filled-tonal.webp "Filled Tonal Icon Button")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/usage-filled-tonal.html" -->
@@ -262,7 +262,7 @@ high emphasis action.
 
 <!-- no-catalog-start -->
 
-![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.png "Outlined Icon button")
+![An outlined circular icon button with a check icon](images/iconbutton/usage-outlined.webp "Outlined Icon button")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/usage-outlined.html" -->
@@ -297,7 +297,7 @@ Token                                | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.png "Standard icon button theming example.")
+![Image of a standard icon button with a different theme applied](images/iconbutton/theming-standard.webp "Standard icon button theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/theming-standard.html" -->
@@ -333,7 +333,7 @@ Token                                              | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a filled icon button with a different theme applied](images/iconbutton/theming-filled.png "Filled icon button theming example.")
+![Image of a filled icon button with a different theme applied](images/iconbutton/theming-filled.webp "Filled icon button theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/theming-filled.html" -->
@@ -368,7 +368,7 @@ Token                                                    | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a filled tonal icon button with a different theme applied](images/iconbutton/theming-filled-tonal.png "Filled tonal icon button theming example.")
+![Image of a filled tonal icon button with a different theme applied](images/iconbutton/theming-filled-tonal.webp "Filled tonal icon button theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/theming-filled-tonal.html" -->
@@ -403,7 +403,7 @@ Token                                        | Default value
 
 <!-- no-catalog-start -->
 
-![Image of an outlined icon button with a different theme applied](images/iconbutton/theming-outlined.png "Outlined icon button theming example.")
+![Image of an outlined icon button with a different theme applied](images/iconbutton/theming-outlined.webp "Outlined icon button theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/iconbutton/theming-outlined.html" -->
diff --git a/docs/components/icon.md b/docs/components/icon.md
index d114a25f7..12a3eabdd 100644
--- a/docs/components/icon.md
+++ b/docs/components/icon.md
@@ -26,7 +26,7 @@ created at seven weights across three different styles.
 Icons can be specified by name, unicode code point, or have an `<svg>` child
 element.
 
-![Settings icon as ligature, check box icon as codepoint, and house icon as SVG](images/icon/usage.png "Example icons")
+![Settings icon as ligature, check box icon as codepoint, and house icon as SVG](images/icon/usage.webp "Example icons")
 
 ```html
 <md-icon>settings</md-icon>
@@ -67,7 +67,7 @@ Load the font with
 
 ### Rounded
 
-![Settings, checkbox, and house icons in Rounded style](images/icon/usage_rounded.png "Rounded Icons")
+![Settings, checkbox, and house icons in Rounded style](images/icon/usage_rounded.webp "Rounded Icons")
 
 Rounded symbols use a corner radius that pairs well with brands that use heavier
 typography, curved logos, or circular elements to express their style.
@@ -82,7 +82,7 @@ To use Rounded icons, set `--md-icon-font` to `'Material Symbols Rounded'`.
 
 ### Sharp
 
-![Settings, checkbox, and house icons in Sharp style](images/icon/usage_sharp.png "Sharp Icons")
+![Settings, checkbox, and house icons in Sharp style](images/icon/usage_sharp.webp "Sharp Icons")
 
 Sharp symbols display corners with straight edges, for a crisp style that
 remains legible even at smaller scales. These rectangular shapes can support
@@ -98,7 +98,7 @@ To use Sharp icons, set `font-family` to `'Material Symbols Sharp'`.
 
 ### Fill
 
-![Filed settings, checkbox, and house icons](images/icon/usage_filled.png "Filled Icons")
+![Filed settings, checkbox, and house icons](images/icon/usage_filled.webp "Filled Icons")
 
 Filled Icons gives you the ability to transition from a more outlined style to a
 reversed or more filled style.
@@ -148,7 +148,7 @@ Token            | Default value
 
 ### Example
 
-![Image of icons with a different theme applied](images/icon/theming.png "Icon theming example.")
+![Image of icons with a different theme applied](images/icon/theming.webp "Icon theming example.")
 
 ```html
 <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1" rel="stylesheet">
diff --git a/docs/components/images/button/hero.png b/docs/components/images/button/hero.png
deleted file mode 100644
index 356cdc072..000000000
Binary files a/docs/components/images/button/hero.png and /dev/null differ
diff --git a/docs/components/images/button/hero.webp b/docs/components/images/button/hero.webp
new file mode 100644
index 000000000..d0103c985
Binary files /dev/null and b/docs/components/images/button/hero.webp differ
diff --git a/docs/components/images/button/theming-elevated-button.png b/docs/components/images/button/theming-elevated-button.png
deleted file mode 100644
index 6256bc637..000000000
Binary files a/docs/components/images/button/theming-elevated-button.png and /dev/null differ
diff --git a/docs/components/images/button/theming-elevated-button.webp b/docs/components/images/button/theming-elevated-button.webp
new file mode 100644
index 000000000..7dbb5a164
Binary files /dev/null and b/docs/components/images/button/theming-elevated-button.webp differ
diff --git a/docs/components/images/button/theming-filled-button.png b/docs/components/images/button/theming-filled-button.png
deleted file mode 100644
index 9c03781a7..000000000
Binary files a/docs/components/images/button/theming-filled-button.png and /dev/null differ
diff --git a/docs/components/images/button/theming-filled-button.webp b/docs/components/images/button/theming-filled-button.webp
new file mode 100644
index 000000000..6c87508b7
Binary files /dev/null and b/docs/components/images/button/theming-filled-button.webp differ
diff --git a/docs/components/images/button/theming-filled-tonal-button.png b/docs/components/images/button/theming-filled-tonal-button.png
deleted file mode 100644
index 53df70c69..000000000
Binary files a/docs/components/images/button/theming-filled-tonal-button.png and /dev/null differ
diff --git a/docs/components/images/button/theming-filled-tonal-button.webp b/docs/components/images/button/theming-filled-tonal-button.webp
new file mode 100644
index 000000000..4133983b2
Binary files /dev/null and b/docs/components/images/button/theming-filled-tonal-button.webp differ
diff --git a/docs/components/images/button/theming-outlined-button.png b/docs/components/images/button/theming-outlined-button.png
deleted file mode 100644
index bab3431fb..000000000
Binary files a/docs/components/images/button/theming-outlined-button.png and /dev/null differ
diff --git a/docs/components/images/button/theming-outlined-button.webp b/docs/components/images/button/theming-outlined-button.webp
new file mode 100644
index 000000000..4d9ec26be
Binary files /dev/null and b/docs/components/images/button/theming-outlined-button.webp differ
diff --git a/docs/components/images/button/theming-text-button.png b/docs/components/images/button/theming-text-button.png
deleted file mode 100644
index 73fdd8295..000000000
Binary files a/docs/components/images/button/theming-text-button.png and /dev/null differ
diff --git a/docs/components/images/button/theming-text-button.webp b/docs/components/images/button/theming-text-button.webp
new file mode 100644
index 000000000..25558ed92
Binary files /dev/null and b/docs/components/images/button/theming-text-button.webp differ
diff --git a/docs/components/images/button/types.png b/docs/components/images/button/types.png
deleted file mode 100644
index df72f9ec9..000000000
Binary files a/docs/components/images/button/types.png and /dev/null differ
diff --git a/docs/components/images/button/types.webp b/docs/components/images/button/types.webp
new file mode 100644
index 000000000..86df09c00
Binary files /dev/null and b/docs/components/images/button/types.webp differ
diff --git a/docs/components/images/button/usage-elevated-button.png b/docs/components/images/button/usage-elevated-button.png
deleted file mode 100644
index 21d7fcec9..000000000
Binary files a/docs/components/images/button/usage-elevated-button.png and /dev/null differ
diff --git a/docs/components/images/button/usage-elevated-button.webp b/docs/components/images/button/usage-elevated-button.webp
new file mode 100644
index 000000000..45c80a4b3
Binary files /dev/null and b/docs/components/images/button/usage-elevated-button.webp differ
diff --git a/docs/components/images/button/usage-filled-button.png b/docs/components/images/button/usage-filled-button.png
deleted file mode 100644
index c68b325c7..000000000
Binary files a/docs/components/images/button/usage-filled-button.png and /dev/null differ
diff --git a/docs/components/images/button/usage-filled-button.webp b/docs/components/images/button/usage-filled-button.webp
new file mode 100644
index 000000000..410977fe1
Binary files /dev/null and b/docs/components/images/button/usage-filled-button.webp differ
diff --git a/docs/components/images/button/usage-filled-tonal-button.png b/docs/components/images/button/usage-filled-tonal-button.png
deleted file mode 100644
index c032ff635..000000000
Binary files a/docs/components/images/button/usage-filled-tonal-button.png and /dev/null differ
diff --git a/docs/components/images/button/usage-filled-tonal-button.webp b/docs/components/images/button/usage-filled-tonal-button.webp
new file mode 100644
index 000000000..89559b651
Binary files /dev/null and b/docs/components/images/button/usage-filled-tonal-button.webp differ
diff --git a/docs/components/images/button/usage-icon.png b/docs/components/images/button/usage-icon.png
deleted file mode 100644
index 809a6c493..000000000
Binary files a/docs/components/images/button/usage-icon.png and /dev/null differ
diff --git a/docs/components/images/button/usage-icon.webp b/docs/components/images/button/usage-icon.webp
new file mode 100644
index 000000000..4d49560b7
Binary files /dev/null and b/docs/components/images/button/usage-icon.webp differ
diff --git a/docs/components/images/button/usage-outlined-button.png b/docs/components/images/button/usage-outlined-button.png
deleted file mode 100644
index 466c4a045..000000000
Binary files a/docs/components/images/button/usage-outlined-button.png and /dev/null differ
diff --git a/docs/components/images/button/usage-outlined-button.webp b/docs/components/images/button/usage-outlined-button.webp
new file mode 100644
index 000000000..5affb327b
Binary files /dev/null and b/docs/components/images/button/usage-outlined-button.webp differ
diff --git a/docs/components/images/button/usage-text-button.png b/docs/components/images/button/usage-text-button.png
deleted file mode 100644
index 4ee58fb44..000000000
Binary files a/docs/components/images/button/usage-text-button.png and /dev/null differ
diff --git a/docs/components/images/button/usage-text-button.webp b/docs/components/images/button/usage-text-button.webp
new file mode 100644
index 000000000..250332cdf
Binary files /dev/null and b/docs/components/images/button/usage-text-button.webp differ
diff --git a/docs/components/images/button/usage.png b/docs/components/images/button/usage.png
deleted file mode 100644
index a3060072f..000000000
Binary files a/docs/components/images/button/usage.png and /dev/null differ
diff --git a/docs/components/images/button/usage.webp b/docs/components/images/button/usage.webp
new file mode 100644
index 000000000..12a189d57
Binary files /dev/null and b/docs/components/images/button/usage.webp differ
diff --git a/docs/components/images/checkbox/hero.png b/docs/components/images/checkbox/hero.png
deleted file mode 100644
index be9c41c75..000000000
Binary files a/docs/components/images/checkbox/hero.png and /dev/null differ
diff --git a/docs/components/images/checkbox/hero.webp b/docs/components/images/checkbox/hero.webp
new file mode 100644
index 000000000..7b3ecd14a
Binary files /dev/null and b/docs/components/images/checkbox/hero.webp differ
diff --git a/docs/components/images/checkbox/theming.png b/docs/components/images/checkbox/theming.png
deleted file mode 100644
index c368309a9..000000000
Binary files a/docs/components/images/checkbox/theming.png and /dev/null differ
diff --git a/docs/components/images/checkbox/theming.webp b/docs/components/images/checkbox/theming.webp
new file mode 100644
index 000000000..4d871210d
Binary files /dev/null and b/docs/components/images/checkbox/theming.webp differ
diff --git a/docs/components/images/checkbox/usage-label.png b/docs/components/images/checkbox/usage-label.png
deleted file mode 100644
index f960d55e4..000000000
Binary files a/docs/components/images/checkbox/usage-label.png and /dev/null differ
diff --git a/docs/components/images/checkbox/usage-label.webp b/docs/components/images/checkbox/usage-label.webp
new file mode 100644
index 000000000..683b52931
Binary files /dev/null and b/docs/components/images/checkbox/usage-label.webp differ
diff --git a/docs/components/images/checkbox/usage.png b/docs/components/images/checkbox/usage.png
deleted file mode 100644
index 52bb1b067..000000000
Binary files a/docs/components/images/checkbox/usage.png and /dev/null differ
diff --git a/docs/components/images/checkbox/usage.webp b/docs/components/images/checkbox/usage.webp
new file mode 100644
index 000000000..49b6a924b
Binary files /dev/null and b/docs/components/images/checkbox/usage.webp differ
diff --git a/docs/components/images/chips/hero.png b/docs/components/images/chips/hero.png
deleted file mode 100644
index d743dcc97..000000000
Binary files a/docs/components/images/chips/hero.png and /dev/null differ
diff --git a/docs/components/images/chips/hero.webp b/docs/components/images/chips/hero.webp
new file mode 100644
index 000000000..36b213b36
Binary files /dev/null and b/docs/components/images/chips/hero.webp differ
diff --git a/docs/components/images/dialog/hero.png b/docs/components/images/dialog/hero.png
deleted file mode 100644
index 04aa15073..000000000
Binary files a/docs/components/images/dialog/hero.png and /dev/null differ
diff --git a/docs/components/images/dialog/hero.webp b/docs/components/images/dialog/hero.webp
new file mode 100644
index 000000000..f11d4b0c1
Binary files /dev/null and b/docs/components/images/dialog/hero.webp differ
diff --git a/docs/components/images/divider/hero.png b/docs/components/images/divider/hero.png
deleted file mode 100644
index 5b698fdad..000000000
Binary files a/docs/components/images/divider/hero.png and /dev/null differ
diff --git a/docs/components/images/divider/hero.webp b/docs/components/images/divider/hero.webp
new file mode 100644
index 000000000..1363d0413
Binary files /dev/null and b/docs/components/images/divider/hero.webp differ
diff --git a/docs/components/images/divider/theming.png b/docs/components/images/divider/theming.png
deleted file mode 100644
index 98b8302a9..000000000
Binary files a/docs/components/images/divider/theming.png and /dev/null differ
diff --git a/docs/components/images/divider/theming.webp b/docs/components/images/divider/theming.webp
new file mode 100644
index 000000000..bddb1b893
Binary files /dev/null and b/docs/components/images/divider/theming.webp differ
diff --git a/docs/components/images/divider/usage-inset-start.png b/docs/components/images/divider/usage-inset-start.png
deleted file mode 100644
index 99139e59d..000000000
Binary files a/docs/components/images/divider/usage-inset-start.png and /dev/null differ
diff --git a/docs/components/images/divider/usage-inset-start.webp b/docs/components/images/divider/usage-inset-start.webp
new file mode 100644
index 000000000..5793500e9
Binary files /dev/null and b/docs/components/images/divider/usage-inset-start.webp differ
diff --git a/docs/components/images/divider/usage-inset.png b/docs/components/images/divider/usage-inset.png
deleted file mode 100644
index ec07bed0c..000000000
Binary files a/docs/components/images/divider/usage-inset.png and /dev/null differ
diff --git a/docs/components/images/divider/usage-inset.webp b/docs/components/images/divider/usage-inset.webp
new file mode 100644
index 000000000..82c164238
Binary files /dev/null and b/docs/components/images/divider/usage-inset.webp differ
diff --git a/docs/components/images/divider/usage.png b/docs/components/images/divider/usage.png
deleted file mode 100644
index ec195d686..000000000
Binary files a/docs/components/images/divider/usage.png and /dev/null differ
diff --git a/docs/components/images/divider/usage.webp b/docs/components/images/divider/usage.webp
new file mode 100644
index 000000000..54ea584fe
Binary files /dev/null and b/docs/components/images/divider/usage.webp differ
diff --git a/docs/components/images/elevation/hero.png b/docs/components/images/elevation/hero.png
deleted file mode 100644
index 5a324da5d..000000000
Binary files a/docs/components/images/elevation/hero.png and /dev/null differ
diff --git a/docs/components/images/elevation/hero.webp b/docs/components/images/elevation/hero.webp
new file mode 100644
index 000000000..c5f3787df
Binary files /dev/null and b/docs/components/images/elevation/hero.webp differ
diff --git a/docs/components/images/elevation/theming.png b/docs/components/images/elevation/theming.png
deleted file mode 100644
index c6b813423..000000000
Binary files a/docs/components/images/elevation/theming.png and /dev/null differ
diff --git a/docs/components/images/elevation/theming.webp b/docs/components/images/elevation/theming.webp
new file mode 100644
index 000000000..e4478085a
Binary files /dev/null and b/docs/components/images/elevation/theming.webp differ
diff --git a/docs/components/images/elevation/usage.png b/docs/components/images/elevation/usage.png
deleted file mode 100644
index 67a11cd6c..000000000
Binary files a/docs/components/images/elevation/usage.png and /dev/null differ
diff --git a/docs/components/images/elevation/usage.webp b/docs/components/images/elevation/usage.webp
new file mode 100644
index 000000000..1cfe3c5f8
Binary files /dev/null and b/docs/components/images/elevation/usage.webp differ
diff --git a/docs/components/images/icon/hero.gif b/docs/components/images/icon/hero.gif
index cdca63bba..f2a6b76b4 100644
Binary files a/docs/components/images/icon/hero.gif and b/docs/components/images/icon/hero.gif differ
diff --git a/docs/components/images/icon/theming.png b/docs/components/images/icon/theming.png
deleted file mode 100644
index da784b127..000000000
Binary files a/docs/components/images/icon/theming.png and /dev/null differ
diff --git a/docs/components/images/icon/theming.webp b/docs/components/images/icon/theming.webp
new file mode 100644
index 000000000..a1b8f7be2
Binary files /dev/null and b/docs/components/images/icon/theming.webp differ
diff --git a/docs/components/images/icon/usage.png b/docs/components/images/icon/usage.png
deleted file mode 100644
index 544f5a243..000000000
Binary files a/docs/components/images/icon/usage.png and /dev/null differ
diff --git a/docs/components/images/icon/usage.webp b/docs/components/images/icon/usage.webp
new file mode 100644
index 000000000..f04014f39
Binary files /dev/null and b/docs/components/images/icon/usage.webp differ
diff --git a/docs/components/images/icon/usage_filled.png b/docs/components/images/icon/usage_filled.png
deleted file mode 100644
index 309466b7c..000000000
Binary files a/docs/components/images/icon/usage_filled.png and /dev/null differ
diff --git a/docs/components/images/icon/usage_filled.webp b/docs/components/images/icon/usage_filled.webp
new file mode 100644
index 000000000..c198b6f70
Binary files /dev/null and b/docs/components/images/icon/usage_filled.webp differ
diff --git a/docs/components/images/icon/usage_rounded.png b/docs/components/images/icon/usage_rounded.png
deleted file mode 100644
index 2bcf914a0..000000000
Binary files a/docs/components/images/icon/usage_rounded.png and /dev/null differ
diff --git a/docs/components/images/icon/usage_rounded.webp b/docs/components/images/icon/usage_rounded.webp
new file mode 100644
index 000000000..89101ee60
Binary files /dev/null and b/docs/components/images/icon/usage_rounded.webp differ
diff --git a/docs/components/images/icon/usage_sharp.png b/docs/components/images/icon/usage_sharp.png
deleted file mode 100644
index 531dbbbe7..000000000
Binary files a/docs/components/images/icon/usage_sharp.png and /dev/null differ
diff --git a/docs/components/images/icon/usage_sharp.webp b/docs/components/images/icon/usage_sharp.webp
new file mode 100644
index 000000000..60924dead
Binary files /dev/null and b/docs/components/images/icon/usage_sharp.webp differ
diff --git a/docs/components/images/iconbutton/buttons.png b/docs/components/images/iconbutton/buttons.png
deleted file mode 100644
index 1058b266b..000000000
Binary files a/docs/components/images/iconbutton/buttons.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/buttons.webp b/docs/components/images/iconbutton/buttons.webp
new file mode 100644
index 000000000..e0b79ef1c
Binary files /dev/null and b/docs/components/images/iconbutton/buttons.webp differ
diff --git a/docs/components/images/iconbutton/hero.png b/docs/components/images/iconbutton/hero.png
deleted file mode 100644
index 0d74879c9..000000000
Binary files a/docs/components/images/iconbutton/hero.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/hero.webp b/docs/components/images/iconbutton/hero.webp
new file mode 100644
index 000000000..25912cbd7
Binary files /dev/null and b/docs/components/images/iconbutton/hero.webp differ
diff --git a/docs/components/images/iconbutton/theming-filled-tonal.png b/docs/components/images/iconbutton/theming-filled-tonal.png
deleted file mode 100644
index 9d0299da5..000000000
Binary files a/docs/components/images/iconbutton/theming-filled-tonal.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/theming-filled-tonal.webp b/docs/components/images/iconbutton/theming-filled-tonal.webp
new file mode 100644
index 000000000..0c6760d74
Binary files /dev/null and b/docs/components/images/iconbutton/theming-filled-tonal.webp differ
diff --git a/docs/components/images/iconbutton/theming-filled.png b/docs/components/images/iconbutton/theming-filled.png
deleted file mode 100644
index 04aa79703..000000000
Binary files a/docs/components/images/iconbutton/theming-filled.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/theming-filled.webp b/docs/components/images/iconbutton/theming-filled.webp
new file mode 100644
index 000000000..39cb489e0
Binary files /dev/null and b/docs/components/images/iconbutton/theming-filled.webp differ
diff --git a/docs/components/images/iconbutton/theming-outlined.png b/docs/components/images/iconbutton/theming-outlined.png
deleted file mode 100644
index 7d13d38bd..000000000
Binary files a/docs/components/images/iconbutton/theming-outlined.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/theming-outlined.webp b/docs/components/images/iconbutton/theming-outlined.webp
new file mode 100644
index 000000000..0c15f9925
Binary files /dev/null and b/docs/components/images/iconbutton/theming-outlined.webp differ
diff --git a/docs/components/images/iconbutton/theming-standard.png b/docs/components/images/iconbutton/theming-standard.png
deleted file mode 100644
index 44ffaad51..000000000
Binary files a/docs/components/images/iconbutton/theming-standard.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/theming-standard.webp b/docs/components/images/iconbutton/theming-standard.webp
new file mode 100644
index 000000000..333bfbaa3
Binary files /dev/null and b/docs/components/images/iconbutton/theming-standard.webp differ
diff --git a/docs/components/images/iconbutton/usage-filled-tonal.png b/docs/components/images/iconbutton/usage-filled-tonal.png
deleted file mode 100644
index 32823c9de..000000000
Binary files a/docs/components/images/iconbutton/usage-filled-tonal.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/usage-filled-tonal.webp b/docs/components/images/iconbutton/usage-filled-tonal.webp
new file mode 100644
index 000000000..7cbe240c2
Binary files /dev/null and b/docs/components/images/iconbutton/usage-filled-tonal.webp differ
diff --git a/docs/components/images/iconbutton/usage-filled.png b/docs/components/images/iconbutton/usage-filled.png
deleted file mode 100644
index f3c4c9aa2..000000000
Binary files a/docs/components/images/iconbutton/usage-filled.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/usage-filled.webp b/docs/components/images/iconbutton/usage-filled.webp
new file mode 100644
index 000000000..77d310f1a
Binary files /dev/null and b/docs/components/images/iconbutton/usage-filled.webp differ
diff --git a/docs/components/images/iconbutton/usage-outlined.png b/docs/components/images/iconbutton/usage-outlined.png
deleted file mode 100644
index f44722d3d..000000000
Binary files a/docs/components/images/iconbutton/usage-outlined.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/usage-outlined.webp b/docs/components/images/iconbutton/usage-outlined.webp
new file mode 100644
index 000000000..910520db0
Binary files /dev/null and b/docs/components/images/iconbutton/usage-outlined.webp differ
diff --git a/docs/components/images/iconbutton/usage-standard.png b/docs/components/images/iconbutton/usage-standard.png
deleted file mode 100644
index c5a2cb5ef..000000000
Binary files a/docs/components/images/iconbutton/usage-standard.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/usage-standard.webp b/docs/components/images/iconbutton/usage-standard.webp
new file mode 100644
index 000000000..39cdc3f0b
Binary files /dev/null and b/docs/components/images/iconbutton/usage-standard.webp differ
diff --git a/docs/components/images/iconbutton/usage-toggle.png b/docs/components/images/iconbutton/usage-toggle.png
deleted file mode 100644
index 5c037e403..000000000
Binary files a/docs/components/images/iconbutton/usage-toggle.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/usage-toggle.webp b/docs/components/images/iconbutton/usage-toggle.webp
new file mode 100644
index 000000000..c1248c624
Binary files /dev/null and b/docs/components/images/iconbutton/usage-toggle.webp differ
diff --git a/docs/components/images/iconbutton/usage.png b/docs/components/images/iconbutton/usage.png
deleted file mode 100644
index fd2e67987..000000000
Binary files a/docs/components/images/iconbutton/usage.png and /dev/null differ
diff --git a/docs/components/images/iconbutton/usage.webp b/docs/components/images/iconbutton/usage.webp
new file mode 100644
index 000000000..f3d90aeac
Binary files /dev/null and b/docs/components/images/iconbutton/usage.webp differ
diff --git a/docs/components/images/progress/hero.webp b/docs/components/images/progress/hero.webp
index 4b25c5229..80d857136 100644
Binary files a/docs/components/images/progress/hero.webp and b/docs/components/images/progress/hero.webp differ
diff --git a/docs/components/images/progress/theming-circular.png b/docs/components/images/progress/theming-circular.png
deleted file mode 100644
index b8694e9ae..000000000
Binary files a/docs/components/images/progress/theming-circular.png and /dev/null differ
diff --git a/docs/components/images/progress/theming-circular.webp b/docs/components/images/progress/theming-circular.webp
new file mode 100644
index 000000000..0768c29cf
Binary files /dev/null and b/docs/components/images/progress/theming-circular.webp differ
diff --git a/docs/components/images/progress/theming-linear.png b/docs/components/images/progress/theming-linear.png
deleted file mode 100644
index a13dbd0e3..000000000
Binary files a/docs/components/images/progress/theming-linear.png and /dev/null differ
diff --git a/docs/components/images/progress/theming-linear.webp b/docs/components/images/progress/theming-linear.webp
new file mode 100644
index 000000000..6d80f50f0
Binary files /dev/null and b/docs/components/images/progress/theming-linear.webp differ
diff --git a/docs/components/images/radio/hero.png b/docs/components/images/radio/hero.png
deleted file mode 100644
index d5e70f04c..000000000
Binary files a/docs/components/images/radio/hero.png and /dev/null differ
diff --git a/docs/components/images/radio/hero.webp b/docs/components/images/radio/hero.webp
new file mode 100644
index 000000000..f91d0f5e5
Binary files /dev/null and b/docs/components/images/radio/hero.webp differ
diff --git a/docs/components/images/select/hero.png b/docs/components/images/select/hero.png
deleted file mode 100644
index 4beeb6288..000000000
Binary files a/docs/components/images/select/hero.png and /dev/null differ
diff --git a/docs/components/images/select/hero.webp b/docs/components/images/select/hero.webp
new file mode 100644
index 000000000..4fdd15e7c
Binary files /dev/null and b/docs/components/images/select/hero.webp differ
diff --git a/docs/components/images/select/theming-filled.png b/docs/components/images/select/theming-filled.png
deleted file mode 100644
index c2f35b5f2..000000000
Binary files a/docs/components/images/select/theming-filled.png and /dev/null differ
diff --git a/docs/components/images/select/theming-filled.webp b/docs/components/images/select/theming-filled.webp
new file mode 100644
index 000000000..aae479940
Binary files /dev/null and b/docs/components/images/select/theming-filled.webp differ
diff --git a/docs/components/images/select/theming-outlined.png b/docs/components/images/select/theming-outlined.png
deleted file mode 100644
index 990f971c3..000000000
Binary files a/docs/components/images/select/theming-outlined.png and /dev/null differ
diff --git a/docs/components/images/select/theming-outlined.webp b/docs/components/images/select/theming-outlined.webp
new file mode 100644
index 000000000..5bcb94484
Binary files /dev/null and b/docs/components/images/select/theming-outlined.webp differ
diff --git a/docs/components/images/select/usage.png b/docs/components/images/select/usage.png
deleted file mode 100644
index 93eb9a901..000000000
Binary files a/docs/components/images/select/usage.png and /dev/null differ
diff --git a/docs/components/images/select/usage.webp b/docs/components/images/select/usage.webp
new file mode 100644
index 000000000..79553ef90
Binary files /dev/null and b/docs/components/images/select/usage.webp differ
diff --git a/docs/components/images/slider/hero.png b/docs/components/images/slider/hero.png
deleted file mode 100644
index fd60801bd..000000000
Binary files a/docs/components/images/slider/hero.png and /dev/null differ
diff --git a/docs/components/images/slider/hero.webp b/docs/components/images/slider/hero.webp
new file mode 100644
index 000000000..230323a32
Binary files /dev/null and b/docs/components/images/slider/hero.webp differ
diff --git a/docs/components/images/slider/theming.png b/docs/components/images/slider/theming.png
deleted file mode 100644
index a0d4a7877..000000000
Binary files a/docs/components/images/slider/theming.png and /dev/null differ
diff --git a/docs/components/images/slider/theming.webp b/docs/components/images/slider/theming.webp
new file mode 100644
index 000000000..1ad491eb7
Binary files /dev/null and b/docs/components/images/slider/theming.webp differ
diff --git a/docs/components/images/switch/hero.png b/docs/components/images/switch/hero.png
deleted file mode 100644
index 2dc5fc56b..000000000
Binary files a/docs/components/images/switch/hero.png and /dev/null differ
diff --git a/docs/components/images/switch/hero.webp b/docs/components/images/switch/hero.webp
new file mode 100644
index 000000000..7c5bd97a9
Binary files /dev/null and b/docs/components/images/switch/hero.webp differ
diff --git a/docs/components/images/tabs/hero.png b/docs/components/images/tabs/hero.png
deleted file mode 100644
index 6b5a89f91..000000000
Binary files a/docs/components/images/tabs/hero.png and /dev/null differ
diff --git a/docs/components/images/tabs/hero.webp b/docs/components/images/tabs/hero.webp
new file mode 100644
index 000000000..20c486816
Binary files /dev/null and b/docs/components/images/tabs/hero.webp differ
diff --git a/docs/components/images/tabs/scrollable.png b/docs/components/images/tabs/scrollable.png
deleted file mode 100644
index ce64c4f8b..000000000
Binary files a/docs/components/images/tabs/scrollable.png and /dev/null differ
diff --git a/docs/components/images/tabs/scrollable.webp b/docs/components/images/tabs/scrollable.webp
new file mode 100644
index 000000000..74cc16be4
Binary files /dev/null and b/docs/components/images/tabs/scrollable.webp differ
diff --git a/docs/components/images/tabs/theming.png b/docs/components/images/tabs/theming.png
deleted file mode 100644
index 08541743d..000000000
Binary files a/docs/components/images/tabs/theming.png and /dev/null differ
diff --git a/docs/components/images/tabs/theming.webp b/docs/components/images/tabs/theming.webp
new file mode 100644
index 000000000..c07b5bd79
Binary files /dev/null and b/docs/components/images/tabs/theming.webp differ
diff --git a/docs/components/images/tabs/usage.png b/docs/components/images/tabs/usage.png
deleted file mode 100644
index e5f8ba9c5..000000000
Binary files a/docs/components/images/tabs/usage.png and /dev/null differ
diff --git a/docs/components/images/tabs/usage.webp b/docs/components/images/tabs/usage.webp
new file mode 100644
index 000000000..43f11050e
Binary files /dev/null and b/docs/components/images/tabs/usage.webp differ
diff --git a/docs/components/progress.md b/docs/components/progress.md
index 79cf011fa..8e43c3dcc 100644
--- a/docs/components/progress.md
+++ b/docs/components/progress.md
@@ -268,7 +268,7 @@ Token                                           | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a circular progress indicator with a different theme applied](images/progress/theming-circular.png "Circular progress indicator theming example.")
+![Image of a circular progress indicator with a different theme applied](images/progress/theming-circular.webp "Circular progress indicator theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
@@ -327,7 +327,7 @@ Token                                          | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a linear progress indicator with a different theme applied](images/progress/theming-linear.png "Linear progress theming example.")
+![Image of a linear progress indicator with a different theme applied](images/progress/theming-linear.webp "Linear progress theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-only-start -->
diff --git a/docs/components/radio.md b/docs/components/radio.md
index ec553b69a..01db25333 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -30,7 +30,7 @@ people select one option from a set of options.
 
 <img
     class="hero"
-    src="images/radio/hero.png"
+    src="images/radio/hero.webp"
     alt="A list of items with radio buttons and one selected."
     title="Radio buttons">
 
diff --git a/docs/components/select.md b/docs/components/select.md
index 484b53c41..e6d48b24c 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -33,7 +33,7 @@ selected menu item above the menu.
 
 </catalog-component-header-title>
 
-<img class="hero" src="images/select/hero.png" alt="A textfield containing the text Item 2, with a dropdown menu containing Item 1, Item 2, and Item 3.">
+<img class="hero" src="images/select/hero.webp" alt="A textfield containing the text Item 2, with a dropdown menu containing Item 1, Item 2, and Item 3.">
 
 </catalog-component-header>
 
@@ -50,7 +50,7 @@ fixed list of available options. It is analogous to the native HTML
 
 <!-- no-catalog-start -->
 
-![Example usage of an outlined dropdown menu and a filled dropdown menu.](images/select/usage.png "An outlined dropdown menu filled with Apple, and a filled dropdown menu.")
+![Example usage of an outlined dropdown menu and a filled dropdown menu.](images/select/usage.webp "An outlined dropdown menu filled with Apple, and a filled dropdown menu.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/select/usage.html" -->
@@ -130,7 +130,7 @@ To theme the select's dropdown menu, use the `md-menu` component tokens on the
 
 <!-- no-catalog-start -->
 
-![Image of a filled select with a different theme applied](images/select/theming-filled.png "Filled select theming example.")
+![Image of a filled select with a different theme applied](images/select/theming-filled.webp "Filled select theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/select/theming-filled.html" -->
@@ -176,7 +176,7 @@ Token                                              | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a outlined select with a different theme applied](images/select/theming-outlined.png "Outlined select theming example.")
+![Image of a outlined select with a different theme applied](images/select/theming-outlined.webp "Outlined select theming example.")
 
 <!-- no-catalog-end -->
 <!-- catalog-include "figures/select/theming-outlined.html" -->
diff --git a/docs/components/slider.md b/docs/components/slider.md
index 0638f60f9..a6bc23397 100644
--- a/docs/components/slider.md
+++ b/docs/components/slider.md
@@ -38,7 +38,7 @@ Sliders can use icons or labels to represent a numeric or relative scale.
 <img
     class="hero"
     alt="Sound settings screen with sliders labeled 'Media volume', and 'Call volume'."
-    src="images/slider/hero.png">
+    src="images/slider/hero.webp">
 
 </catalog-component-header>
 
@@ -132,7 +132,7 @@ Token                              | Default value
 
 <!-- no-catalog-start -->
 
-![Image of a slider with a different theme applied](images/slider/theming.png "Slider theming example.")
+![Image of a slider with a different theme applied](images/slider/theming.webp "Slider theming example.")
 
 <!-- no-catalog-end -->
 
diff --git a/docs/components/switch.md b/docs/components/switch.md
index 49d2a242a..4bdc9e2c6 100644
--- a/docs/components/switch.md
+++ b/docs/components/switch.md
@@ -34,7 +34,7 @@ of an item on or off.
 
 <img
     class="hero"
-    src="images/switch/hero.png"
+    src="images/switch/hero.webp"
     alt="Two switches on a settings page for Wi-Fi and Bluetooth. The first is on and the second is off."
     title="Switches on a settings page.">
 
diff --git a/docs/components/tabs.md b/docs/components/tabs.md
index 62fcbffbd..6c2cd9fac 100644
--- a/docs/components/tabs.md
+++ b/docs/components/tabs.md
@@ -34,7 +34,7 @@ related content that are at the same level of hierarchy.
 
 <img
   class="hero"
-  src="images/tabs/hero.png"
+  src="images/tabs/hero.webp"
   alt="Media gallery screen with tabs labeled 'Video', 'Photos', and 'Audio'.">
 
 </catalog-component-header>
@@ -303,7 +303,7 @@ Token                                     | Default value
 
 <!-- no-catalog-start -->
 
-![Image of tabs with a different theme applied](images/tabs/theming.png "Tab theming example.")
+![Image of tabs with a different theme applied](images/tabs/theming.webp "Tab theming example.")
 
 <!-- no-catalog-end -->
 
diff --git a/docs/images/what-is-material.png b/docs/images/what-is-material.png
deleted file mode 100644
index e0ff7aa0f..000000000
Binary files a/docs/images/what-is-material.png and /dev/null differ
diff --git a/docs/images/what-is-material.webp b/docs/images/what-is-material.webp
new file mode 100644
index 000000000..a1346a255
Binary files /dev/null and b/docs/images/what-is-material.webp differ
diff --git a/docs/theming/README.md b/docs/theming/README.md
index bce1239ab..6fb4c140d 100644
--- a/docs/theming/README.md
+++ b/docs/theming/README.md
@@ -22,7 +22,7 @@ interactions.
 
 ![collage of views of a mobile UI that show a user's setting and preference for
 a green primary color flows through system UI
-harmoniously](images/theming.png "A user-generated color scheme can flow through apps that use a custom theme.")
+harmoniously](images/theming.webp "A user-generated color scheme can flow through apps that use a custom theme.")
 
 ## Tokens
 
@@ -35,7 +35,7 @@ value.
 
 ![A diagram showing the heirachy of component tokens to system tokens to
 reference
-tokens](images/token-types.png "The relationship between reference, system, and component tokens.")
+tokens](images/token-types.webp "The relationship between reference, system, and component tokens.")
 
 On the web, design tokens are
 [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)<!-- {.external} -->
diff --git a/docs/theming/color.md b/docs/theming/color.md
index c97be16a7..85a7ca620 100644
--- a/docs/theming/color.md
+++ b/docs/theming/color.md
@@ -29,9 +29,9 @@ is the group of
 [key color tones](https://m3.material.io/styles/color/the-color-system/key-colors-tones#5fdf196d-1e21-4d03-ae63-e802d61ad5ee)<!-- {.external} -->
 assigned to specific roles that get mapped to components.
 
-![Full palette derived from baseline colors](images/color-scheme-light.png "From five key colors, roles are automatically assigned that map to light theme components")
+![Full palette derived from baseline colors](images/color-scheme-light.webp "From five key colors, roles are automatically assigned that map to light theme components")
 
-![Dark palette derived from baseline colors](images/color-scheme-dark.png "From five key colors, roles are automatically assigned that map to dark theme components")
+![Dark palette derived from baseline colors](images/color-scheme-dark.webp "From five key colors, roles are automatically assigned that map to dark theme components")
 
 > Tip: use the
 > [Material theme builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/Material-Theme-Builder)<!-- {.external} -->
diff --git a/docs/theming/images/color-scheme-dark.png b/docs/theming/images/color-scheme-dark.png
deleted file mode 100644
index 9167b6cf3..000000000
Binary files a/docs/theming/images/color-scheme-dark.png and /dev/null differ
diff --git a/docs/theming/images/color-scheme-dark.webp b/docs/theming/images/color-scheme-dark.webp
new file mode 100644
index 000000000..ac5f3695d
Binary files /dev/null and b/docs/theming/images/color-scheme-dark.webp differ
diff --git a/docs/theming/images/color-scheme-light.png b/docs/theming/images/color-scheme-light.png
deleted file mode 100644
index d15d71279..000000000
Binary files a/docs/theming/images/color-scheme-light.png and /dev/null differ
diff --git a/docs/theming/images/color-scheme-light.webp b/docs/theming/images/color-scheme-light.webp
new file mode 100644
index 000000000..437c4e003
Binary files /dev/null and b/docs/theming/images/color-scheme-light.webp differ
diff --git a/docs/theming/images/theming.png b/docs/theming/images/theming.png
deleted file mode 100644
index c1386222f..000000000
Binary files a/docs/theming/images/theming.png and /dev/null differ
diff --git a/docs/theming/images/theming.webp b/docs/theming/images/theming.webp
new file mode 100644
index 000000000..dc8de59ad
Binary files /dev/null and b/docs/theming/images/theming.webp differ
diff --git a/docs/theming/images/token-types.png b/docs/theming/images/token-types.png
deleted file mode 100644
index acdf27340..000000000
Binary files a/docs/theming/images/token-types.png and /dev/null differ
diff --git a/docs/theming/images/token-types.webp b/docs/theming/images/token-types.webp
new file mode 100644
index 000000000..5dbaa2059
Binary files /dev/null and b/docs/theming/images/token-types.webp differ