💄 Styles section images compressed

user-guide/styling/index.njk

@@ -20,7 +20,7 @@ title: 06· Styling
   <li>The <a href="/user-guide/libraries/">assets library</a>.</li>
 </ul>
 <figure>
-  <video muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-library.png" height="auto">
+  <video muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-library.webp" height="auto">
     <source src="/img/styling/color-library.mp4" type="video/mp4">
   </video>
   <figcaption>Adding color fills from the assets library</figcaption>
@@ -28,25 +28,25 @@ title: 06· Styling
 <p>You can also set the <strong>opacity</strong> for custom fill colors.</p>
 <p><strong>TIP:</strong> Select an element and press numbers from 0 to 9 to set their fill opacity. 1 to get 10%, 2 to get 20% and so on. You can set precise opacity by pressing two numbers consecutively in less than a second (for example 5 and 4 to set 54% opacity).</p>
 <figure>
-  <video title="Change opacity" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-opacity.png" height="auto">
+  <video title="Change opacity" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-opacity.webp" height="auto">
     <source src="/img/styling/color-opacity.mp4" type="video/mp4">
   </video>
 </figure>
 <p>You can add as many fills as you want to the same layer. This opens endless graphic possibilities like combining gradients and blending modes in the same element to create unique visual effects.</p>
 <figure>
-  <img alt="Multiple fills" src="/img/styling/fill-multiple.png"/>
+  <img alt="Multiple fills" src="/img/styling/fill-multiple.webp"/>
 </figure>
 
 <h4>Remove a fill</h4>
 <p>To <strong>remove a fill</strong> from a selected object, press the “-” button in the fill section.</p>
 <figure>
-  <img alt="Multiple fills" src="/img/styling/fill-remove.png"/>
+  <img alt="Multiple fills" src="/img/styling/fill-remove.webp"/>
 </figure>
 
 <h3 id="color-picker">Color picker</h3>
 <p>Here you have the anatomy of the color picker:</p>
 <figure>
-  <img alt="Color picker" src="/img/styling/color-picker.png"/>
+  <img alt="Color picker" src="/img/styling/color-picker.webp"/>
 </figure>
 <ol>
   <li><strong>Eyedropper</strong> - Allows you to pick any color of the objects at the viewport.</li>
@@ -61,7 +61,7 @@ title: 06· Styling
 <h3 id="color-palette">Color palette</h3>
 <p>The color palette allows you to have a selected color library in plain sight.</p>
 <figure>
-  <video title="color palette" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-palette.png" height="auto">
+  <video title="color palette" muted="" playsinline="" controls="" width="100%" poster="/img/styling/color-palette.webp" height="auto">
     <source src="/img/styling/color-palette.mp4" type="video/mp4">
   </video>
 </figure>
@@ -83,13 +83,13 @@ title: 06· Styling
 <h3 id="selected-colors">Selected colors</h3>
 <p>All of the colors that are contained within a selection of objects are showcased at the sidebar so you can play with the colors of a group without the hassles of individual selection.</p>
 <figure>
-  <img alt="Selected colors" src="/img/styling/color-selected.png"/>
+  <img alt="Selected colors" src="/img/styling/color-selected.webp"/>
 </figure>
 
 <h3 id="strokes">Strokes</h3>
 <p>Strokes can be added to most of the objects at Penpot (rectangles, ellipses, boards, curves and images).</p>
 <figure>
-  <video title="strokes" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke.png" height="auto">
+  <video title="strokes" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke.webp" height="auto">
     <source src="/img/styling/stroke.mp4" type="video/mp4">
   </video>
 </figure>
@@ -102,13 +102,13 @@ title: 06· Styling
 </ul>
 <p>You can add as many strokes as you want to the same layer.</p>
 <figure>
-  <img alt="Multiple strokes" src="/img/styling/stroke-multiple.png"/>
+  <img alt="Multiple strokes" src="/img/styling/stroke-multiple.webp"/>
 </figure>
 
 <h3 id="stroke-caps">Stroke Caps</h3>
 <p>Ever needed an arrow to point something? You can style the ends of any open paths selecting different styles for each end of an open path.</p>
 <figure>
-  <video title="Stroke cap" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke-cap.png" height="auto">
+  <video title="Stroke cap" muted="" playsinline="" controls="" width="100%" poster="/img/styling/stroke-cap.webp" height="auto">
     <source src="/img/styling/stroke-cap.mp4" type="video/mp4">
   </video>
 </figure>
@@ -127,7 +127,7 @@ title: 06· Styling
 <h3 id="radius">Corner radius</h3>
 <p>You can set values for corner radius to rectangles and images. There’s also the option to edit each corner individually.</p>
 <figure>
-  <video title="Corner radius" muted="" playsinline="" controls="" width="100%" poster="/img/styling/corners.png" height="auto">
+  <video title="Corner radius" muted="" playsinline="" controls="" width="100%" poster="/img/styling/corners.webp" height="auto">
     <source src="/img/styling/corners.mp4" type="video/mp4">
   </video>
 </figure>
@@ -136,7 +136,7 @@ title: 06· Styling
 <h3 id="shadow">Shadow</h3>
 <p>Adding shadows is easy from the design panel. You can add as many as you want.</p>
 <figure>
-  <img alt="Layer shadows" src="/img/styling/shadow.png"/>
+  <img alt="Layer shadows" src="/img/styling/shadow.webp"/>
 </figure>
 <p>Shadow options are:</p>
 <ul>
@@ -152,7 +152,7 @@ title: 06· Styling
 <p>You can set a blur for each and every object at Penpot.</p>
 <p><strong></strong>Applying a lot and/or big values for blurs can affect Penpot’s performance as it requires a lot from the browser.</p>
 <figure>
-  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.png" height="auto">
+  <video title="Apply blur to a layer" muted="" playsinline="" controls="" width="100%" poster="/img/styling/blur.webp" height="auto">
     <source src="/img/styling/blur.mp4" type="video/mp4">
   </video>
 </figure>