Adding image styling to help reduce CLS

Reference: https://web.dev/articles/optimize-cls#measure-cls-in-field

Author: ragebflame

sass/main.scss

@@ -104,8 +104,9 @@ mark {
 
 img {
   display: block;
-  max-width: 100%;
   height: auto;
+  width: 100%;
+  max-width: 100%;
   border-radius: 4px;
 
   &.left {
@@ -151,6 +152,8 @@ p {
 
 figure {
   display: table;
+  height: auto;
+  width: 100%;
   max-width: 100%;
   margin: 25px 0;
 

templates/shortcodes/figure.html

@@ -9,7 +9,7 @@
   %} {% endfor %} {% set default_resized = resize_image(path=abspath,
   width=config.extra.images_default_size, op="fit_width", format="webp",
   quality=90) %} <img alt="{{ alt }}" src="{{ default_resized.url | safe }}"
-  srcset="{{ srcset_list | join(sep=" , ") | safe }}" /> {% if caption %}
+  srcset="{{ srcset_list | join(sep=", ") | safe }}" /> {% if caption %}
   <figcaption
     class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"
     {%

templates/shortcodes/gif.html

@@ -18,5 +18,7 @@
   {%-
   endif
   %}
+  width="480"
+  height="272"
 />
 {% endif %}

templates/shortcodes/image.html

@@ -7,4 +7,4 @@
 endfor %} {% set default_resized = resize_image(path=abspath,
 width=config.extra.images_default_size, op="fit_width", format="webp",
 quality=90) %} <img alt="{{ alt }}" src="{{ default_resized.url | safe }}"
-srcset="{{ srcset_list | join(sep=" , ") | safe }}" />
+srcset="{{ srcset_list | join(sep=", ") | safe }}" />