💄 Layout images compressed

user-guide/flexible-layouts/index.njk

@@ -28,14 +28,14 @@ title: 08· Flexible Layouts
   <li>From the option at the selection menu (right click button).</li>
   <li>Pressing <kbd>Ctrl/⌘</kbd> + <kbd>A</kbd>.</li>
 </ul>
-<figure><img src="/img/flexible-layouts/layouts-add.png" alt="Adding Layouts" /></figure>
+<figure><img src="/img/flexible-layouts/layouts-add.webp" alt="Adding Layouts" /></figure>
 
 
 <h3 id="layouts-flex-arrange-reorder">Arrange and reorder objects to a Flex Layout</h3>
 <p>To add an object to a Flex Layout you can just drag it at the position of your choice. You can also create or paste elements like in any regular board.</p>
 <p>To reorder elements you can drag them or use the <kbd>UP/DOWN</kbd> keystrokes.</p>
 <figure>
-  <video title="A video showing a layer being dragged to and moved through a flex flow" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-arrange.png" height="auto">
+  <video title="A video showing a layer being dragged to and moved through a flex flow" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-arrange.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-arrange.mp4" type="video/mp4">
   </video>
 </figure>
@@ -43,7 +43,7 @@ title: 08· Flexible Layouts
 
 <h3 id="layouts-flex-properties">Flex Layout properties</h3>
 <p>You have properties for direction, align, justify, gap, padding, margin and sizing. Those are the same properties that you can use with CSS Flexbox. You can <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/#aa-flexbox-properties" target="_blank">read here detailed explanations about Flexbox properties</a>.</p>
-<figure><img src="/img/flexible-layouts/flex-properties.png" alt="Flex Layout properties" /></figure>
+<figure><img src="/img/flexible-layouts/flex-properties.webp" alt="Flex Layout properties" /></figure>
 
 <h4>Flex Layout properties:</h4>
 <ul>
@@ -59,14 +59,14 @@ title: 08· Flexible Layouts
 <h3 id="layouts-flex-elements">Positioning Flex elements</h3>
 <h4>Position static:</h4>
 <p>Static position is the default option for flex elements, meaning that they will be included in the flex flow, using flex properties.</p>
-<figure><img src="/img/flexible-layouts/flex-properties-element.png" alt="Flex Layout properties" /></figure>
+<figure><img src="/img/flexible-layouts/flex-properties-element.webp" alt="Flex Layout properties" /></figure>
 <h4>Position absolute:</h4>
 <p>Selecting absolute position will exclude the element from the Flex layout flow allowing you to freely position an element in a specific place regardless of the size of the layout where it belongs.</p>
-<figure><img src="/img/flexible-layouts/flex-properties-element-absolute.png" alt="Flex Layout properties" /></figure>
+<figure><img src="/img/flexible-layouts/flex-properties-element-absolute.webp" alt="Flex Layout properties" /></figure>
 <h4>Z-index:</h4>
 <p>With the z-index option you can decide the order of overlapping elements while maintaining the layers order.</p>
 <figure>
-  <video title="A video showing how to change z-index for a layer in flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-zindex.png" height="auto">
+  <video title="A video showing how to change z-index for a layer in flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-zindex.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-zindex.mp4" type="video/mp4">
   </video>
 </figure>
@@ -74,7 +74,7 @@ title: 08· Flexible Layouts
 <h3 id="layouts-flex-spacing">Managing flex spacing</h3>
 <p>When creating Flex layouts, the spacing is predicted, helping you to maintain your design composition.</p>
 <figure>
-  <video title="Spacing automatically calculated when adding flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-spacing-add.png" height="auto">
+  <video title="Spacing automatically calculated when adding flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-spacing-add.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-spacing-add.mp4" type="video/mp4">
   </video>
 </figure>
@@ -86,7 +86,7 @@ title: 08· Flexible Layouts
   <li>Hold <kbd>Alt/⌥</kbd> while dragging to change the value of all sides evenly.</li>
 </ul>
 <figure>
-  <video title="Changing spacing with flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-spacing.png" height="auto">
+  <video title="Changing spacing with flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-spacing.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-spacing.mp4" type="video/mp4">
   </video>
 </figure>
@@ -100,7 +100,7 @@ title: 08· Flexible Layouts
 <h4>How to create a button</h4>
 <p>A classic example that will help you create flexible buttons that grow depending on its content.</p>
 <figure>
-  <video title="Creating a flexible button with flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-button.png" height="auto">
+  <video title="Creating a flexible button with flex layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-button.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-button.mp4" type="video/mp4">
   </video>
 </figure>
@@ -108,7 +108,7 @@ title: 08· Flexible Layouts
 <h4>How to create a list</h4>
 <p>Extremely useful for ordering list items. Remember to set <strong>fit height</strong> to the container so it can adapt to the number of items.</p>
 <figure>
-  <video title="Creating a list with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-list.png" height="auto">
+  <video title="Creating a list with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-list.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-list.mp4" type="video/mp4">
   </video>
 </figure>
@@ -116,7 +116,7 @@ title: 08· Flexible Layouts
 <h4>Wrapping elements</h4>
 <p>Use the <strong>wrap</strong> property along with <strong>row</strong> direction to get the elements positioned in multiple lines.</p>
 <figure>
-  <video title="Wrapping elements with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-wrap.png" height="auto">
+  <video title="Wrapping elements with Flex Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-flex-wrap.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-flex-wrap.mp4" type="video/mp4">
   </video>
 </figure>
@@ -125,7 +125,7 @@ title: 08· Flexible Layouts
 <h2 id="layouts-grid">Grid Layout</h2>
 <p class="main-paragraph">Grid Layout allows you to efficiently organize, align, and distribute items in 2-dimensional layouts. You can create rows and columns of elements, giving you fine-grained control over their expansion, alignment, and responsiveness to various screen sizes. It's a powerful tool for creating responsive designs.</p>
 <figure>
-  <video title="A video showing different layers being grouped and dragged around the Canvas" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-main.png" height="auto">
+  <video title="A video showing different layers being grouped and dragged around the Canvas" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-main.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-grid-main.mp4" type="video/mp4">
   </video>
   <figcaption>Rearranging cells in Grid Layout</figcaption>
@@ -142,7 +142,7 @@ title: 08· Flexible Layouts
   <li>From the option at the selection menu (right click button).</li>
   <li>Pressing <kbd>Ctrl/⌘</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd>.</li>
 </ul>
-<figure><img src="/img/layouts-add.png" alt="Adding Layouts" /></figure>
+<figure><img src="/img/layouts-add.webp" alt="Adding Layouts" /></figure>
 
 <h3 id="layouts-grid-terminology">Grid layout basic terminology</h3> 
 <ul>
@@ -158,7 +158,7 @@ title: 08· Flexible Layouts
 <p>There are properties both for Grid containers and  Grid items (cells, rows, cols). Those are the same properties that you can use with CSS Grid. You can <a href="https://css-tricks.com/snippets/css/complete-guide-grid/#aa-grid-properties" target="_blank">read here detailed explanations about CSS Grid properties</a>.</p>
 
 <h4>Grid containter properties</h4>
-<figure><img src="/img/flexible-layouts/grid-properties-container.png" alt="Grid Layout properties" /></figure>
+<figure><img src="/img/flexible-layouts/grid-properties-container.webp" alt="Grid Layout properties" /></figure>
 <ul>
   <li><strong>Direction:</strong> Row, column.</li>
   <li><strong>Align items (vertically and horizontally):</strong> Start, center, end.</li>
@@ -168,7 +168,7 @@ title: 08· Flexible Layouts
 </ul>
 
 <h4>Grid cell properties</h4>
-<figure><img src="/img/flexible-layouts/grid-properties-cell.png" alt="Grid Layout properties" /></figure>
+<figure><img src="/img/flexible-layouts/grid-properties-cell.webp" alt="Grid Layout properties" /></figure>
 <strong>Auto, Manual and Area</strong>
 <p>These are different ways to manage the element's position that therefore have different code representation.</p>
 <ul>
@@ -184,7 +184,7 @@ title: 08· Flexible Layouts
 <p>To place elements inside a grid layout, just drag them or paste them in a cell or area.</p>
 <p><strong>Tip:</strong> Drag an element over a grid and then press <kbd>Ctrl</kbd> to place it as auto. That way the layer will be positioned automatically in the first available cell or area.</p>
 <figure>
-  <video title="Placing elements in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-place.png" height="auto">
+  <video title="Placing elements in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-place.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-grid-place.mp4" type="video/mp4">
   </video>
 </figure>
@@ -203,7 +203,7 @@ title: 08· Flexible Layouts
 
 <h4>Design sidebar</h4>
 <figure>
-  <video title="Edit rows and columns in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-edit-sidebar.png" height="auto">
+  <video title="Edit rows and columns in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-edit-sidebar.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-grid-edit-sidebar.mp4" type="video/mp4">
   </video>
 </figure>
@@ -220,7 +220,7 @@ title: 08· Flexible Layouts
 
 <h4>Design viewport</h4>
 <figure>
-  <video title="Edit rows and columns in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-edit.png" height="auto">
+  <video title="Edit rows and columns in a grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-edit.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-grid-edit.mp4" type="video/mp4">
   </video>
 </figure>
@@ -254,7 +254,7 @@ title: 08· Flexible Layouts
 <h3 id="layouts-grid-areas">Areas</h3>
 <p>Areas are compositions of any number of grid cells.</p>
 <figure>
-  <video title="Managing areas in grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-area.png" height="auto">
+  <video title="Managing areas in grid Layout" muted="" playsinline="" controls="" width="100%" poster="/img/flexible-layouts/layouts-grid-area.webp" height="auto">
     <source src="/img/flexible-layouts/layouts-grid-area.mp4" type="video/mp4">
   </video>
 </figure>