diff --git a/doc/qtdesignstudio/src/best practices/best-practices-glow.qdoc b/doc/qtdesignstudio/src/best practices/best-practices-glow.qdoc
index 29847e73004..6caa58c1311 100644
--- a/doc/qtdesignstudio/src/best practices/best-practices-glow.qdoc	
+++ b/doc/qtdesignstudio/src/best practices/best-practices-glow.qdoc	
@@ -14,7 +14,7 @@
     using image-based lighting) or add ambient light. Using the glow effect is one way to make your
     scene more realistic.
 
-    \image glow-example.webp
+    \image {glow-example.webp} {An example showing the difference between using a glow effect and not using a glow effect.}
 
     \section1 Creating a project with ExtendedSceneEnvironment
 
@@ -29,7 +29,7 @@
     \uicontrol {ExtendedSceneEnvironment} component from \uicontrol Components to
     the \uicontrol 2D or \uicontrol Navigator view.
 
-    \image ext-scene-env-navigator.webp
+    \image {ext-scene-env-navigator.webp} {The ExtendedSceneEnvironment in the Navigator view.}
 
     \section1 Enabling the Glow effect
 
@@ -37,7 +37,7 @@
     then, in the \uicontrol Properties view, select \uicontrol Enabled in the
     \uicontrol Glow section.
 
-    \image glow-properties.webp
+    \image {glow-properties.webp} {The Glow effect properties in the Properties view.}
 
     \note When setting up or experimenting with the glow effect, use the \l {Blend Modes}{Replace}
     blend mode to see the effect more clearly.
@@ -52,7 +52,7 @@
     properties is to change them directly in the \uicontrol Properties view in \QDS and see the
     changes live in the \uicontrol 2D view.
 
-    \image glow-example-project.webp
+    \image {glow-example-project.webp} {The Flashlight Example project running.}
 
     \section1 Basic properties
 
@@ -96,13 +96,13 @@
         \li Example
       \row
         \li Bloom disabled
-        \li \image bleed-scale-no.webp
+        \li \image {bleed-scale-no.webp} {A close-up of a light in the scene with Bloom disabled.}
       \row
         \li 8
-        \li \image bleed-scale-8.webp
+        \li \image {bleed-scale-8.webp} {A close-up of a light in the scene with HDR Scale set to 8.}
       \row
         \li 1
-        \li \image bleed-scale-1.webp
+        \li \image {bleed-scale-1.webp} {A close-up of a light in the scene with HDR Scale set to 1.}
     \endtable
 
     \section1 Blur Levels
@@ -122,13 +122,13 @@
         \li Example
       \row
         \li 1, 2, 3
-        \li \image glow_low_blur_levels.webp
+        \li \image {glow_low_blur_levels.webp} {A close-up of a light in the scene with Blur level set to 1, 2, 3.}
       \row
         \li 5, 6, 7
-        \li \image glow_high_blur_levels.webp
+        \li \image {glow_high_blur_levels.webp} {A close-up of a light in the scene with Blur level set to 5, 6, 7.}
       \row
         \li 1, 2, 3, 4, 5, 6, 7
-        \li \image glow_all_blur_levels.webp
+        \li \image {glow_all_blur_levels.webp} {A close-up of a light in the scene with Blur level set to 1, 2, 3, 4, 5, 6, 7.}
       \endtable
 
     \section2 Blend modes
@@ -143,21 +143,21 @@
       \row
         \li Additive
         \li Often recommended for outdoor scenes with a visible sky or sun.
-        \li \image glow-additive-blend.webp
+        \li \image {glow-additive-blend.webp} {A close-up of a light in the scene with Blend mode set to Additive.}
       \row
         \li Screen
         \li Similar to \uicontrol {Additive}, but the result is less bright.
-        \li \image glow-screen-blend.webp
+        \li \image {glow-screen-blend.webp} {A close-up of a light in the scene with Blend mode set to Additive.}
       \row
         \li SoftLight
         \li Often recommended for in-door environments.
-        \li \image glow-softlight-blend.webp
+        \li \image {glow-softlight-blend.webp} {A close-up of a light in the scene with Blend mode set to SoftLight.}
       \row
         \li Replace
         \li Does not perform any blending, but displays only the contribution
         the glow effect would blend with the actual content. In practice, this is useful for
         experimenting and troubleshooting when setting up the glow effect.
-        \li \image glow-replace-blend.webp
+        \li \image {glow-replace-blend.webp} {A close-up of a light in the scene with Blend mode set to Replace.}
     \endtable
 
     \section1 Improvement properties
@@ -187,13 +187,13 @@
         \li Example
       \row
         \li No effect
-        \li \image glow-no-enhancment.webp
+        \li \image {glow-no-enhancment.webp} {A close-up of a light in the scene with no effect.}
       \row
         \li High Quality
-        \li \image glow-high-quality.webp
+        \li \image {glow-high-quality.webp} {A close-up of a light in the scene with the High Quality effect.}
       \row
         \li Bicubic Upsampling
-        \li \image glow-bicubic.webp
+        \li \image {glow-bicubic.webp} {A close-up of a light in the scene with the Bicubic Upsampling effect.}
     \endtable
 
 
diff --git a/doc/qtdesignstudio/src/best practices/best-practices-shader-code.qdoc b/doc/qtdesignstudio/src/best practices/best-practices-shader-code.qdoc
index 7ddd066e961..0e1148ca7b9 100644
--- a/doc/qtdesignstudio/src/best practices/best-practices-shader-code.qdoc	
+++ b/doc/qtdesignstudio/src/best practices/best-practices-shader-code.qdoc	
@@ -146,7 +146,7 @@
 
     You can control these settings either from the \uicontrol Properties view or from code.
 
-    \image timeRunning_property.webp
+    \image {timeRunning_property.webp} {The Running setting turned on in the Properties view.}
 
     \code
         NorthernLights {
diff --git a/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc b/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc
index 1c8d5ef8dd6..f22dbdf0cf0 100644
--- a/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-components-custom.qdoc
@@ -13,7 +13,7 @@
     new components that you can create instances of. You can then use the
     instances of the new components in other components.
 
-    \image qtquick-components-custom.png "Custom components in My Components"
+    \image {qtquick-components-custom.png} {Custom components in My Components.}
 
     Custom components are stored in \uicontrol Components >
     \uicontrol {My Components}. You can create instances of custom components
@@ -86,7 +86,7 @@
     in \uicontrol Navigator or the \uicontrol {2D} view, and select
     \uicontrol {Create Component} in the context menu.
 
-    \image qtcreator-move-component-into-separate-file.png
+    \image {qtcreator-move-component-into-separate-file.png} {The Move Component into Separate File dialog.}
 
     Give the new component a name, and select whether properties are set for
     the new component or for the original one.
@@ -117,7 +117,7 @@
     \uicontrol Navigator or \uicontrol {2D} view and select
     \uicontrol {Merge File with Template} in the context menu.
 
-    \image qmldesigner-merge-with-template.png "Merge with Template dialog"
+    \image {qmldesigner-merge-with-template.png} {The Merge with Template dialog.}
 
     In the \uicontrol Template field, select the file to use as a template.
 */
diff --git a/doc/qtdesignstudio/src/components/qtquick-controls.qdoc b/doc/qtdesignstudio/src/components/qtquick-controls.qdoc
index aa650ae7d65..227e86cee5b 100644
--- a/doc/qtdesignstudio/src/components/qtquick-controls.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-controls.qdoc
@@ -13,7 +13,7 @@
     available in \uicontrol Components >
     \uicontrol {Qt Quick Controls} > \uicontrol Controls.
 
-    \image qtquick-designer-qtquickcontrols-types.png "Qt Quick Controls components"
+    \image {qtquick-designer-qtquickcontrols-types.png} {The Qt Quick Controls components in the Components view.}
 
     The following types of controls are available for user interaction:
 
@@ -36,7 +36,7 @@
 
     You can set control properties in the \l Properties view.
 
-    \image qtquick-designer-control-properties.png "Control section in Properties"
+    \image {qtquick-designer-control-properties.png} {The Control section in the Properties view.}
 
     The \uicontrol Enable check box indicates whether the control is enabled.
 
@@ -64,7 +64,7 @@
     most suitable for a use case and discuss the values you can set for button
     properties in the \uicontrol Properties view.
 
-    \image qtquick-designer-button-types.png "Button controls in the 2D view"
+    \image {qtquick-designer-button-types.png} {Different types of button controls in the 2D view.}
 
     Recommendations for buttons that contain text:
 
@@ -387,20 +387,20 @@
     \target progress-bar-control
     \section2 Progress Bar
 
-    \image qtquickcontrols2-progressbar.gif "Progress bar"
+    \image {qtquickcontrols2-progressbar.gif} {An animation of a Progress Bar running.}
 
     \uicontrol {Progress Bar} indicates the progress of an operation. You
     can specify the initial value in the \uicontrol Value field, but it
     should be updated regularly. Specify the range in the \uicontrol From
     and \uicontrol To fields, which can both contain any value.
 
-    \image qtquick-designer-progressbar-properties.png "Progress Bar properties"
+    \image {qtquick-designer-progressbar-properties.png} {The Progress Bar section in the Properties view.}
 
     Select the \uicontrol Indeterminate check box when unable to determine the
     size of the item being downloaded, or if the download progress might get
     interrupted due to a network failure.
 
-    \image qtquickcontrols2-progressbar-indeterminate.gif
+    \image {qtquickcontrols2-progressbar-indeterminate.gif} {A runnning Progress Bar with the Indeterminate property turned on.}
 
     The indeterminate mode is similar to a \l {Busy Indicator} in that both can
     be used to indicate background activity. Due to their visual differences,
@@ -561,7 +561,7 @@
 
     \section2 Tumbler
 
-    \image qtquickcontrols2-tumbler-wrap.gif
+    \image {qtquickcontrols2-tumbler-wrap.gif} {An animation of a Tumbler with multiple wheels spinning.}
 
     \uicontrol Tumbler allows users to select an option from a spinnable
     \e wheel of items. It is useful when there are too many options to use, for
@@ -573,7 +573,7 @@
     field. Select the index of the current option in the
     \uicontrol {Current index} field.
 
-    \image qtquick-designer-tumbler-properties.png "Tumbler properties"
+    \image {qtquick-designer-tumbler-properties.png} {The Tumbler section in the Properties view.}
 
     To enable wrapping, select the \uicontrol Wrap check box.
 
@@ -600,18 +600,18 @@
     If the total width of the buttons exceeds the available width of the tab
     bar, it automatically becomes \l{Flickable}{flickable}.
 
-    \image qtquickcontrols2-tabbar-flickable.png
+    \image {qtquickcontrols2-tabbar-flickable.png} {A Tab Bar exceeding the available width.}
 
     \section1 Tool Bar
 
-    \image qtquickcontrols2-toolbar.png
+    \image {qtquickcontrols2-toolbar.png} {A Tool Bar}
 
     \uicontrol {Tool Bar} contains application-wide and context-sensitive
     actions and controls, such as navigation buttons and search fields. A
     toolbar is commonly used as a header or footer of an \l ApplicationWindow.
     Select the toolbar position in the \uicontrol Position field.
 
-    \image qtquick-designer-toolbar-properties.png "Tool Bar properties"
+    \image {qtquick-designer-toolbar-properties.png} {The Tool Bar section in the Properties View.}
 
     \uicontrol {Tool Button} is nearly identical to \l Button, but it has a
     graphical appearance that makes it more suitable for insertion into a
diff --git a/doc/qtdesignstudio/src/components/qtquick-images.qdoc b/doc/qtdesignstudio/src/components/qtquick-images.qdoc
index 6528388f1ae..151ef30bfed 100644
--- a/doc/qtdesignstudio/src/components/qtquick-images.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-images.qdoc
@@ -204,12 +204,12 @@
     the ISO icon in the \l Navigator or \l {2D} view, and then select
     \uicontrol {Choose Icon} in the context menu.
 
-    \image studio-iso-icon.png
+    \image {studio-iso-icon.png} {An Iso Icon selected in the 2D view.}
 
     You can use the \l{Picking colors}{color picker} in \l Properties to
     set the value of \uicontrol {Icon color}.
 
-    \image iso-icon-browser.png
+    \image {iso-icon-browser.png} {The Iso Icon browser window.}
 
     \section1 Summary of the image components
 
diff --git a/doc/qtdesignstudio/src/components/qtquick-shapes.qdoc b/doc/qtdesignstudio/src/components/qtquick-shapes.qdoc
index 310615b0df9..ac386724832 100644
--- a/doc/qtdesignstudio/src/components/qtquick-shapes.qdoc
+++ b/doc/qtdesignstudio/src/components/qtquick-shapes.qdoc
@@ -199,7 +199,7 @@
     fields in the \uicontrol Opacity section are used to hide and show either
     the front or back side of the item at a time.
 
-    \image studio-flipable.png
+    \image {studio-flipable.png} {A Flipable in the 2D, Navigator, and Properties view.}
 
     The \uicontrol {Flip angle} property is used to animate the angle
     of the component to produce the flipping effect. The value of the
diff --git a/doc/qtdesignstudio/src/developers/studio-accessing-output-issues-and-warnings.qdoc b/doc/qtdesignstudio/src/developers/studio-accessing-output-issues-and-warnings.qdoc
index 7bcb6588abb..7f26ce04664 100644
--- a/doc/qtdesignstudio/src/developers/studio-accessing-output-issues-and-warnings.qdoc
+++ b/doc/qtdesignstudio/src/developers/studio-accessing-output-issues-and-warnings.qdoc
@@ -8,7 +8,7 @@
 
     \title Accessing output, issue, and warning messages
 
-    \image studio-output-view.webp Qt Design Studio Output view
+    \image {studio-output-view.webp} {The Qt Design Studio Output view.}
 
     \QDS projects generate output information that represent the
     executed processes. It also shows you the issues that stop a project from
@@ -41,10 +41,10 @@
             \li Message example
         \row
             \li Issue notification
-            \li \image studio-issue-message.webp
+            \li \image {studio-issue-message.webp} {Example issue notification in the Output view.}
         \row
             \li Warning notification
-            \li \image studio-warning-message.webp
+            \li \image {studio-warning-message.webp} {Example warning notification in the Output view.}
 
     \endtable
 
diff --git a/doc/qtdesignstudio/src/developers/studio-jump-to-the-code.qdoc b/doc/qtdesignstudio/src/developers/studio-jump-to-the-code.qdoc
index 7284eee1a1c..d5518ffeed5 100644
--- a/doc/qtdesignstudio/src/developers/studio-jump-to-the-code.qdoc
+++ b/doc/qtdesignstudio/src/developers/studio-jump-to-the-code.qdoc
@@ -26,7 +26,7 @@
         \li Select \uicontrol {Jump to the Code}.
     \endlist
 
-    \image jump-to-the-code-from-navigator-view.webp
+    \image {jump-to-the-code-from-navigator-view.webp} {Selecting Jump to the Code from the context menu in the Navigator view.}
 
     \section1 Jump to the Code from the 2D view
 
@@ -35,7 +35,7 @@
         \li Select \uicontrol {Jump to the Code}.
     \endlist
 
-    \image jump-to-the-code-from-2D-view.webp
+    \image {jump-to-the-code-from-2D-view.webp} {Selecting Jump to the Code from the context menu in the 2D view.}
 
     \note Alternatively, you can select the component in the \uicontrol {Navigator} view
     or in the \uicontrol {2D} view and select \key {F4}. That takes you to the code
@@ -50,7 +50,7 @@
         \li Select \uicontrol {Jump to the Code}.
     \endlist
 
-    \image jump-to-the-code-from-state-view.webp
+    \image {jump-to-the-code-from-state-view.webp} {Selecting Jump to the Code from the context menu in the States view.}
 
     \section1 Jump to the Code from the Connections view
 
@@ -60,6 +60,6 @@
             to jump to the code segment related to the connection.
     \endlist
 
-    \image jump-to-the-code-from-connections-view.webp
+    \image {jump-to-the-code-from-connections-view.webp} {Selecting Jump to the Code from the context menu in the Connections view.}
 
 */
diff --git a/doc/qtdesignstudio/src/effects-concept.qdoc b/doc/qtdesignstudio/src/effects-concept.qdoc
index a79198edf25..849b5484d32 100644
--- a/doc/qtdesignstudio/src/effects-concept.qdoc
+++ b/doc/qtdesignstudio/src/effects-concept.qdoc
@@ -19,7 +19,7 @@
 designed for both experienced developers and beginners, simplifying the process of developing
 visual effects without requiring extensive knowledge of shader coding.
 
-\image northern-lights-effect.webp
+\image {northern-lights-effect.webp} {A northern lights effect in Effect Composer.}
 
 Key features of the \QDS Effect Composer:
 
diff --git a/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc b/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc
index ea8912f12dd..247a456f27b 100644
--- a/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc
+++ b/doc/qtdesignstudio/src/mcus/qtdesignstudio-creating-projects-for-mcus.qdoc
@@ -12,7 +12,7 @@
     project. When you create a project with the wizard, all the necessary files
     are created, you can adjust the project settings, and save custom presets.
 
-    \image studio-preset-for-mcus.png
+    \image studio-preset-for-mcus.png {The Qt for MCU preset on the Qt Design Studio Welcome page.}
 
     Using the \uicontrol {\QMCU} preset creates an application that uses a subset
     of the default components that you can deploy, run, and debug on MCU boards.
diff --git a/doc/qtdesignstudio/src/mcus/qtdesignstudio-developing-applications-for-mcus.qdoc b/doc/qtdesignstudio/src/mcus/qtdesignstudio-developing-applications-for-mcus.qdoc
index 00f8b6f9ae2..9d8291f34af 100644
--- a/doc/qtdesignstudio/src/mcus/qtdesignstudio-developing-applications-for-mcus.qdoc
+++ b/doc/qtdesignstudio/src/mcus/qtdesignstudio-developing-applications-for-mcus.qdoc
@@ -18,7 +18,7 @@
     mode to modify UI files (.ui.qml). For more information, see
     \l {Implementing applications}.
 
-    \image qds-mcu-target-deployment.png
+    \image {qds-mcu-target-deployment.png} {The workflow of using Qt Design Studio and Qt for MCUs to create an application for an MCU target device.}
 
     With Qt Creator, you can test, preview, and fine-tune your designs directly
     on the desktop or on an actual MCU target device. As a developer you can use
diff --git a/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc b/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc
index 61a4c378e4a..2f945b58dae 100644
--- a/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc
+++ b/doc/qtdesignstudio/src/overviews/qt-design-viewer-navigation.qdoc
@@ -68,7 +68,7 @@
 
     \endlist
 
-    \image web-navigation-components.png
+    \image {web-navigation-components.png} {The structure of the web application in the Navigator view.}
 
     \section1 Creating the pages
 
@@ -88,7 +88,7 @@
       \li Set \uicontrol {Root Item} to \e Rectangle.
     \endlist
 
-    \image web-navigation-new-file.png
+    \image {web-navigation-new-file.png} {The New File dialog.}
 
     When you have created the new page, select \e rectangle in
     \uicontrol Navigator, and in the \uicontrol Properties view:
@@ -114,7 +114,7 @@
           \li Top, 100
           \li Left, 50
         \endlist
-        \image web-navigation-page-margins.png
+        \image {web-navigation-page-margins.png} {The Anchor and Margin properties for the web application header.}
     \endlist
 
 Now, with the first page done, create two more pages in the same way. For these
@@ -124,13 +124,13 @@ You can change the file that you are working on from the drop-down menu in the
 toolbar. Now, select \e Screen01.ui.qml from this menu to go back to your
 main page.
 
-\image web-navigation-change-file.png
+\image {web-navigation-change-file.png} {Changing the file in top toolbar.}
 
 You can see the pages you created under \uicontrol {My Components} in the
 \uicontrol Components view. To edit a component, right-click it in
 \uicontrol Components and select \uicontrol {Edit Component}
 
-\image web-navigation-page-components.png
+\image {web-navigation-page-components.png} {The web app pages in the Components view.}
 
 \section1 Organizing the pages
 
@@ -139,7 +139,7 @@ To organize the pages vertically:
 \list 1
   \li From \uicontrol Components, drag each of the pages to
   \e columnLayout in \uicontrol Navigator.
-  \image web-navigation-components-2.png
+  \image {web-navigation-components-2.png} {}
   \li Select \e columnLayout in Navigator and in \uicontrol Properties:
     \list
       \li Next to \uicontrol Size > \uicontrol W and \uicontrol Size >
@@ -189,7 +189,7 @@ main rectangle so that it adapts to the window size:
   \imageactioniconbinding
   next to \uicontrol Width and select \uicontrol {Set Binding}.
   \li Enter \c {Window.width}
-  \image web-navigation-size-binding.png
+  \image {web-navigation-size-binding.png} {Window.width set in Binding Editor.}
   \li Repeat step 2 and 3 for \uicontrol Height and set the value to
   \c {Window.height}.
 \endlist
@@ -226,7 +226,7 @@ vertically to the correct place:
   \li Select \imageactioniconbinding
   next to \uicontrol Width and select \uicontrol {Set Binding}.
   \li Enter \c {parent.width}.
-  \image web-navigation-size-binding-2.png
+  \image {web-navigation-size-binding-2.png} {parent.width set in Binding Editor.}
   \li In \uicontrol Navigator:
     \list 1
       \li Select \e Button and on the \uicontrol Button tab in \uicontrol Properties,
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc
index f93808d2619..b0dcc5f8e37 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-overview.qdoc
@@ -13,7 +13,7 @@
     You can use \QBF to export designs from Figma to a \e {.qtbridge}
     archive that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image studio-figma-export.png
+    \image {studio-figma-export.png} {Qt Bridge for Figma open in Figma.}
 
     The following topics describe setting up and using \QBF:
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
index edcdeed411a..b58151a5e0e 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-figma-using.qdoc
@@ -226,7 +226,7 @@
 
     \section2 Settings
 
-    \image qt-figma-bridge-settings.png
+    \image {qt-figma-bridge-settings.png} {The Qt Bridge for Figma settings window in Figma.}
 
     You can export assets in the selected format (JPG, PNG, or SVG).
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc
index 80c41467290..fe198b067f3 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-overview.qdoc
@@ -13,7 +13,7 @@
     You can use \QBPS to export designs from Adobe Photoshop to \e {.metadata}
     format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image studio-ps-export.png
+    \image {studio-ps-export.png} {Qt Bridge for Photoshop open in Adobe Photoshop.}
 
     The following topics describe setting up and using \QBPS:
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc
index 489dbabeeff..0e7a4443f85 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-setup.qdoc
@@ -81,7 +81,7 @@
             enter a password in the \uicontrol Password field.
         \li To test that the connection is working properly, start \QBPS and
             select the settings icon in the top right corner.
-            \image qt-bridge-settings.png
+            \image {qt-bridge-settings.png} {The Qt Bridge for Photoshop settings window in Adobe Photoshop.}
         \li In the \uicontrol Password field, enter the password you entered in
             Adobe Photoshop and select \uicontrol {Connect}.
         \li In the \uicontrol {Export Path} group, select the folder button
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
index f6d78347464..7c68cea1377 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-ps-using.qdoc
@@ -133,7 +133,7 @@
     \l{Property Aliases}{property aliases} to fetch the values from other
     properties.
 
-    \image qt-bridge.png
+    \image {qt-bridge.png} {The Qt Bridge for Photoshop default home screen.}
 
     \section2 Specifying settings for exporting assets
 
@@ -238,7 +238,7 @@
     In the \uicontrol {ID Suffix} field, specify an ID suffix that will be
     appended to all auto generated IDs.
 
-    \image qt-bridge-qml-id-settings.png
+    \image {qt-bridge-qml-id-settings.png} {The ID Prefix field highlighted in the settings.}
 
     \section1 Cloning documents
 
@@ -246,7 +246,7 @@
     allows the user to filter out certain kind of layers and groups. In the \QBPS
     \uicontrol Settings dialog, select \uicontrol {Clone} to start cloning the document.
 
-    \image qt-bridge-clone.png
+    \image {qt-bridge-clone.png} {The Clone button highlighted in the Clone document settings.}
 
     \section2 Clone options
     The following exclusion options can be selected to exclude certain kind of layers and
@@ -273,7 +273,7 @@
     \note The sanitization is done in memory and the document must be saved to
     keep the sanitized state.
 
-    \image qt-bridge-sanitize.png
+    \image {qt-bridge-sanitize.png} {The Sanitize button highlighted in the settings.}
 
     \section1 Extending \QBPS
     You can change the default behavior of \QBPS with the help of a JSX script. One can write
@@ -297,11 +297,11 @@
             PSD layer instance.
     \endlist
 
-    \note Please refer to \l {https://www.adobe.com/devnet/photoshop/scripting.html}
+    \note See the \l {https://www.adobe.com/devnet/photoshop/scripting.html}
     {Adobe Photoshop CC Javascript} scripting guide to understand the object model and \e Document
     and \e Layer instances.
 
-    \image qt-bridge-override.png
+    \image {qt-bridge-override.png} {The Script Path field highlighted in the settings.}
 
     In the \QBPS \uicontrol Settings dialog, select \uicontrol {Override JSX Script} to set the
     override JSX script.
@@ -317,14 +317,14 @@
     Select the \uicontrol Import button to launch the \uicontrol Import panel. Alternatively, \QB
     import can be launched from \uicontrol Window > \uicontrol Extensions.
 
-    \image qt-bridge-import.png
+    \image {qt-bridge-import.png} {The Qt Bridge import dialog.}
 
     Create a new PSD document and launch the \uicontrol Import dialog. Open the metadata file to
     import and select \uicontrol Import.
 
     \note The import process removes all the existing layers in the selected PSD document.
 
-    \image qt-bridge-import-warning.png
+    \image {qt-bridge-import-warning.png} {An import warning in the Qt Bridge import dialog.}
 
     The following guidelines are followed to generate the Photoshop document:
     \list
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc
index 12156d6733b..118bc1f5042 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-overview.qdoc
@@ -13,7 +13,7 @@
     You can use \QBSK to export designs from Sketch to \e {.metadata}
     format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image studio-sketch-export.png
+    \image {studio-sketch-export.png} {Qt Bridge for Sketch open in Sketch.}
 
     The following topics describe setting up and using \QBSK:
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
index d052bf3138c..69e815f8f64 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-sketch-using.qdoc
@@ -160,7 +160,7 @@
     component in \QDS. Or you could export a button as a Qt Quick Controls
     \l Button component.
 
-    \image qt-sketch-bridge.png
+    \image {qt-sketch-bridge.png} {Qt Bridge for Sketch open with default settings.}
 
     \section2 Specifying settings for exporting assets
 
@@ -253,7 +253,7 @@
     You can export assets into JPG, PNG, or SVG format. To specify export path
     and asset format, select \uicontrol Settings.
 
-    \image qt-sketch-bridge-settings.png
+    \image {qt-sketch-bridge-settings.png} {Qt Bridge for Sketch export settings with export path and asset format specified.}
 
     \QBSK exports assets to a .qtbridge archive named after your
     Sketch file. By default, the directory is  located inside the parent directory
@@ -303,5 +303,5 @@
     To export a library, select \uicontrol Export. \QBSK asks you whether you want to export the
     complete library or to unlink the symbols.
 
-    \image qt-sketch-bridge-library.png
+    \image {qt-sketch-bridge-library.png} {Qt Bridge for Sketch Export Library dialog.}
 */
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-overview.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-overview.qdoc
index 13442251676..edf28dca206 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-overview.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-overview.qdoc
@@ -16,7 +16,7 @@
     You can use \QBXD to export designs from Adobe XD to \e {.qtbridge}
     format that you can \l{Importing 2D Assets}{import} to projects in \QDS.
 
-    \image qt-bridge-xd.png
+    \image {qt-bridge-xd.png} {The Qt Bridge for Adobe XD open in Adobe XD.}
 
     The following topics describe setting up and using \QBXD:
 
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-setup.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-setup.qdoc
index a20bfddd969..e9087911f3b 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-setup.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-setup.qdoc
@@ -29,7 +29,7 @@
     \note Since the plugin is not distributed through Adobe's marketplace, during
     the installation Adobe XD might warn about the third-party developer.
 
-    \image qt-bridge-xd-warn.png
+    \image {qt-bridge-xd-warn.png} {The Install Qt Bridge plugin warning dialog.}
 
     You can launch the plugin from \uicontrol Plugins > \uicontrol {\QB}.
 */
diff --git a/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-using.qdoc b/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-using.qdoc
index 0bc76b1eca5..647beea35b0 100644
--- a/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-using.qdoc
+++ b/doc/qtdesignstudio/src/qtbridge/qtbridge-xd-using.qdoc
@@ -68,7 +68,7 @@
     exported. The \uicontrol {Home} panel displays and allows layer annotation for
     export.
 
-    \image qt-bridge-xd-home.png
+    \image {qt-bridge-xd-home.png} {The Qt Bridge for Adobe XD home panel.}
 
     \list 1
         \li In the \uicontrol ID field, enter a unique and descriptive name.
@@ -180,8 +180,8 @@
     \list 1
       \li Select \uicontrol Settings.
 
-          \image qt-bridge-xd-menu.png
-          \image qt-bridge-xd-settings.png
+          \image {qt-bridge-xd-menu.png} {Settings selected in the file menu.}
+          \image {qt-bridge-xd-settings.png} {The Qt Bridge for Adobe XD Settings panel.}
       \li You can now edit the following settings:
 
         \list
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-exporting-and-importing.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-exporting-and-importing.qdoc
index bc5ccdc12ab..55d4708fc72 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-exporting-and-importing.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-exporting-and-importing.qdoc
@@ -19,7 +19,7 @@
 
     The following image describes the workflow in a basic way using \QBPS and \QDS:
 
-    \image studio-workflow.png
+    \image {studio-workflow.png} {The complete designer-developer workflow from design tool to a finished application.}
 
     The workflow consists of the following steps:
 
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-qt-runtime-version.qdocinc b/doc/qtdesignstudio/src/qtdesignstudio-qt-runtime-version.qdocinc
index fb74f9180db..c92a1545bd4 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-qt-runtime-version.qdocinc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-qt-runtime-version.qdocinc
@@ -5,6 +5,6 @@
     \QDS runs projects using a specific version of Qt.
     In \QDS, find the Qt runtime version in the bottom toolbar.
 
-    \image studio-qt-development-kit.webp
+    \image {studio-qt-development-kit.webp} {The kit selector dropdown menu in the bottom toolbar.}
 //! [qt-runtime-version]
 */
diff --git a/doc/qtdesignstudio/src/qtdesignstudio-using-effect-maker-effects.qdoc b/doc/qtdesignstudio/src/qtdesignstudio-using-effect-maker-effects.qdoc
index 42588f7d2b4..0a97a5e4dc4 100644
--- a/doc/qtdesignstudio/src/qtdesignstudio-using-effect-maker-effects.qdoc
+++ b/doc/qtdesignstudio/src/qtdesignstudio-using-effect-maker-effects.qdoc
@@ -23,11 +23,11 @@
       \li Right-click in the \uicontrol Assets view and
       select \uicontrol {New Effect}.
       \QDS creates an effect file and opens it in \QQEM.
-      \image qt-quick-effect-maker.webp
+      \image {qt-quick-effect-maker.webp} {The Qt Effect Maker default view.}
       \li Edit the effect.
       \li In \QQEM, go to \uicontrol File > \uicontrol Save.
       \li With the default settings, select \uicontrol OK.
-      \image effect-maker-export.png
+      \image {effect-maker-export.png} {Qt Effect Maker export effect dialog.}
     \endlist
 
     Now, you can close \QQEM and return to \QDS and apply the
@@ -39,6 +39,6 @@
     from the \uicontrol Assets view to the component in the \uicontrol 2D or
     \uicontrol Navigator view.
 
-    \image apply-effect-maker-effect.webp
+    \image {apply-effect-maker-effect.webp} {Qt Design Studio with a Qt Effect Maker effect applied.}
 
 */
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
index f40b0633e04..bd598bc4399 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-camera.qdoc
@@ -137,7 +137,7 @@
       \li In \uicontrol Navigator, select the camera.
       \li In \uicontrol Properties > \uicontrol {Look-at-Node}, select the object that
       the camera should look at.
-      \image camera-look-at-node.webp
+      \image {camera-look-at-node.webp} {Selecting the Look-at-Node object in the Camera sections in the Properties view.}
     \endlist
 
     When you set a camera to look at an object, the camera automatically rotates to
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
index 9b365110a77..b26d9c962c4 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-editor.qdoc
@@ -186,7 +186,7 @@
 
     In the 3D view, you can show a small window displaying the camera view.
 
-    \image 3d-view-camera-view.webp
+    \image {3d-view-camera-view.webp} {The Camera view in the 3D view.}
 
     To toggle this view,
     select \imagevisibilityon
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-importing.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-importing.qdoc
index cafa97421a5..b98be425d0b 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-importing.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-importing.qdoc
@@ -23,7 +23,7 @@
     For more information about exporting 3D graphics, see
     \l{Exporting 3D assets}.
 
-    \image studio-import-3d.webp
+    \image {studio-import-3d.webp} {The Asset Import dialog.}
 
     \section1 Importing a 3D asset
 
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
index 8b4f76e90f1..56191e5b602 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-lights.qdoc
@@ -249,7 +249,7 @@
       \li Select \uicontrol Bake.
     \endlist
 
-    \image bake-lights-dialog.png
+    \image {bake-lights-dialog.png} {The Lights Baking Setup dialog.}
 
     \section2 Manually baking lightmaps for a 3D model
 
@@ -261,7 +261,7 @@
     \list 1
       \li From \uicontrol Components, drag a \uicontrol {Baked Lightmap} component
           to the 3D model in the \uicontrol Navigator view.
-      \image baked-lightmaps-navigator.png
+      \image {baked-lightmaps-navigator.png} {The Baked Lightmap component in the Navigator view.}
       \li In the \uicontrol Navigator view, select \e bakedLightmap, and in the
           \uicontrol Properties view:
         \list
@@ -289,15 +289,15 @@
     \list 1
       \li In the \uicontrol Navigator view, right-click the subcomponent and select
       \uicontrol {Edit Component}.
-      \image baked-lightmaps-edit-component.png
+      \image {baked-lightmaps-edit-component.png} {Selecting Edit Component from the context menu in the Navigator view.}
       \li In the \uicontrol Navigator view, select the root component.
       \li In the \uicontrol Properties view, select \imageplus
       in the \uicontrol {Local Custom Properties} section.
       \li Add a new property, set \uicontrol Type to alias.
-      \image baked-lightmaps-add-property.png
+      \image {baked-lightmaps-add-property.png} {The Add New Property dialog.}
       \li For the property, set the value to the ID of the 3D model that you want
       to bake lightmaps for.
-      \image baked-lightmaps-property-value.png
+      \image {baked-lightmaps-property-value.png} {The custom property set to sphere in the Local Custom Tab in the Properties view.}
       \li In the \uicontrol Navigator view, select the 3D model and in the \uicontrol Properties
       view:
         \list
@@ -306,10 +306,10 @@
         \endlist
       \li Save your changes (\key {Ctrl+S}) and return to the main project file. To do this, select
       the bread crumb in the top toolbar.
-      \image baked-lightmaps-exit-component.png
+      \image {baked-lightmaps-exit-component.png} {Selecting the main project file bread crumb in the top toolbar.}
       \li From the \uicontrol Components view, drag a \uicontrol {Baked Lightmap} component to the
       subcomponent in the \uicontrol Navigator view.
-      \image baked-lightmaps-navigator-blm.png
+      \image {baked-lightmaps-navigator-blm.png} {The Baked Lightmap component in the Navigator view.}
       \li In the \uicontrol Navigator view, select the subcomponent and go to the
       \uicontrol Code view.
       \li In the \uicontrol Code view, you need to set the properties for the model inside the sub
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc
index f9034f4a227..7d33d87540e 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-loader-3d.qdoc
@@ -67,10 +67,10 @@
       \li From \uicontrol {Components}, drag a \uicontrol Loader3D component to
       \e scene in the \uicontrol Navigator or \uicontrol{3D} view.
       \li In \uicontrol {Navigator}, select \e{loader3D}.
-      \image loader3d-navigator.png
+      \image {loader3d-navigator.png} {The loader3D component in the Navigator view.}
       \li In \uicontrol {Properties}, select \uicontrol{Source} and select a
       QML file.
-      \image loader3d-select-source.png
+      \image {loader3d-select-source.png} {Setting the Loader3D Source setting in the Properties view.}
     \endlist
 
     \section1 Setting Loader3D to load a Component3D component
@@ -85,12 +85,12 @@
       \li In \uicontrol {Navigator}, select the filter icon and clear
       \uicontrol {Show Only Visible Components}. This makes the \uicontrol Component3D
       component visible in \uicontrol Navigator.
-      \image navigator-show-all-loader.png
+      \image {navigator-show-all-loader.png} {Toggling component visibility in the Navigator view.}
       \li In \uicontrol {Navigator}, select \e{loader3D}.
       \li In \uicontrol {Properties}, select \uicontrol{Source Component}
       and select \e {component3D}.
 
-      \image loader3d-select-source-component.png
+      \image {loader3d-select-source-component.png} {Selecting Source Component in the Properties view.}
     \endlist
 
     \section1 Setting the Visibility of loading components
@@ -101,7 +101,7 @@
         \list 1
             \li In \uicontrol Properties > \uicontrol Loader3D, select the
                 \uicontrol Asynchronous check box.
-                \image loader3d-visibility.png
+                \image {loader3d-visibility.png} {The Asynchronous setting turned on in the Properties view.}
             \li In \uicontrol {Visibility},
                 select \imageactionicon
                 to open the actions menu, and then select \uicontrol {Set Binding}.
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-particles.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-particles.qdoc
index 14cc442158e..6834b5005b2 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-particles.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-particles.qdoc
@@ -311,7 +311,7 @@
       \uicontrol Navigator. You can also drag it to the \uicontrol{3D} view.
     \endlist
 
-    \image studio-3d-particles-sprite-template.png
+    \image {studio-3d-particles-sprite-template.png} {The particle system template components in the Component view.}
 
     \section1 Performance considerations
 
@@ -536,7 +536,7 @@
     Specify properties for line particles in \uicontrol Properties >
     \uicontrol {Line Particle}.
 
-    \image studio-3d-properties-line-particle.png
+    \image {studio-3d-properties-line-particle.png} {The Line Particle properties in the Properties view.}
 
     \uicontrol {Segments} defines the number of segments in each line.
 
@@ -845,7 +845,7 @@
     Specify properties for emit bursts in \uicontrol Properties >
     \uicontrol {Dynamic Burst}.
 
-    \image studio-3d-properties-particle-dynamic-burst.png
+    \image {studio-3d-properties-particle-dynamic-burst.png} {The Dynamic Burst properties in the Properties view.}
 
     \uicontrol {Trigger Mode} defines when the burst is triggered:
 
@@ -1022,7 +1022,7 @@
     Specify settings for \uicontrol Repeller component instances in
     \uicontrol Properties > \uicontrol {Particle Repeller}.
 
-    \image studio-3d-properties-particle-repeller.png
+    \image {studio-3d-properties-particle-repeller.png} {The Repeller properties in the Properties view.}
 
     \uicontrol {Outer Radius} defines the outer radius of the repeller. The
     particle is not affected until it enters this radius and the repel
@@ -1038,7 +1038,7 @@
     \uicontrol {Scale Affector} scales particles based on their lifetime and
     other parameters.
 
-    \image studio-3d-properties-particle-scale-affector.png
+    \image {studio-3d-properties-particle-scale-affector.png} {The Particle Scale Affector properties in the Properties view.}
 
     \uicontrol {Minimum Size} defines the minimum size that the affector can
     scale particles to.
diff --git a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc
index ec3ed257926..87632a6e703 100644
--- a/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc
+++ b/doc/qtdesignstudio/src/qtquick3d-editor/qtdesignstudio-3d-repeater-3d.qdoc
@@ -74,7 +74,7 @@
       \e scene in \uicontrol Navigator.
       \li Select \e repeater3D in \uicontrol Navigator and in
       \uicontrol Properties, set \uicontrol Model to 4.
-      \image repeater3d-model-property.png
+      \image {repeater3d-model-property.png} {The Repeater Model property set to 4 in the Properties view.}
     \endlist
     Now, you have set up the \uicontrol Repeater3D component to use a numeric
     model that draws four instances of the same item. Next, you need to add the
@@ -90,11 +90,11 @@
       \li Select \uicontrol {Set binding} to open \uicontrol {Binding Editor}.
       \li In the binding editor, enter \c{index * 150}. This sets the X
       location to increase by 150 for each of the cube instances.
-      \image repeater3d-index-binding.png
+      \image {repeater3d-index-binding.png} {index * 150 set in Bindings Editor.}
       \li Select \uicontrol OK and go to the \uicontrol{3D} view to see the
       result.
     \endlist
-    \image repeater3d-numeric-model.webp
+    \image {repeater3d-numeric-model.webp} {Four cubes rendered with the Repeater component in the 3D view.}
 
     \section1 Adding a Repeater3D component with a List Model
 
@@ -172,7 +172,7 @@
     \list 1
       \li From \uicontrol Components, drag a \uicontrol Sphere to \e _3DRepeater
       in \uicontrol Navigator.
-      \image repeater3d-listmodel-navigator.png
+      \image {repeater3d-listmodel-navigator.png} {The Sphere component in the Navigator view.}
       \li Select \e sphere in \uicontrol Navigator and in the \uicontrol Properties view, select
       \imageactionicon
       next to \uicontrol Scale > \uicontrol X.
@@ -180,7 +180,7 @@
       \li In the binding editor, enter \c{radius}. This sets the X
       scale to the radius value defined in the list model for each of the sphere
       instances.
-      \image repeater3d-radius-binding.png
+      \image {repeater3d-radius-binding.png} {radius set in Binding Editor.}
       \li Select \uicontrol OK.
       \li Repeat steps 2 to 5 for \uicontrol Scale > \uicontrol Y and
       \uicontrol Scale > \uicontrol Z.
@@ -196,7 +196,7 @@
       \li Select \uicontrol {Set binding} to open \uicontrol {Binding Editor}.
       \li In the binding editor, enter \c{index * 1000}. This sets the X
       location to increase by 1000 for each of the sphere instances.
-      \image repeater3d-location-binding.png
+      \image {repeater3d-location-binding.png} {index * 1000 set in Binding Editor.}
       \li Select \uicontrol OK and go to the \uicontrol{3D} view to see the
       result. You need to zoom out to see all the spheres.
     \endlist
diff --git a/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc b/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc
index e0b24f21772..077b953a67f 100644
--- a/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc
+++ b/doc/qtdesignstudio/src/qtquickdesigner-components/qtdesignstudio-logic-helpers.qdoc
@@ -246,7 +246,7 @@
     is under or over the going value. We then use \uicontrol {And Operator}
     components to determine whether the value is below minimum or above maximum.
 
-    \image studio-logic-helper-combining-example.gif
+    \image {studio-logic-helper-combining-example.gif} {An animated example of an app combining several logic helpers.}
 
     We use one \uicontrol {String Mapper} component to map the
     slider value to a \uicontrol Text component that displays the price, as
@@ -295,7 +295,7 @@
     and sell hints. For this purpose, we create the states and set
     \c when conditions for them.
 
-    \image studio-logic-helper-combining-example.png
+    \image {studio-logic-helper-combining-example.png} {The different stats of the app in the States view.}
 
     First, we create a \e tooLow state and set a \c when condition to
     apply it when the value of the \uicontrol {Below min} field of
diff --git a/doc/qtdesignstudio/src/reference/qtdesignstudio-keyboard-shortcuts.qdoc b/doc/qtdesignstudio/src/reference/qtdesignstudio-keyboard-shortcuts.qdoc
index 3d1b1d00821..646876a3bfa 100644
--- a/doc/qtdesignstudio/src/reference/qtdesignstudio-keyboard-shortcuts.qdoc
+++ b/doc/qtdesignstudio/src/reference/qtdesignstudio-keyboard-shortcuts.qdoc
@@ -14,7 +14,7 @@
     To view all \QDS functions in and their keyboard shortcuts, select
     \preferences > \uicontrol Environment > \uicontrol Keyboard.
 
-    \image qtcreator-keyboard-shortcuts.png
+    \image {qtcreator-keyboard-shortcuts.png} {Keyboard shortcut settings.}
 
     The shortcuts that are displayed in red color are associated with several
     functions. \QDS executes the function that is available in the current
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc
index cc7f1e2cdb5..e91adb949fd 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor-bindings.qdoc
@@ -25,7 +25,7 @@
 
     You can create bindings between components in \uicontrol Bindings.
 
-    \image qmldesigner-bindings.webp
+    \image {qmldesigner-bindings.webp} {The Bindings tab in the Connections view.}
 
     \section1 Creating bindings between component properties
 
@@ -35,7 +35,7 @@
 
         \li Place two components in the \uicontrol {2D} view.
 
-        \image qmldesigner-components-before-binding.webp
+        \image {qmldesigner-components-before-binding.webp} {Two components next to each other in the 2D view.}
 
         \li Name the first component as \e {viewBox}.
         \li Name the second component as \e {connectBox}.
@@ -46,7 +46,7 @@
              (\uicontrol Add) button to add a binding to the currently selected
             component.
 
-        \image qmldesigner-updated-bindings-editor.webp
+        \image qmldesigner-updated-bindings-editor.webp {The Add Binding dialog.}
 
         \li From the pop-up \uicontrol {Bindings editor}, in the \uicontrol From section,
             select \e {viewBox} as the parent component, then select its \uicontrol {border.color}
@@ -58,7 +58,7 @@
             instantly getting applied to the \uicontrol {color} of the \e {connectBox}
             component.
 
-        \image qmldesigner-components-after-binding.webp
+        \image qmldesigner-components-after-binding.webp {Two components next to each other in the 2D view with the property binding applied.}
 
     \endlist
 
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc
index fd5e13e23f6..8cf4e901f8f 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor-properties.qdoc
@@ -40,9 +40,9 @@
         \li Select the \imageplus
             (\uicontrol Add) button to add a custom property for the currently
             selected component.
-            \image add-local-custom-property.png
+            \image {add-local-custom-property.png} {Selecting the Add button in the Properties view.}
         \li Set the \uicontrol Name and \uicontrol Type for the property.
-            \image add-new-property-dialog.png
+            \image {add-new-property-dialog.png} {Selecting the Type for the property in the Add New Property dialog.}
     \endlist
 
     \section1 Binding a property value
@@ -69,14 +69,14 @@
             \uicontrol {2D} view or in the \uicontrol {Navigator} view.
         \li Select \uicontrol {Properties} from the \uicontrol {Connections} view.
 
-            \image add-updated-local-custom-property.webp
+            \image {add-updated-local-custom-property.webp} {The Properties tab in the Connections view.}
 
         \li Select the \imageplus
              (\uicontrol Add) button to add a Custom property.
         \li From the pop-up \uicontrol {Custom property editor}, select the \uicontrol {Type}
             of the property you want to include.
 
-            \image add-updated-local-custom-property-editor.webp
+            \image {add-updated-local-custom-property-editor.webp} {The Custom Property Editor dialog.}
 
         \li Next, set the \uicontrol{Name} of the property.
         \li Set a value to the Custom property in the \uicontrol {Value} field.
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc
index 683a01e2921..f231a9fcf74 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-editor-signals.qdoc
@@ -45,7 +45,7 @@
     put \b {logical conditions} on this \uicontrol Actions to control them
     according to your needs.
 
-    \image qmldesigner-connections-advanced.webp
+    \image {qmldesigner-connections-advanced.webp} {The Connections tab in the Connections view.}
 
     Initiate a new connection for a component:
 
@@ -57,7 +57,7 @@
             (\uicontrol Add) button to add a connection.
     \endlist
 
-    \image qmldesigner-connections-editor.webp
+    \image {qmldesigner-connections-editor.webp} {The Add Connection dialog.}
 
     Connect component \uicontrol Signal to \uicontrol Action:
 
@@ -108,7 +108,7 @@
       \li Follow the steps described above in Connect component \uicontrol Signal to
           \uicontrol Action. For a list of \uicontrol Actions and their properties, see
           \l {Action Properties}.
-          \image qmldesigner-connections-ConditionalAction-Autometic.webp
+          \image {qmldesigner-connections-ConditionalAction-Autometic.webp} {The Add Connection dialog with a JavaScript expression.}
       \li Open the \uicontrol {Manual Code Edit} window from the
           \uicontrol {Connections} view and write JavaScript expressions with components
           and logical expressions manually.
@@ -118,7 +118,7 @@
             level \e {if-else} expression. For nested level \e {if-else} expressions,
             use the \uicontrol {Manual Code Edit}.
 
-        \image qmldesigner-connections-ConditionalAction-Manual.webp
+        \image {qmldesigner-connections-ConditionalAction-Manual.webp} {A JavaScript code snippet in the Manual Code Edit dialog.}
     \endlist
 
     \section2 Action properties
diff --git a/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc b/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc
index 8238dc1b467..d5b90450eec 100644
--- a/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-navigator.qdoc
@@ -162,7 +162,7 @@
     (\uicontrol Export) button in \uicontrol Navigator to export
     a component as a property alias with a valid alias reference.
 
-    \image qmldesigner-export-item.png
+    \image {qmldesigner-export-item.png} {Selecting the Export button in the Navigator view.}
 
     You can then use the property alias in other components to
     \l{Working with connections}{create connections} to this component.
diff --git a/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc
index 84faad338d9..24d1d7a80b3 100644
--- a/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-properties-view.qdoc
@@ -44,7 +44,7 @@
         \li A property that has been added inside a component.
     \endtable
 
-    \image custom-properties.png
+    \image {custom-properties.png} {Local Custom Properties and Exposed Custom Properties settings in the Settings view.}
 
     \section1 Viewing changes in properties
 
@@ -81,21 +81,21 @@
 
     \table
         \row
-            \li \image qmldesigner-boolean-true.png
+            \li \image {qmldesigner-boolean-true.png} {The Visibility property selected but not highlighted.}
             \li TRUE
             \li The component is visible by default. The visibility might be
                 overridden by the visibility set in the base state.
         \row
-            \li \image qmldesigner-boolean-true-blue.png
+            \li \image {qmldesigner-boolean-true-blue.png} {The Visibility property selected and highlighted.}
             \li TRUE (highlighted)
             \li The component is explicitly set to visible.
         \row
-            \li \image qmldesigner-boolean-false.png
+            \li \image {qmldesigner-boolean-false.png} {The Visibility property not selected and not highlighted.}
             \li FALSE
             \li The component is hidden by default. The visibility might be
                 overridden by the visibility set in the base state.
         \row
-            \li \image qmldesigner-boolean-false-blue.png
+            \li \image {qmldesigner-boolean-false-blue.png} {The Visibility property not selected but highlighted.}
             \li FALSE (hightlighted)
             \li The component is explicitly set to hidden.
     \endtable
diff --git a/doc/qtdesignstudio/src/views/qtquick-properties.qdoc b/doc/qtdesignstudio/src/views/qtquick-properties.qdoc
index f4ff275ec14..c31ca5d33f3 100644
--- a/doc/qtdesignstudio/src/views/qtquick-properties.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-properties.qdoc
@@ -208,7 +208,7 @@
     or \uicontrol Vertical in the \uicontrol {Gradient Controls} section of the
     color picker.
 
-    \image qtquick-designer-gradient-stops.gif
+    \image {qtquick-designer-gradient-stops.gif} {An Animation showing how to add and remove gradient stops.}
 
     Calculating gradients can be computationally expensive compared to the
     use of solid color fills or images. Consider using gradients only for
@@ -462,5 +462,5 @@
     you can also right-click components to open the inline editors from the
     context menu.
 
-    \image qmldesigner-inline-editing.png
+    \image qmldesigner-inline-editing.png {Selecting Edit Color from the context menu in the 2D view.}
 */
diff --git a/doc/qtdesignstudio/src/views/qtquick-states.qdoc b/doc/qtdesignstudio/src/views/qtquick-states.qdoc
index a3daed09935..b87789f790a 100644
--- a/doc/qtdesignstudio/src/views/qtquick-states.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-states.qdoc
@@ -183,10 +183,10 @@
 
     Here, extended states are not used:
 
-    \image no-extended-state.webp
+    \image {no-extended-state.webp} {Three states in the States view with no extended state.}
 
     Here, \e State2 is extended from \e State1:
 
-    \image extended-state.webp
+    \image {extended-state.webp} {Three states in the States view with State2 extended from State1.}
 
 */
diff --git a/doc/qtdesignstudio/src/views/qtquick-timeline.qdoc b/doc/qtdesignstudio/src/views/qtquick-timeline.qdoc
index 715a822fc51..82843990428 100644
--- a/doc/qtdesignstudio/src/views/qtquick-timeline.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-timeline.qdoc
@@ -37,7 +37,7 @@
                 of the timeline. Negative values are allowed.
                 \li In the \uicontrol {End frame} field, set the last frame
                 of the timeline.
-                \image timeline-settings-dialog.png
+                \image {timeline-settings-dialog.png} {The Timeline Settings dialog.}
             \endlist
         \li On the \uicontrol {Animation Settings} tab:
             \list
@@ -87,13 +87,13 @@
        . This creates another timeline.
        \li In the table below the \uicontrol {Animation Settings} tab, set the
        Timeline for the state where you want to use it.
-       \image timeline-settings-dialog-second.png
+       \image {timeline-settings-dialog-second.png} {Two timelines in the Timeline Settings dialog.}
     \endlist
     To set the keyframe values for the timeline you created, first select the
     state in \uicontrol {States} and the timeline is available in
     \uicontrol{Timelines}.
 
-    \image timeline-states.webp
+    \image {timeline-states.webp} {The Timeline and States views.}
 
     \section2 Setting keyframe values
 
@@ -114,11 +114,11 @@
         \li In the \l Properties view, select \imageactionicon
             (\uicontrol Actions) > \uicontrol {Insert Keyframe} for the property
             that you want to animate.
-            \image timeline-insert-keyframe.png
+            \image {timeline-insert-keyframe.png} {Selecting Insert Keyframe from the Action drop-down menu in the Properties view.}
         \li In the \l Timeline view, select the
             \uicontrol {Per Property Recording} button
             to start recording property changes.
-            \image timeline-per-property-recording.webp
+            \image {timeline-per-property-recording.webp} {Selecting the Per Property Recording button in the Timeline view.}
         \li Ensure that the playhead is in frame 0 and enter the value of the
             property in the field next to the property name on the timeline.
             Select \key Enter to save the value.
@@ -155,7 +155,7 @@
         next to the \uicontrol {Animation Settings} tab to delete the
         animation. If you have several animations, delete all.
         \li In \uicontrol {Expression binding}, enter \c {slider.value}.
-        \image timeline-settings-property-binding.png
+        \image {timeline-settings-property-binding.png} {Expression binding set to slider.value in the Timeline Settings dialog.}
     \endlist
 
     \section2 Binding animations to states
@@ -172,7 +172,7 @@
           the timeline with the animation you want to bind to the state.
           \li Double-click the value in the \uicontrol Animation field and
           select the animation you want to bind to the state.
-          \image timeline-bind-animation-state.png
+          \image {timeline-bind-animation-state.png} {Selecting an Animation in the Timeline Settings dialog window to bind it to a state.}
         \endlist
     \endlist
     To bind a state to a certain keyframe in an animation without running the
diff --git a/doc/qtdesignstudio/src/views/studio-content-library.qdoc b/doc/qtdesignstudio/src/views/studio-content-library.qdoc
index 2bbb3d6e691..9d71b3d0677 100644
--- a/doc/qtdesignstudio/src/views/studio-content-library.qdoc
+++ b/doc/qtdesignstudio/src/views/studio-content-library.qdoc
@@ -26,7 +26,7 @@
     Assets added to \uicontrol {User Assets} are always available in \uicontrol {Content Library}
     regardless of what project you are working on.
 
-    \image content-library.webp
+    \image {content-library.webp} {The Materials tab in the Content Library view.}
 
     \section1 Adding a material to your project
 
@@ -86,7 +86,7 @@
 
     \section1 User Assets
 
-    \image user-assets.webp
+    \image {user-assets.webp} {The User Assets tab in the Content Library view.}
 
     Add assets to \uicontrol {User Assets} to access them in any project.
 
diff --git a/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc b/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc
index ef77d6e3641..65dbbf3f8d2 100644
--- a/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc
+++ b/doc/qtdesignstudio/src/views/studio-qtinsight.qdoc
@@ -21,7 +21,7 @@
     \l{https://www.qt.io/product/insight/onboarding-instructions}{Getting Started with Qt Insight}
     documentation.
 
-    \image qt-insight-view.png
+    \image {qt-insight-view.png} {The Qt Insight view.}
 
     In \QDS, you can do the following with Qt Insight:
     \list
diff --git a/doc/qtdesignstudio/src/views/studio-translations.qdoc b/doc/qtdesignstudio/src/views/studio-translations.qdoc
index f4f9310478d..c31faaa56a0 100644
--- a/doc/qtdesignstudio/src/views/studio-translations.qdoc
+++ b/doc/qtdesignstudio/src/views/studio-translations.qdoc
@@ -106,13 +106,13 @@
           \li \uicontrol{Exceeds boundaries} highlights translations where
           the text is too long to fit in the text object.
         \endlist
-        \image translation-tester.png
+        \image {translation-tester.png} {The Translation Tester dialog with all highlights selected.}
       \li Select \uicontrol{Run Tests}.
     \endlist
 
     When the test has completed, you can see the test result highlights in
     the \uicontrol {2D} view.
-    \image qml-translation-test-result.png
+    \image {qml-translation-test-result.png} {The Test Results dialog.}
 
     If the test finds an error, it is highlighted for all languages. For
     example, if a translation is missing for Swedish, it is also highlighted