Merge pull request #5569 from VandeurenGlenn:convert-doc-images-to-webp

PiperOrigin-RevId: 635557295

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 -->

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" -->

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>

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>

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>

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>

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" -->

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,[email protected],100..700,0..1" rel="stylesheet">