diff --git a/doc/qtdesignstudio/images/qmldesigner-connections.png b/doc/qtdesignstudio/images/qmldesigner-connections.png
deleted file mode 100644
index 605dc835784..00000000000
Binary files a/doc/qtdesignstudio/images/qmldesigner-connections.png and /dev/null differ
diff --git a/doc/qtdesignstudio/images/qmldesigner-connections.webp b/doc/qtdesignstudio/images/qmldesigner-connections.webp
new file mode 100644
index 00000000000..5a49a316fe6
Binary files /dev/null and b/doc/qtdesignstudio/images/qmldesigner-connections.webp differ
diff --git a/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc b/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc
index 93fbdc7ea7a..5cc2c4a6670 100644
--- a/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc
+++ b/doc/qtdesignstudio/src/views/qtquick-connection-view.qdoc
@@ -12,7 +12,7 @@
     to create connections between components and the application, to bind
     component properties together, and to add custom properties for components.
 
-    \image qmldesigner-connections.png "The Connections view"
+    \image qmldesigner-connections.webp "The Connections view"
 
     The \l{glossary-component}{components} of the application UI and the
     application logic need to communicate with each other. For example, a