Update step by step images

getting_started/step_by_step/nodes_and_scenes.rst

@@ -48,7 +48,7 @@ Scenes allow you to structure your game's code however you want. You can
 **compose nodes** to create custom and complex node types, like a game character
 that runs and jumps, a life bar, a chest with which you can interact, and more.
 
-.. image:: img/nodes_and_scenes_3d_scene_example.png
+.. image:: img/nodes_and_scenes_3d_scene_example.webp
 
 The Godot editor essentially is a **scene editor**. It has plenty of tools for
 editing 2D and 3D scenes, as well as user interfaces. A Godot project can

getting_started/step_by_step/scripting_languages.rst

@@ -45,7 +45,7 @@ language specifically for Godot and the needs of game developers. It has a
 lightweight and straightforward syntax and provides the tightest integration
 with Godot.
 
-.. image:: img/scripting_gdscript.png
+.. image:: img/scripting_gdscript.webp
 
 For C#, you will need an external code editor like
 `VSCode <https://code.visualstudio.com/>`_ or Visual Studio. While C# support is

getting_started/step_by_step/signals.rst

@@ -271,16 +271,16 @@ In the Scene dock, right-click on the Sprite2D node and add a new child node.
 Search for Timer and add the corresponding node. Your scene should now look like
 this.
 
-.. image:: img/signals_15_scene_tree.png
+.. image:: img/signals_15_scene_tree.webp
 
 With the Timer node selected, go to the Inspector and enable the **Autostart**
 property.
 
-.. image:: img/signals_18_timer_autostart.png
+.. image:: img/signals_18_timer_autostart.webp
 
 Click the script icon next to Sprite2D to jump back to the scripting workspace.
 
-.. image:: img/signals_16_click_script.png
+.. image:: img/signals_16_click_script.webp
 
 We need to do two operations to connect the nodes via code: