diff --git a/tutorials/shaders/img/visual_shader_create.png b/tutorials/shaders/img/visual_shader_create.png
deleted file mode 100644
index e36820d1291..00000000000
Binary files a/tutorials/shaders/img/visual_shader_create.png and /dev/null differ
diff --git a/tutorials/shaders/img/visual_shader_create.webp b/tutorials/shaders/img/visual_shader_create.webp
new file mode 100644
index 00000000000..64ed1a69c58
Binary files /dev/null and b/tutorials/shaders/img/visual_shader_create.webp differ
diff --git a/tutorials/shaders/img/visual_shader_create2.webp b/tutorials/shaders/img/visual_shader_create2.webp
new file mode 100644
index 00000000000..02a5a55ce51
Binary files /dev/null and b/tutorials/shaders/img/visual_shader_create2.webp differ
diff --git a/tutorials/shaders/visual_shaders.rst b/tutorials/shaders/visual_shaders.rst
index 798c5cc4b5f..9ee39ced79a 100644
--- a/tutorials/shaders/visual_shaders.rst
+++ b/tutorials/shaders/visual_shaders.rst
@@ -26,10 +26,14 @@ VisualShaders, create a new ``ShaderMaterial`` in an object of your choice.
 
 Then assign a :ref:`class_VisualShader` resource to the ``Shader`` property.
 
-.. image:: img/visual_shader_create.png
+.. image:: img/visual_shader_create.webp
 
-Click on the new ``VisualShader`` resource and the Visual Shader Editor will
-open automatically. The layout of the Visual Shader Editor comprises two parts:
+Click on the new ``Shader`` resource and the Create Shader dialog will
+open automatically. Change the Type option to VisualShader in the dropdown.
+
+.. image:: img/visual_shader_create2.webp
+
+The layout of the Visual Shader Editor comprises two parts:
 the upper toolbar and the graph itself.
 
 .. image:: img/visual_shader_editor2.png