💄 Interface section images compressed

user-guide/layer-basics/index.njk

@@ -10,7 +10,7 @@ title: 04· Layer basics
 
 <p>You can add, remove or rename pages to suit your needs.</p>
 <figure>
-  <video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.png" height="auto">
+  <video title="Creating pages" muted="" playsinline="" controls="" width="auto" poster="/img/layers/pages-create.webp" height="auto">
     <source src="/img/layers/pages-create.mp4" type="video/mp4">
   </video>
 </figure>
@@ -18,7 +18,7 @@ title: 04· Layer basics
 <h3 id="layers-panel">Layers panel</h3>
 <p><strong>Layers:</strong> Layers are the different objects that you can place at the design viewport. At the layers panel you can see all the layers of a file page. Drag the layers to arrange them to different positions.</p>
 <figure>
-  <video title="Layers panel" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-panel.png" height="auto">
+  <video title="Layers panel" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-panel.webp" height="auto">
     <source src="/img/layers/layers-panel.mp4" type="video/mp4">
   </video>
 </figure>
@@ -35,7 +35,7 @@ title: 04· Layer basics
 <h3 id="hide-lock">Hide and lock layers</h3>
 <p>Click on the eye icon to change the visibility of a layer. Click on the lock icon to lock or unlock a layer. A locked layer can not be modified.</p>
 <figure>
-  <video title="Layers hide and lock" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-hide-lock.png" height="auto">
+  <video title="Layers hide and lock" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-hide-lock.webp" height="auto">
     <source src="/img/layers/layers-hide-lock.mp4" type="video/mp4">
   </video>
 </figure>
@@ -44,7 +44,7 @@ title: 04· Layer basics
 <p>To create a layer you have to select the type of layer by clicking the selected tool (board, rectangle, ellipse, text, image, path or curve) at the toolbar. Then you usually have to click and drag your mouse on the viewport. </p>
 <p>Hold <kbd>Shift/⇧</kbd> while creating an ellipse or a rectangle to maintain equal width and height.</p>
 <figure>
-  <video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.png" height="auto">
+  <video title="Layers create" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-create.webp" height="auto">
     <source src="/img/layers/layers-create.mp4" type="video/mp4">
   </video>
 </figure>
@@ -57,7 +57,7 @@ title: 04· Layer basics
   <li>You can also select a layer and drag while pressing <kbd>Alt/⌥</kbd> so you can simultaneously duplicate and drag the new layer.</li>
 </ol>
 <figure>
-  <video title="Duplicate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-duplicate.png" height="auto">
+  <video title="Duplicate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-duplicate.webp" height="auto">
     <source src="/img/layers/layers-duplicate.mp4" type="video/mp4">
   </video>
 </figure>
@@ -73,7 +73,7 @@ title: 04· Layer basics
 <p>The simplest way to select a layer is to click on it. Make sure that you have the “move” pointer selected at the toolbar. </p>
 <p>To select multiple layers you can click and drag around the layers you want to select. You can also click more than one layer while pressing <kbd>Shift/⇧</kbd>. If you hold <kbd>Shift/⇧</kbd> and click you can deselect layers individually.</p>
 <figure>
-  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-select.png" height="auto">
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-select.webp" height="auto">
     <source src="/img/layers/layers-select.mp4" type="video/mp4">
   </video>
 </figure>
@@ -85,14 +85,14 @@ title: 04· Layer basics
   <li>If you press <kbd>Shift/⇧</kbd> while selecting two or more layers all the layers within the selection area will be selected.</li>
 </ol>
 <figure>
-  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-multiselect.png" height="auto">
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-multiselect.webp" height="auto">
     <source src="/img/layers/layers-multiselect.mp4" type="video/mp4">
   </video>
 </figure>
 <h4>Select layers ignoring groups (deep selection)</h4>
 <p>If you want to select an element that is difficult to reach because it is under a group of elements, hold <kbd>Ctrl/⌘</kbd> to make the selection ignore group areas and treat all the objects as being at the same level.</p>
 <figure>
-  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-deepselect.png" height="auto">
+  <video title="Select layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-deepselect.webp" height="auto">
     <source src="/img/layers/layers-deepselect.mp4" type="video/mp4">
   </video>
 </figure>
@@ -111,7 +111,7 @@ title: 04· Layer basics
   <li><strong>Ungroup:</strong> Press <kbd>Shift/⇧</kbd> + <kbd>G</kbd> or use the option at the layers menu that you can open with right click over the selected group.</li>
 </ul>
 <figure>
-  <video title="Group layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-group.png" height="auto">
+  <video title="Group layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-group.webp" height="auto">
     <source src="/img/layers/layers-group.mp4" type="video/mp4">
   </video>
 </figure>
@@ -123,7 +123,7 @@ title: 04· Layer basics
   <li><strong>Unmask layers:</strong> Select a mask and then press <kbd>Shift/⇧</kbd> + <kbd>Ctrl/⌘</kbd> + <kbd>M</kbd> or use the option at the layers menu.</li>
 </ul>
 <figure>
-  <video title="Mask layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-mask.png" height="auto">
+  <video title="Mask layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-mask.webp" height="auto">
     <source src="/img/layers/layers-mask.mp4" type="video/mp4">
   </video>
 </figure>
@@ -132,7 +132,7 @@ title: 04· Layer basics
 <h3 id="move-layers">Move layers</h3>
 <p>To move one or more layers on the viewport you have to select them first and then click and drag the selection where you want to place them. You can also use the design panel to set a precise position relative to the viewport or the board.</p>
 <figure>
-  <video title="Move layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-move.png" height="auto">
+  <video title="Move layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-move.webp" height="auto">
     <source src="/img/layers/layers-move.mp4" type="video/mp4">
   </video>
 </figure>
@@ -145,7 +145,7 @@ title: 04· Layer basics
   <li>Hold <kbd>Alt/⌥</kbd> while resizing the object to do it from the center and resize simultaneously two opposite sides.</li>
 </ul>
 <figure>
-  <video title="Resize layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-resize.png" height="auto">
+  <video title="Resize layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-resize.webp" height="auto">
     <source src="/img/layers/layers-resize.mp4" type="video/mp4">
   </video>
 </figure>
@@ -153,7 +153,7 @@ title: 04· Layer basics
 <h3 id="rotate-layers">Rotate layers</h3>
 <p>To rotate selected layers you can use the handles at the edges of the selection box. Make sure the cursor is in rotation mode. If you hold <kbd>Ctrl/⌘</kbd> while rotation the angle will change in 45 degree increments. You can also find this option at the design panel.</p>
 <figure>
-  <video title="Rotate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-rotate.png" height="auto">
+  <video title="Rotate layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-rotate.webp" height="auto">
     <source src="/img/layers/layers-rotate.mp4" type="video/mp4">
   </video>
 </figure>
@@ -165,7 +165,7 @@ title: 04· Layer basics
   <li><strong>Flip layers vertically:</strong> Select the layer and then press <kbd>Shift/⇧</kbd> + <kbd>V</kbd>.</li>
 </ul>
 <figure>
-  <video title="Flip layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-flip.png" height="auto">
+  <video title="Flip layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-flip.webp" height="auto">
     <source src="/img/layers/layers-flip.mp4" type="video/mp4">
   </video>
 </figure>
@@ -174,7 +174,7 @@ title: 04· Layer basics
 <h3 id="scale-elements">Scale elements, texts and properties</h3>
 <p>Activate the scale tool by pressing <kbd>K</kbd> or from the main file menu to scale elements while maintaining their visual aspect. Once it is activated you can resize texts, layers and groups and preserve their aspect ratio while scaling their properties proportionally, including strokes, shadows, blurs and corners.
 <figure>
-  <video title="Scale layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-scale.png" height="auto">
+  <video title="Scale layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-scale.webp" height="auto">
     <source src="/img/layers/layers-scale.mp4" type="video/mp4">
   </video>
 </figure>
@@ -184,14 +184,14 @@ title: 04· Layer basics
 <h4>Align layers</h4>
 <p>Aligning will move all the selected layers to a position relative to one of them. For instance, aligning top will align the elements with the edge of the top-most element.</p>
 <figure>
-  <video title="Align layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-align.png" height="auto">
+  <video title="Align layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-align.webp" height="auto">
     <source src="/img/layers/layers-align.mp4" type="video/mp4">
   </video>
 </figure>
 <h4>Distribute layers</h4>
 <p>Distributing objects to position them vertically and horizontally with equal distances between them.</p>
 <figure>
-  <video title="Distribute layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-distribute.png" height="auto">
+  <video title="Distribute layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-distribute.webp" height="auto">
     <source src="/img/layers/layers-distribute.mp4" type="video/mp4">
   </video>
 </figure>
@@ -199,7 +199,7 @@ title: 04· Layer basics
 <h3 id="layers-search">Search and filter layers</h3>
 <p>Reach specific layers with a simple search. You can also filter the layers list per layer type (board, group, mask, component, text, image and shape).</p>
 <figure>
-  <video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.png" height="auto">
+  <video title="Search and filter layers" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-search.webp" height="auto">
     <source src="/img/layers/layers-search.mp4" type="video/mp4">
   </video>
 </figure>
@@ -210,7 +210,7 @@ right side to toggle the visibility of their contents. </p>
 <p>To collapse all the layers, and just display the boards,
 press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a board to collapse them all.</p>
 <figure>
-  <video title="Collapse layer groups" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-collapse.png" height="auto">
+  <video title="Collapse layer groups" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-collapse.webp" height="auto">
     <source src="/img/layers/layers-collapse.mp4" type="video/mp4">
   </video>
 </figure>
@@ -219,7 +219,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
 <p>It is possible to combine shapes in a group in different ways to create more complex objects by using
 "boolean" operators. Boolean operators are non destructive and the original shapes remain grouped and available for more editing. There are five boolean operations available: union, difference, intersection, exclusion and flatten. Using boolean operations allows many graphic options and possibilities for your designs.</p>
 <figure>
-  <video title="Boolean operators" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-boolean.png" height="auto">
+  <video title="Boolean operators" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-boolean.webp" height="auto">
     <source src="/img/layers/layers-boolean.mp4" type="video/mp4">
   </video>
 </figure>
@@ -239,7 +239,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
 <p>Constraints allow you to decide how layers will behave when resizing its parent container. You can apply horizontal and vertical constraints for every layer.</p>
 <p>To apply constraints select a layer and use the constraints map or the constraints selectors at the design panel.</p>
 <figure>
-  <video title="Constraints" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-constraints.png" height="auto">
+  <video title="Constraints" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-constraints.webp" height="auto">
     <source src="/img/layers/layers-constraints.mp4" type="video/mp4">
   </video>
 </figure>
@@ -254,7 +254,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <li><strong>Scale</strong>: The object will horizontally resize proportionally to its parent container size.</li>
 </ul>
 <figure>
-  <img src="/img/layers/layers-constraints-h.png" alt="Horizontal constraints">
+  <img src="/img/layers/layers-constraints-h.webp" alt="Horizontal constraints">
 </figure>
 
 <h4>Vertical constraints</h4>
@@ -266,7 +266,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <li><strong>Scale</strong>: The object will vertically resize proportionally to its parent container size.</li>
 </ul>
 <figure>
-  <img src="/img/layers/layers-constraints-v.png" alt="Vettical constraints">
+  <img src="/img/layers/layers-constraints-v.webp" alt="Vettical constraints">
 </figure>
 
 
@@ -278,7 +278,7 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
   <li>Right click to show the menu and select the option "Focus on" or press <kbd>F</kbd>.</li>
 </ol>
 <figure>
-  <video title="Focus mode" muted="" playsinline="" controls="" width="auto" poster="/img/layers/layers-focus.png" height="auto">
+  <video title="Focus mode" muted="" playsinline="" controls="" width="100%" poster="/img/layers/layers-focus.webp" height="auto">
     <source src="/img/layers/layers-focus.mp4" type="video/mp4">
   </video>
 </figure>
@@ -288,5 +288,5 @@ press <kbd>Shift/⇧</kbd> + left click over the right arrow of a group or a boa
 <p>Diversity and inclusion is a major Penpot concern and that's why we love to give support to RTL languages, unlike most design tools.</p>
 <p>If you write in arabic, hebrew or other RTL language text direction will be automatically detected in text layers.</p>
 <figure>
-  <img src="/img/layers/layers-rtl.png" alt="RTL support">
+  <img src="/img/layers/layers-rtl.webp" alt="RTL support">
 </figure>

user-guide/the-interface/index.njk

@@ -9,8 +9,8 @@ title: 02· The interface
 <h3 id="interface-dashboard">Dashboard</h3>
 <p>The Dashboard is the place where you will be able to organize your files, libraries, projects and teams.</p>
 <figure>
-  <a href="/img/interface/dashboard-dark.png" target="_blank">
-    <img src="/img/interface/dashboard-dark.png" alt="Penpot's dashboard" />
+  <a href="/img/interface/dashboard-dark.webp" target="_blank">
+    <img src="/img/interface/dashboard-dark.webp" alt="Penpot's dashboard" />
   </a>
 </figure>
 
@@ -50,8 +50,8 @@ title: 02· The interface
 <p>The Workspace is where you actually create your designs. You have an infinite canvas where you can work directly but you also have the ability to create and work inside boards that will help you to create pages and exportation units.</p>
 
 <figure>
-  <a href="/img/interface/workspace-dark.png" target="_blank">
-    <img src="/img/interface/workspace-dark.png" alt="Penpot's workspace" />
+  <a href="/img/interface/workspace-dark.webp" target="_blank">
+    <img src="/img/interface/workspace-dark.webp" alt="Penpot's workspace" />
   </a>
 </figure>
 
@@ -103,8 +103,8 @@ title: 02· The interface
 <p>Launch the view mode to present and share your designs, comment on them and play with the interactions set at the workspace. You also have an Inspect mode where you can get properties specifications and code snippets. <a href="/user-guide/view-mode/">More about the View mode.</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>
 
@@ -149,20 +149,20 @@ title: 02· The interface
 </ul>
 
 <figure>
-  <a href="/img/interface/dashboard-light.png" target="_blank">
-    <img src="/img/interface/dashboard-light.png" alt="Penpot's dashboard" />
+  <a href="/img/interface/dashboard-light.webp" target="_blank">
+    <img src="/img/interface/dashboard-light.webp" alt="Penpot's dashboard" />
   </a>
   <figcaption>Penpot's dashboard in light mode</figcaption>
 </figure>
 <figure>
-  <a href="/img/interface/workspace-light.png" target="_blank">
-    <img src="/img/interface/workspace-light.png" alt="Penpot's workspace" />
+  <a href="/img/interface/workspace-light.webp" target="_blank">
+    <img src="/img/interface/workspace-light.webp" alt="Penpot's workspace" />
   </a>
   <figcaption>Penpot's workspace in light mode</figcaption>
 </figure>
 <figure>
-  <a href="/img/interface/viewmode-light.png" target="_blank">
-    <img src="/img/interface/viewmode-light.png" alt="Penpot's view mode" />
+  <a href="/img/interface/viewmode-light.webp" target="_blank">
+    <img src="/img/interface/viewmode-light.webp" alt="Penpot's view mode" />
   </a>
   <figcaption>Penpot's view mode in light mode</figcaption>
 </figure>