💄 Prototyping section images compressed

user-guide/prototyping/index.njk

@@ -9,7 +9,7 @@ title: 11· Prototyping
 
 <h3 id="prototyping-connection">Connect boards</h3>
 <figure>
-  <video title="Connect boards" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-connect.png" height="auto">
+  <video title="Connect boards" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-connect.webp" height="auto">
     <source src="/img/prototype/prototype-connect.mp4" type="video/mp4">
   </video>
 </figure>
@@ -25,7 +25,7 @@ title: 11· Prototyping
 
 <h4 id="prototype-anatomy">Anatomy of a prototype</h4>
 <figure>
-  <img src="/img/prototype/prototype-anatomy.png" alt="Different elements that involve prototyping with Penpot">
+  <img src="/img/prototype/prototype-anatomy.webp" alt="Different elements that involve prototyping with Penpot">
 </figure>
 <p class="hint">
   <strong>1)</strong> Hotspot (origin connection)
@@ -42,7 +42,7 @@ title: 11· Prototyping
 
 <h3 id="interaction-triggers">Interaction triggers</h3>
 <figure>
-  <img src="/img/prototype/prototype-trigger.png" alt="Prototype trigger options">
+  <img src="/img/prototype/prototype-trigger.webp" alt="Prototype trigger options">
 </figure>
 <p>A trigger defines the user action that will start the interaction. Penpot currently provides the following triggers (more of them will come):</p>
 <ul>
@@ -54,7 +54,7 @@ title: 11· Prototyping
 
 <h3 id="prototyping-actions">Interaction actions</h3>
 <figure>
-  <img src="/img/prototype/prototype-action.png" alt="Prototype action options">
+  <img src="/img/prototype/prototype-action.webp" alt="Prototype action options">
 </figure>
 <p>The action defines what will happen when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
 <ul>
@@ -72,7 +72,7 @@ title: 11· Prototyping
 <h4 id="prototyping-actions-overlay">Open overlay</h4>
 <p>It opens a board right over the current board. This action is typically used to display tooltips, modal windows or notifications.</p>
 <figure>
-  <video title="Prototype overlay" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-overlay.png" height="auto">
+  <video title="Prototype overlay" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-overlay.webp" height="auto">
     <source src="/img/prototype/prototype-overlay.mp4" type="video/mp4">
   </video>
 </figure>
@@ -84,7 +84,7 @@ title: 11· Prototyping
 </ul>
 <p class="advice">TIP: You can select to open the overlay relative to the element that triggers it using the field "relative to". This is extremely useful for hover effects.</p>
 <figure>
-  <img src="/img/prototype/prototype-overlay-relative.png" alt="Prototype overlay relative position">
+  <img src="/img/prototype/prototype-overlay-relative.webp" alt="Prototype overlay relative position">
 </figure>
 <h4 id="prototyping-actions-overlay-toggle">Toggle overlay</h4>
 <p>It opens an overlay if it is not already opened or closes it if it is already opened.</p>
@@ -94,7 +94,7 @@ title: 11· Prototyping
 
 <h4 id="prototyping-actions-previous">Previous screen</h4>
 <figure>
-  <img src="/img/prototype/prototype-previous.png" alt="Prototype previous screen action">
+  <img src="/img/prototype/prototype-previous.webp" alt="Prototype previous screen action">
 </figure>
 <p>It takes back to the last board shown. This action is typically used for back buttons, when the same screen can be accessed from different origins.</p>
 
@@ -104,7 +104,7 @@ title: 11· Prototyping
 
 <h3 id="prototyping-animations">Interaction animations</h3>
 <figure>
-  <img src="/img/prototype/prototype-animation.png" alt="Prototype animation options">
+  <img src="/img/prototype/prototype-animation.webp" alt="Prototype animation options">
 </figure>
 <p>The animation defines the transition between boards when the interaction is triggered. Penpot currently provides the following actions (more of them will come):</p>
 <ul>
@@ -162,14 +162,14 @@ title: 11· Prototyping
 <ul>
   <li><strong>Automatically</strong>: when creating a connection from a board which is not connected yet (meaning that it does not belong to an existing flow), the origin board will be set as a flow start.
 <figure>
-  <video title="New flow" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-flow-new.png" height="auto">
+  <video title="New flow" muted="" playsinline="" controls="" width="100%" poster="/img/prototype/prototype-flow-new.webp" height="auto">
     <source src="/img/prototype/prototype-flow-new.mp4" type="video/mp4">
   </video>
 </figure>
 </li>
   <li><strong>From the prototype sidebar</strong>: having a board selected, click on the “+” button to set it as a flow start.
 <figure>
-  <video title="Flow add" muted="" playsinline="" controls="" width="auto" poster="/img/prototype/prototype-flow-add.png" height="auto">
+  <video title="Flow add" muted="" playsinline="" controls="" width="auto" poster="/img/prototype/prototype-flow-add.webp" height="auto">
     <source src="/img/prototype/prototype-flow-add.mp4" type="video/mp4">
   </video>
 </figure>
@@ -177,7 +177,7 @@ title: 11· Prototyping
 </li>
   <li><strong>From the board menu</strong>.
 <figure>
-  <img src="/img/prototype/prototype-flow-menu.png" alt="Prototyping flow from the menu">
+  <img src="/img/prototype/prototype-flow-menu.webp" alt="Prototyping flow from the menu">
 </figure>
 </li>
 </ul>
@@ -185,19 +185,19 @@ title: 11· Prototyping
 <h4 id="prototyping-flows-multiple">Multiple flows</h4>
 <p>You can add as many flows as you want. The complete list of flows is shown at the prototype sidebar when no shape is selected.</p>
 <figure>
-  <img src="/img/prototype/prototype-flows-multiple.png" alt="Prototyping flows">
+  <img src="/img/prototype/prototype-flows-multiple.webp" alt="Prototyping flows">
 </figure>
 
 <h4 id="prototyping-flows-multiple">Flows at the view mode</h4>
 <p>At the view mode there’s a menu where you can access to all the flows set and easily switch between them.</p>
 <figure>
-  <img src="/img/prototype/prototype-flows-viewmode.png" alt="Prototyping flows">
+  <img src="/img/prototype/prototype-flows-viewmode.webp" alt="Prototyping flows">
 </figure>
 
 <h3 id="prototyping-fix-scroll">Fix elements at scroll</h3>
 <p>You can fix the position of an object when scrolling at the presentation view. This is tipically useful for prototyping fixed headers, navbars and floating buttons.</p>
 <figure>
-  <img src="/img/prototype/prototype-fix-scroll.png" alt="Prototyping fix scroll">
+  <img src="/img/prototype/prototype-fix-scroll.webp" alt="Prototyping fix scroll">
 </figure>
 <p>Select an element and check the option "Fix when scrolling" that you can find inside the Constraints section at the Design sidebar (right side).</p>
 <figure>