Doc: Update images for timeline docs

Task-number: QDS-9395
Change-Id: I6d2b394acb3a530bfac60cc2e363d89abec49bb3
Reviewed-by: Leena Miettinen <riitta-leena.miettinen@qt.io>

doc/qtdesignstudio/src/views/qtquick-timeline-view.qdoc

@@ -26,7 +26,7 @@
     It now displays a \l{Timeline Toolbar}{toolbar} and a ruler but no
     keyframe tracks.
 
-    \image studio-timeline-no-tracks.png "Timeline view without keyframe tracks"
+    \image studio-timeline-no-tracks.webp "Timeline view without keyframe tracks"
 
     To animate component properties in the \uicontrol Timeline view, you
     must \l{Setting Keyframe Values}{insert keyframes} for them. In the
@@ -35,7 +35,7 @@
     want to animate. A keyframe track is generated for each component that you
     insert keyframes for.
 
-    \image studio-timeline-with-empty-tracks.png "Timeline view with a property"
+    \image studio-timeline-with-empty-tracks.webp "Timeline view with a property"
 
     You can now select \inlineimage icons/local_record_keyframes.png
     to \l{Setting Keyframe Values}{record changes} in component properties
@@ -56,7 +56,7 @@
 
     \section1 Navigating in Timeline
 
-    \image studio-timeline.png "Timeline view"
+    \image studio-timeline.webp "Timeline view"
 
     You can navigate the timeline in the following ways:
 
@@ -87,7 +87,7 @@
     in the context menu, and then select a color in the \l{Picking Colors}
     {color picker}. To reset the color, select \uicontrol {Reset Color}.
 
-    \image studio-timeline-keyframe-track-colors.png "Keyframe track colors in Timeline"
+    \image studio-timeline-keyframe-track-colors.webp "Keyframe track colors in Timeline"
 
     \section1 Timeline Toolbar
 

doc/qtdesignstudio/src/views/qtquick-timeline.qdoc

@@ -93,7 +93,7 @@
     state in \uicontrol {States} and the timeline is available in
     \uicontrol{Timelines}.
 
-    \image timeline-states.png
+    \image timeline-states.webp
 
     \section2 Setting Keyframe Values
 
@@ -118,7 +118,7 @@
         \li In the \l Timeline view, select the
             \uicontrol {Per Property Recording} button
             to start recording property changes.
-            \image timeline-per-property-recording.png
+            \image timeline-per-property-recording.webp
         \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.
             Press \key Enter to save the value.
@@ -180,7 +180,7 @@
 
     \section1 Managing Keyframes
 
-    \image studio-timeline-with-tracks.png "Timeline view"
+    \image studio-timeline-with-tracks.webp "Timeline view"
 
     \section2 Editing Keyframes