💄 Objects and libraries section images compressed

user-guide/libraries/index.njk

@@ -25,21 +25,21 @@ title: 09· Asset Libraries
   <li>Clicking the “+” to launch import an image that will be added as a component.</li>
 </ol>
 <figure>
-  <video title="Add component" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-component.png" height="auto">
+  <video title="Add component" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-component.webp" height="auto">
     <source src="/img/libraries/add-component.mp4" type="video/mp4">
   </video>
 </figure>
 <h4>Colors</h4>
 <p>Click the “+” to launch the color picker and add a color to the library. Learn more about <a href="/user-guide/color/">managing color</a></p>
 <figure>
-  <video title="Add color" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-color.png" height="auto">
+  <video title="Add color" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-color.webp" height="auto">
     <source src="/img/libraries/add-color.mp4" type="video/mp4">
   </video>
 </figure>
 <h4>Typographies</h4>
 <p>All typography styles created from the text properties (at the right sidebar) are automatically stored at the library. You can also click the “+” to create a new typography style from scratch.</p>
 <figure>
-  <video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.png" height="auto">
+  <video title="Add typography" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/add-typography.webp" height="auto">
     <source src="/img/libraries/add-typography.mp4" type="video/mp4">
   </video>
 </figure>
@@ -53,7 +53,7 @@ title: 09· Asset Libraries
   <li><strong>Typographies:</strong> Rename, edit, delete.</li>
 </ul>
 <figure>
-  <video title="Asset options" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-options.png" height="auto">
+  <video title="Asset options" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-options.webp" height="auto">
     <source src="/img/libraries/asset-options.mp4" type="video/mp4">
   </video>
 </figure>
@@ -65,7 +65,7 @@ title: 09· Asset Libraries
   <li><strong>Typographies:</strong> With a text layer selected click a typography style from the library to apply it.</li>
 </ul>
 <figure>
-  <video title="Asset use" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-use.png" height="auto">
+  <video title="Asset use" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-use.webp" height="auto">
     <source src="/img/libraries/asset-use.mp4" type="video/mp4">
   </video>
 </figure>
@@ -80,7 +80,7 @@ title: 09· Asset Libraries
   <li><strong>List view:</strong> Optimized to identify the assets by their names and view more assets at the same time.</li>
 </ul>
 <figure>
-  <video title="Asset list" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-list.png" height="auto">
+  <video title="Asset list" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-list.webp" height="auto">
     <source src="/img/libraries/asset-list.mp4" type="video/mp4">
   </video>
 </figure>
@@ -88,7 +88,7 @@ title: 09· Asset Libraries
 <h4>Sort assets</h4>
 <p>Click the sort button to change the alphabetical order.</p>
 <figure>
-  <video title="Asset sort" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-order.png" height="auto">
+  <video title="Asset sort" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-order.webp" height="auto">
     <source src="/img/libraries/asset-order.mp4" type="video/mp4">
   </video>
 </figure>
@@ -96,7 +96,7 @@ title: 09· Asset Libraries
 <h4>Search assets</h4>
 <p>Use the Search assets box to filter the assets with names that match what you write.</p>
 <figure>
-  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-search.png" height="auto">
+  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-search.webp" height="auto">
     <source src="/img/libraries/asset-search.mp4" type="video/mp4">
   </video>
 </figure>
@@ -106,7 +106,7 @@ title: 09· Asset Libraries
 
 <h4>Multiselect assets</h4>
 <figure>
-  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-multiselect.png" height="auto">
+  <video title="Asset search" muted="" playsinline="" controls="" width="auto" poster="/img/libraries/asset-multiselect.webp" height="auto">
     <source src="/img/libraries/asset-multiselect.mp4" type="video/mp4">
   </video>
 </figure>
@@ -118,7 +118,7 @@ title: 09· Asset Libraries
   <li><strong>With the "Group" option:</strong> Select one or more assets at the library, then right click to show the menu and then select "Group".</li>
 </ol>
 <figure>
-  <video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.png" height="auto">
+  <video title="Grouping components" muted="" playsinline="" controls="" width="100%" poster="/img/components/components-group.webp" height="auto">
     <source src="/img/components/components-group.mp4" type="video/mp4">
   </video>
 </figure>
@@ -129,7 +129,7 @@ title: 09· Asset Libraries
 <h4>Drag assets to groups</h4>
 <p>One very direct way to move assets between groups at the libraries is by dragging them.</p>
 <figure>
-  <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.png" height="auto">
+  <video title="Drag components" muted="" playsinline="" controls="" width="auto" poster="/img/components/components-drag.webp" height="auto">
     <source src="/img/components/components-drag.mp4" type="video/mp4">
   </video>
 </figure>
@@ -145,7 +145,7 @@ title: 09· Asset Libraries
   <li>Press <kbd>Alt/⌥</kbd> + <kbd>i</kbd>.</li>
 </ul>
 <figure>
-  <img src="/img/libraries/assets-tab.png" alt="Library assets tab">
+  <img src="/img/libraries/assets-tab.webp" alt="Library assets tab">
 </figure>
 
 <h3 id="shared-libraries">Shared libraries</h3>
@@ -157,11 +157,11 @@ title: 09· Asset Libraries
   <li>From the libraries panel, that you can launch by clicking on the "Libraries" button that is found at the assets tab.</li>
 </ul>
 <figure>
-  <img src="/img/libraries/libraries-publish-menu.png" alt="Publish library">
+  <img src="/img/libraries/libraries-publish-menu.webp" alt="Publish library">
   <figcaption>Publishing a library from the main menu</figcaption>
 </figure>
 <figure>
-  <img src="/img/libraries/libraries-publish-panel.png" alt="Publish library">
+  <img src="/img/libraries/libraries-publish-panel.webp" alt="Publish library">
   <figcaption>Publishing a library from the libraries panel</figcaption>
 </figure>
 
@@ -172,13 +172,13 @@ title: 09· Asset Libraries
 <h4>Library updates</h4>
 <p></p>
 <figure>
-  <img src="/img/libraries/libraries-updates.png" alt="Update libraries">
+  <img src="/img/libraries/libraries-updates.webp" alt="Update libraries">
 </figure>
 
 <h4>Connect shared libraries</h4>
 <p>To add a Shared Library from another file, launch the libraries panel, then search and select the available libraries.</p>
 <figure>
-  <video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.png" height="auto">
+  <video title="Connecting a shared library" muted="" playsinline="" controls="" width="100%" poster="/img/libraries/libraries-launch.webp" height="auto">
     <source src="/img/libraries/libraries-launch.mp4" type="video/mp4">
   </video>
 </figure>
@@ -186,17 +186,17 @@ title: 09· Asset Libraries
 <h4>Disconnect shared library</h4>
 <p>You can disconnect any library anytime from the libraries panel just by clicking on the disconnect button.</p>
 <figure>
-  <img src="/img/libraries/libraries-disconnect.png" alt="Disconnect libraries">
+  <img src="/img/libraries/libraries-disconnect.webp" alt="Disconnect libraries">
 </figure>
 
 <h4>Use shared libraries</h4>
 <p>Shared libraries will be listed at the assets panel, at the workspace left sidebar. You can expand and collapse them to access the assets of each connected shared library.</p>
 <figure>
-  <img src="/img/libraries/libraries-sidebar.png" alt="Connected libraries list">
+  <img src="/img/libraries/libraries-sidebar.webp" alt="Connected libraries list">
 </figure>
 
 <h4>Open shared library file</h4>
 <p>Click on the arrow icon at the right of a shared library name to go to the file where the library is and edit its contents.</p>
 <figure>
-  <img src="/img/libraries/libraries-open.png" alt="Open libraries">
+  <img src="/img/libraries/libraries-open.webp" alt="Open libraries">
 </figure>

user-guide/objects/index.njk

@@ -14,7 +14,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
 <p>You can create a board using the board tool at the toolbar or the shortcut <kbd>B</kbd>. </p>
 <p>Set a custom size or choose one of the provided presets with the most common resolution for devices and standard print sizes. </p>
 <figure>
-  <video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.png" height="auto">
+  <video title="Create board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-create.webp" height="auto">
     <source src="/img/objects/board-create.mp4" type="video/mp4">
   </video>
 </figure>
@@ -28,7 +28,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
   <li>For the rest (empty first level boards and inside boards) just click to select.</li>
 </ul>
 <figure>
-  <video title="Select board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-select.png" height="auto">
+  <video title="Select board" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-select.webp" height="auto">
     <source src="/img/objects/board-select.mp4" type="video/mp4">
   </video>
 </figure>
@@ -41,7 +41,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
   <li>Right click to show the menu and select "Set as thumbnail" or press <kbd>Shift</kbd> <kbd>T</kbd>.</li>
 </ol>
 <figure>
-  <video title="Set board as thumbnail" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-thumbnail.png" height="auto">
+  <video title="Set board as thumbnail" muted="" playsinline="" controls="" width="auto" poster="/img/objects/board-thumbnail.webp" height="auto">
     <source src="/img/objects/board-thumbnail.mp4" type="video/mp4">
   </video>
 </figure>
@@ -49,7 +49,7 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
 <h4>Clip content</h4>
 <p>Boards offer the option to clip its content (or not).</p>
 <figure>
-  <video title="Clip board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-clip.png" height="auto">
+  <video title="Clip board" muted="" playsinline="" controls="" width="100%" poster="/img/objects/board-clip.webp" height="auto">
     <source src="/img/objects/board-clip.mp4" type="video/mp4">
   </video>
 </figure>
@@ -63,28 +63,28 @@ are shown by default at the <a href="/user-guide/view-mode">View mode</a>, actin
   <li>Boards created inside other boards: not shown by default.</li>
 </ul>
 <figure>
-  <img src="/img/objects/board-show.png" alt="board show in view mode">
+  <img src="/img/objects/board-show.webp" alt="board show in view mode">
 </figure>
 
 <h4>Show fill in exports</h4>
 <p> Sometimes you don’t need the artboards to be part of your designs, but only their support to work on them.
 Penpot allows you to decide if the fill of an artboard will be shown in exports, you just have to check/uncheck the "Show in exports" option which is below the fill setting.</p>
 <figure>
-  <img src="/img/objects/board-fill.png" alt="show board fill in exports">
+  <img src="/img/objects/board-fill.webp" alt="show board fill in exports">
 </figure>
 
 <h4>Board guides</h4>
 <p>You can set guides on boards that will assist with aligning objects.</p>
 <p>Read more about <a href="/user-guide/workspace-basics/#guides">guides</a>.</p>
 <figure>
-  <img src="/img/objects/board-guides.png" alt="board guides">
+  <img src="/img/objects/board-guides.webp" alt="board guides">
 </figure>
 
 <h4>Prototyping boards</h4>
 <p>You can connect boards with other boards to create rich interactions.</p>
 <p>Read more about <a href="/user-guide/prototyping/">prototyping</a>.</p>
 <figure>
-  <img src="/img/objects/board-prototyping.png" alt="prototyping with boards">
+  <img src="/img/objects/board-prototyping.webp" alt="prototyping with boards">
 </figure>
 
 <h3 id="rectangles-ellipses">Rectangles and ellipses</h3>
@@ -93,7 +93,7 @@ a design.</p>
 <p>The shortcut keys are <kbd>E</kbd> for ellipses and <kbd>R</kbd> for rectangles.</p>
 <p>To find out more about how to edit and modify these shapes go to <a href="/user-guide/layer-basics/">Layer basics</a>.</p>
 <figure>
-  <video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.png" height="auto">
+  <video title="Rectangles and ellipses" muted="" playsinline="" controls="" width="auto" poster="/img/objects/rectangles-ellipses.webp" height="auto">
     <source src="/img/objects/rectangles-ellipses.mp4" type="video/mp4">
   </video>
 </figure>
@@ -106,18 +106,18 @@ a design.</p>
   <li><strong>Drag</strong> to create a textbox with a fixed size.</li>
 </ol>
 <figure>
-  <video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.png" height="auto">
+  <video title="Create text" muted="" playsinline="" controls="" width="auto" poster="/img/objects/text-create.webp" height="auto">
     <source src="/img/objects/text-create.mp4" type="video/mp4">
   </video>
 </figure>
 <h4>Edit and style text content</h4>
 <p>Press <kbd>Enter</kbd> with a text layer selected to start editing the text content. You can style parts of the text content as rich text.</p>
 <figure>
-  <img src="/img/objects/text-edit.png" alt="editing text">
+  <img src="/img/objects/text-edit.webp" alt="editing text">
 </figure>
 <h4>Text options</h4>
 <figure>
-  <img src="/img/objects/text-options.png" alt="text options">
+  <img src="/img/objects/text-options.webp" alt="text options">
 </figure>
 <ol>
   <li><strong>Font family.</strong> Penpot includes by default the <a href="https://fonts.google.com/" target=”_blank”>Google Fonts</a> cataloge. You can also <a href="/user-guide/custom-fonts">install your own fonts</a>.</li>
@@ -151,7 +151,7 @@ Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Ct
 </ol>
 <p><strong>Tip:</strong> If you hold <kbd>Shift/⇧</kbd> while adding nodes the angle between the current and the next will change in 45 degree increments.</p>
 <figure>
-  <video title="Paths" muted="" playsinline="" controls="" width="100%" poster="/img/objects/path-create.png" height="auto">
+  <video title="Paths" muted="" playsinline="" controls="" width="100%" poster="/img/objects/path-create.webp" height="auto">
     <source src="/img/objects/path-create.mp4" type="video/mp4">
   </video>
 </figure>
@@ -160,13 +160,13 @@ Select the curve tool by clicking on the icon at the toolbar or pressing <kbd>Ct
 <p>To edit a node double click on a path or select and press <kbd>Enter</kbd>.
 You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd> to exit node edition. </p>
 <figure>
-  <video title="Edit nodes" muted="" playsinline="" controls="" width="100%" poster="/img/objects/nodes-edit.png" height="auto">
+  <video title="Edit nodes" muted="" playsinline="" controls="" width="100%" poster="/img/objects/nodes-edit.webp" height="auto">
     <source src="/img/objects/nodes-edit.mp4" type="video/mp4">
   </video>
 </figure><h4>Node types</h4>
 <p>There are two types of nodes: curve or corner (straight). The type of a selected node can be changed at the bezier menu. Curved nodes have bezier handles that allow the curvature of a path to be modified.</p>
 <figure>
-  <video title="Node types" muted="" playsinline="" controls="" width="100%" poster="/img/objects/node-types.png" height="auto">
+  <video title="Node types" muted="" playsinline="" controls="" width="100%" poster="/img/objects/node-types.webp" height="auto">
     <source src="/img/objects/node-types.mp4" type="video/mp4">
   </video>
 </figure>
@@ -186,7 +186,7 @@ You can choose to edit individual nodes or create new ones. Press <kbd>Esc</kbd>
 <p>Images fill the layer backgrounds by default, so they take up the entire object while maintaining the aspect ratio. This is great for flexible designs because the images can adapt to different sizes.</p>
 <p>However, if you don't want an image to keep its aspect ratio when resizing, you just have to uncheck the option in the image settings.</p>
 <figure>
-  <video title="Changing the aspect ratio of an image" muted="" playsinline="" controls="" width="100%" poster="/img/objects/image-ratio.png" height="auto">
+  <video title="Changing the aspect ratio of an image" muted="" playsinline="" controls="" width="100%" poster="/img/objects/image-ratio.webp" height="auto">
     <source src="/img/objects/image-ratio.mp4" type="video/mp4">
   </video>
 </figure>