💄 Misc images compressed

user-guide/import-export/index.njk

@@ -32,18 +32,18 @@ title: 14· Import/export files
 <ul>
   <li>
     <strong>From the <a href="/user-guide/the-interface/#interface-workspace">workspace</a></strong>: Select the download option at the main menu.
-    <figure><img src="/img/import-export/export-card.png" alt="Export penpot file" /></figure>
+    <figure><img src="/img/import-export/export-card.webp" alt="Export penpot file" /></figure>
   </li>
   <li>
     <strong>From the <a href="/user-guide/the-interface/#interface-dashboard">dashboard</a></strong>: Select the download option at the file card menu.
-    <figure><img src="/img/import-export/export-menu.png" alt="Export penpot file" /></figure>
+    <figure><img src="/img/import-export/export-menu.webp" alt="Export penpot file" /></figure>
   </li>
 </ul>
 
 <h4>Export multiple files</h4>
 <p>Select multiple files to export them at the same time. An overlay will show you the progress of the different exports.</p>
 <figure>
-  <video title="Export multiple files" muted="" playsinline="" controls="" width="100%" poster="/img/import-export/export-multiple.png" height="auto">
+  <video title="Export multiple files" muted="" playsinline="" controls="" width="100%" poster="/img/import-export/export-multiple.webp" height="auto">
     <source src="/img/import-export/export-multiple.mp4" type="video/mp4">
   </video>
 </figure>
@@ -55,12 +55,12 @@ title: 14· Import/export files
   <li><strong>Include shared library assets in file libraries</strong>: Files will be exported with all external assets merged into the file library.</li>
   <li><strong>Treat shared library assets as basic objects</strong>: Shared libraries will not be included in the export and no assets will be added to the library.</li>
 </ul>
-<figure><img src="/img/import-export/export-libraries.png" alt="Export penpot file" /></figure>
+<figure><img src="/img/import-export/export-libraries.webp" alt="Export penpot file" /></figure>
 
 <h2 id="files-import">Import Penpot files</h2>
 <p class="advice">Importing files from other tools and services is among the main priorities of the Penpot team. Related features are coming soon.</p>
 
 <p>The import option is at the projects menu. Press “Import files” and then select one or more .penpot files to import. You can import a .zip file as well.</p>
-<figure><img src="/img/import-export/import-menu.png" alt="Import penpot file" /></figure>
+<figure><img src="/img/import-export/import-menu.webp" alt="Import penpot file" /></figure>
 <p>Right before importing the files to your project, you’ll still have the opportunity to review the items to be imported, have the information about the ones that can not be imported and also the chance to discard files.</p>
-<figure><img src="/img/import-export/import-selection.png" alt="Import penpot file" /></figure
+<figure><img src="/img/import-export/import-selection.webp" alt="Import penpot file" /></figure

user-guide/inspect/index.njk

@@ -18,7 +18,7 @@ title: 13· Inspect designs
 
 <h3 id="inspect-workspace">At the Workspace</h3>
 <figure>
-  <video title="A video showing how to activate Inspect at the Workspace" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-workspace.png" height="auto">
+  <video title="A video showing how to activate Inspect at the Workspace" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-workspace.webp" height="auto">
     <source src="/img/inspect/inspect-workspace.mp4" type="video/mp4">
   </video>
 </figure>
@@ -34,7 +34,7 @@ title: 13· Inspect designs
 <li>Hover over a free space on the board or the area around it to see the distances from the object to the board edges.</li>
 </ul>
 <figure>
-  <video title="A video showing how to get Inspect measures" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-measures.png" height="auto">
+  <video title="A video showing how to get Inspect measures" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-measures.webp" height="auto">
     <source src="/img/inspect/inspect-measures.mp4" type="video/mp4">
   </video>
 </figure>
@@ -42,7 +42,7 @@ title: 13· Inspect designs
 <h2 id="inspect-info">How to get properties info</h2>
 <p>At the Info panel you can see specifications about style and content of an object. Different types of objects can have different sets of properties.</p>
 <figure>
-  <video title="A video showing how to get Inspect properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-properties.png" height="auto">
+  <video title="A video showing how to get Inspect properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-properties.webp" height="auto">
     <source src="/img/inspect/inspect-properties.mp4" type="video/mp4">
   </video>
 </figure>
@@ -50,7 +50,7 @@ title: 13· Inspect designs
 <h2 id="inspect-copy">How to copy properties info</h2>
 <p>You can copy the value of one property or full sections of properties pressing the copy buttons that are shown at the right when hovering. For example you could copy all the layout properties or only the width.</p>
 <figure>
-  <video title="A video showing how to copy properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-copy.png" height="auto">
+  <video title="A video showing how to copy properties" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-copy.webp" height="auto">
     <source src="/img/inspect/inspect-copy.mp4" type="video/mp4">
   </video>
 </figure>
@@ -58,7 +58,7 @@ title: 13· Inspect designs
 <h2 id="inspect-code">How to get code</h2>
 <p>Press the code tab to get actual code snippets. Select an object to get ready to use code for markup (SVG and HTML) and styles (currently CSS only but more are coming).</p>
 <figure>
-  <video title="A video showing how to get code" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-code.png" height="auto">
+  <video title="A video showing how to get code" muted="" playsinline="" controls="" width="100%" poster="/img/inspect/inspect-code.webp" height="auto">
     <source src="/img/inspect/inspect-code.mp4" type="video/mp4">
   </video>
 </figure>