Merge pull request #10471 from gomaproi/screenshots-galore

Update screenshots for better consistency with the default Godot 4.x theme

tutorials/3d/standard_material_3d.rst

@@ -36,7 +36,7 @@ BaseMaterial 3D settings
 StandardMaterial3D has many settings that determine the look of a material. All of these are
 under the BaseMaterial3D category
 
-.. image:: img/spatial_material1.png
+.. image:: img/spatial_material1.webp
 
 ORM materials are almost exactly the same with one difference. Instead of separate settings
 and textures for occlusion, roughness, and metallic, there is a single ORM texture. The different
@@ -328,7 +328,7 @@ Vertex Color
 This setting allows choosing what is done by default to vertex colors that come
 from your 3D modeling application. By default, they are ignored.
 
-.. image:: img/spatial_material4.png
+.. image:: img/spatial_material4.webp
 
 Use as Albedo
 ~~~~~~~~~~~~~
@@ -647,7 +647,7 @@ faces the camera:
 * **Particle Billboard:** Most suited for particle systems, because it allows
   specifying :ref:`flipbook animation <doc_process_material_properties_animation>`.
 
-.. image:: img/spatial_material9.png
+.. image:: img/spatial_material9.webp
 
 The **Particles Anim** section is only visible when the billboard mode is **Particle Billboard**.
 

tutorials/animation/introduction.rst

@@ -61,7 +61,7 @@ A keyframe defines the value of a property at a point in time.
 Diamond shapes represent keyframes in the timeline. A line between two
 keyframes indicates that the value doesn't change between them.
 
-.. figure:: img/animation_keyframes.png
+.. figure:: img/animation_keyframes.webp
    :alt: Keyframes in Godot
 
    Keyframes in Godot
@@ -70,7 +70,7 @@ You set values of a node's properties and create animation keyframes for them.
 When the animation runs, the engine will interpolate the values between the
 keyframes, resulting in them gradually changing over time.
 
-.. figure:: img/animation_illustration.png
+.. figure:: img/animation_illustration.webp
    :alt: Two keyframes are all it takes to obtain a smooth motion
 
    Two keyframes are all it takes to obtain a smooth motion
@@ -78,7 +78,7 @@ keyframes, resulting in them gradually changing over time.
 The timeline defines how long the animation will take. You can insert keyframes
 at various points, and change their timing.
 
-.. figure:: img/animation_timeline.png
+.. figure:: img/animation_timeline.webp
    :alt: The timeline in the animation panel
 
    The timeline in the animation panel
@@ -89,7 +89,7 @@ a node and its affected property. For example, the position track
 in the illustration refers to the ``position`` property of the Sprite2D
 node.
 
-.. figure:: img/animation_normal_track.png
+.. figure:: img/animation_normal_track.webp
    :alt: Example of Normal animation tracks
 
    Example of Normal animation tracks
@@ -110,7 +110,7 @@ Scene setup
 For this tutorial, we'll create a Sprite node with an AnimationPlayer as
 its child. We will animate the sprite to move between two points on the screen.
 
-.. figure:: img/animation_animation_player_tree.png
+.. figure:: img/animation_animation_player_tree.webp
    :alt: Our scene setup
 
    Our scene setup
@@ -163,7 +163,7 @@ Adding a track
 To add a new track for our sprite, select it and take a look at the
 toolbar:
 
-.. figure:: img/animation_convenience_buttons.png
+.. figure:: img/animation_convenience_buttons.webp
    :alt: Convenience buttons
 
    Convenience buttons
@@ -195,7 +195,7 @@ default, the animation is set to last only one second, so change the animation
 length to 2 in the controls on the right side of the animation panel's timeline
 header.
 
-.. figure:: img/animation_set_length.png
+.. figure:: img/animation_set_length.webp
    :alt: Animation length
 
    Animation length
@@ -241,7 +241,7 @@ This means we can extend the animation length to four seconds now, and Godot
 will also calculate the frames from the last keyframe to the first, moving
 our sprite back and forth.
 
-.. figure:: img/animation_loop.png
+.. figure:: img/animation_loop.webp
    :alt: Animation loop
 
    Animation loop

tutorials/assets_pipeline/importing_translations.rst

@@ -111,6 +111,6 @@ Select the ``.csv`` file and access the **Import** dock to define import
 options. You can toggle the compression of the imported translations, and
 select the delimiter to use when parsing the CSV file.
 
-.. image:: img/import_csv.png
+.. image:: img/import_csv.webp
 
 Be sure to click **Reimport** after any change to these options.

tutorials/export/exporting_pcks.rst

@@ -58,7 +58,7 @@ In order to pack all resources of a project into a PCK file open the project
 and go to Project/Export and click on "Export PCK/Zip". Also make sure to have
 an export template selected while doing so.
 
-.. image:: img/export_pck.png
+.. image:: img/export_pck.webp
 
 Another method would be to :ref:`export from the command line <doc_command_line_tutorial_exporting>`.
 If the output file ends with a PCK or ZIP file extension, then the export

tutorials/export/feature_tags.rst

@@ -140,7 +140,7 @@ Custom features
 It is possible to add custom features to a build; use the relevant
 field in the *export preset* used to generate it:
 
-.. image:: img/feature_tags1.png
+.. image:: img/feature_tags1.webp
 
 .. note::
 
@@ -158,11 +158,14 @@ This allows you to better customize any configuration when doing a build.
 In the following example, a different icon is added for the demo build of the game (which was
 customized in a special export preset, which, in turn, includes only demo levels).
 
-.. image:: img/feature_tags2.png
+.. figure:: img/feature_tags2.webp
+    :alt: The Project Settings panel
 
-After overriding, a new field is added for this specific configuration:
+    The desired configuration is selected, which effectively copies its properties to the panel above (1). The "demo_build" feature tag is selected (2). The configuration is added to the project settings (3).
 
-.. image:: img/feature_tags3.png
+After overriding, a new field is added for this specific configuration.
+
+.. image:: img/feature_tags3.webp
 
 .. note::
 
@@ -179,7 +182,7 @@ Default overrides
 There are already a lot of settings that come with overrides by default; they can be found
 in many sections of the project settings.
 
-.. image:: img/feature_tags4.png
+.. image:: img/feature_tags4.webp
 
 Customizing the build
 ---------------------

tutorials/inputs/inputevent.rst

@@ -121,7 +121,7 @@ the following graphic, in a reverse depth-first order, starting with the node at
 the scene tree, and ending at the root node. Excluded from this process are Windows
 and SubViewports.
 
-.. image:: img/input_event_scene_flow.png
+.. image:: img/input_event_scene_flow.webp
 
 This order doesn't apply to :ref:`Control._gui_input() <class_Control_private_method__gui_input>`, which uses
 a different method based on event location or focused Control.

tutorials/ui/gui_skinning.rst

@@ -166,7 +166,7 @@ the Inspector dock, or scripts. This allows to make granular changes to a
 particular part of the UI, while not affecting anything else in the project,
 including this control's children.
 
-.. figure:: img/themecheck.png
+.. figure:: img/themecheck.webp
    :align: center
 
 Local overrides are less useful for the visual flair of your user interface,

tutorials/ui/gui_theme_type_variations.rst

@@ -8,7 +8,7 @@ needs to have a different look than what is normally defined by a :ref:`Theme <c
 Every control node has theme property overrides, which allow you to redefine the styling for
 each individual UI element.
 
-.. figure:: img/themecheck.png
+.. figure:: img/themecheck.webp
    :align: center
 
 This approach quickly becomes hard to manage, if you need to share the same custom look
@@ -46,7 +46,7 @@ you want to name your theme type variation in the text box, then click **Add Typ
 Below the **Type** dropdown are the property tabs. Switch to the tab with a wrench
 and screwdriver icon.
 
-.. figure:: img/base_type.png
+.. figure:: img/base_type.webp
    :align: center
 
 Click on the plus icon next to the **Base Type** field. You can select the base type

tutorials/ui/gui_using_theme_editor.rst

@@ -25,7 +25,7 @@ Themes also can be created from any control node. Select a control node in the s
 hierarchy, then in the inspector go to the ``theme`` property. From there you can
 select **New Theme**.
 
-.. figure:: img/new_theme.png
+.. figure:: img/new_theme.webp
    :align: center
 
 This will create an empty theme and open up the theme editor. Keep in mind that
@@ -37,13 +37,13 @@ include the default, fallback font that you can edit only using the Inspector do
 Same applies to the contents of complex resource types, such as :ref:`StyleBoxes <class_StyleBox>`
 and icons — they open for editing in the Inspector.
 
-.. figure:: img/default_font.png
+.. figure:: img/default_font.webp
    :align: center
 
 Theme editor overview
 ---------------------
 
-.. figure:: img/theme_editor.png
+.. figure:: img/theme_editor.webp
    :align: center
 
 The theme editor has two main parts. The main theme editor, located at the bottom of
@@ -60,14 +60,14 @@ The left-hand side of the main editor has a set of preview tabs. The **Default P
 tab is visible out of the box and contains most of the frequently used controls in various
 states. Previews are interactive, so intermediate states (e.g. hover) can be previewed as well.
 
-.. figure:: img/default_preview.png
+.. figure:: img/default_preview.webp
    :align: center
 
 Additional tabs can be created from arbitrary scenes in your project. The scene
 must have a control node as its root to function as a preview. To add a new tab
 click the **Add Preview** button and select the saved scene from your file system.
 
-.. figure:: img/scene_preview.png
+.. figure:: img/scene_preview.webp
    :align: center
 
 If you make changes to the scene, they will not be reflected in the preview
@@ -78,7 +78,7 @@ picker tool from the toolbar and hover over the preview area to highlight contro
 nodes. Highlighted control nodes display their class name, or type variation if available.
 Clicking on the highlighted control opens it for editing on the right-hand side.
 
-.. figure:: img/theme_preview_picker.png
+.. figure:: img/theme_preview_picker.webp
    :align: center
 
 Theme types and items
@@ -92,7 +92,7 @@ enabled, then for each built-in type its default theme values are displayed, gre
 out. If the option is disabled, only the items available in the edited theme itself
 are displayed.
 
-.. figure:: img/theme_type_editor.png
+.. figure:: img/theme_type_editor.webp
    :align: center
 
 Individual items from the default theme can be added to the current theme by
@@ -106,7 +106,7 @@ Overridden theme items can be edited directly in the right-hand panel, unless th
 are resources. Resources have rudimentary controls available for them, but must be
 edited in the Inspector dock instead.
 
-.. figure:: img/theme_item_inspector.png
+.. figure:: img/theme_item_inspector.webp
    :align: center
 
 Styleboxes have a unique feature available, where you can pin an individual
@@ -115,7 +115,7 @@ all styleboxes of the same type are updated alongside it when you change its
 properties. This allows you to edit properties of several styleboxes at the
 same time.
 
-.. figure:: img/theme_pin_the_stylebox.png
+.. figure:: img/theme_pin_the_stylebox.webp
    :align: center
 
 While theme types can be picked from a preview, they can also be added manually.
@@ -124,17 +124,21 @@ In that menu you can either select a type from the list, or you can enter an
 arbitrary name to create a custom type. Text field also filters the list of control
 nodes.
 
-.. figure:: img/add_item_type.png
+.. figure:: img/add_item_type.webp
    :align: center
 
 Manage and import items
 -----------------------
 
-Clicking the **Manage Items** button brings up the **Manage Theme Items** dialog. In
-the **Edit Items** tab you can view and add theme types, as well as view and edit
+Clicking the **Manage Items** button brings up the **Manage Theme Items** dialog.
+
+.. figure:: img/manage_items_button.webp
+   :align: center
+
+In the **Edit Items** tab you can view and add theme types, as well as view and edit
 the theme items of the selected type.
 
-.. figure:: img/manage_items.png
+.. figure:: img/manage_items.webp
    :align: center
 
 You can create, rename and remove individual theme items here by clicking the
@@ -154,5 +158,5 @@ include the data will copy all theme items as they are to your theme. Omitting t
 will create the items of the corresponding data type and name, but will leave them empty,
 creating a template of a theme in a way.
 
-.. figure:: img/import_items.png
+.. figure:: img/import_items.webp
    :align: center