💄 viewmode webp images

user-guide/view-mode/index.njk

@@ -8,8 +8,8 @@ title: 12· View mode
 <h3 id="viewmode-interface">View mode interface</h3>
 <p>Take a look at the anatomy of the View mode at this section: <a href="/user-guide/the-interface/#viewmode-interface">View mode interface</a>.</p>
 <figure>
-  <a href="/img/interface/viewmode-dark.png" target="_blank">
-    <img src="/img/interface/viewmode-dark.png" alt="Penpot's viewmode" />
+  <a href="/img/interface/viewmode-dark.webp" target="_blank">
+    <img src="/img/interface/viewmode-dark.webp" alt="Penpot's viewmode" />
   </a>
 </figure>
 
@@ -17,7 +17,7 @@ title: 12· View mode
 <p>To view your designs from the workspace at View mode click the play button at the top right of the navbar or press <kbd>G</kbd> <kbd>V</kbd>.</p>
 <p><strong>Note:</strong> the View mode shows only boards and their contents. Anything outside a board will not be shown at the View mode.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-play.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-play.webp" alt="Penpot's viewmode" />
 </figure>
 
 <h3 id="viewmode-features">Features and options</h3>
@@ -31,19 +31,19 @@ title: 12· View mode
 <h4>Interactions view settings</h4>
 <p>This setting allows you to decide how to show a visual cue for interactions: always, on click or just don't show.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-interactions.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-interactions.webp" alt="Penpot's viewmode" />
 </figure>
 
 <h4>Boards list</h4>
 <p>Display the boards list by clicking on the board name at the header and have a nice overview of all the available boards at this page.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-boards.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-boards.webp" alt="Penpot's viewmode" />
 </figure>
 
 <h4>Pages list</h4>
 <p>Click at the page name at the header to display the pages menu and change between them.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-pages.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-pages.webp" alt="Penpot's viewmode" />
 </figure>
 
 <h4>Zooming options</h4>
@@ -70,7 +70,7 @@ title: 12· View mode
 <p>You can activate comments at the View mode by pressing the comments icon at the top navbar.</p>
 <p class="advice">At the View mode only boards are shown so the comments that are placed outside boards will not be shown here.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-comment.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-comment.webp" alt="Penpot's viewmode" />
 </figure>
 
 
@@ -80,19 +80,19 @@ title: 12· View mode
 <h4>Get link</h4>
 <p>To create a link press the button "Get link" and the link will be automatically created.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-share-create.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-share-create.webp" alt="Penpot's viewmode" />
 </figure>
 
 <h4>Copy link</h4>
 <p>To copy the link you can copy the url or press the copy button.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-share-copy.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-share-copy.webp" alt="Penpot's viewmode" />
 </figure>
 
 <h4>Destroy link</h4>
 <p>To <strong>destroy a link</strong> press the button "Destroy link" and confirm the action. The link will cease to exist and will be no longer available, so be careful if you've already shared it. However, you can always create a new one.</p>
 <figure>
-  <img src="/img/viewmode/viewmode-share-destroy.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-share-destroy.webp" alt="Penpot's viewmode" />
 </figure>
 
 <p class="advice"><strong>Tip:</strong> Add your preferred "Interactions" setting (show / don't show / show on click) before creating the Share prototype link. This way the link will keep your selection.</p>
@@ -105,7 +105,7 @@ title: 12· View mode
 <li><strong>Can inspect code</strong>: allow code inspection to users that are not in the team where the file belongs.</li>
 </ul>
 <figure>
-  <img src="/img/viewmode/viewmode-share-options.png" alt="Penpot's viewmode" />
+  <img src="/img/viewmode/viewmode-share-options.webp" alt="Penpot's viewmode" />
 </figure>
 <p class="advice">Allowing to share a "view only" workspace is in our plans and will come soon.</p>
 
@@ -118,7 +118,7 @@ title: 12· View mode
 </ul>
 <p><a href="/user-guide/inspect/">More about inspecting designs</a></p>
 <figure>
-  <video title="A video showing how to activate Inspect at the View mode" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-viewmode.png" height="auto">
+  <video title="A video showing how to activate Inspect at the View mode" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-viewmode.webp" height="auto">
     <source src="/img/inspect/inspect-viewmode.mp4" type="video/mp4">
   </video>
 </figure>