diff --git a/sass/style.scss b/sass/style.scss
index 2cfedd6..1e5b6fb 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -56,6 +56,10 @@ a {
   }
 }
 
+img,video {
+  background-color: var(--grey-dark);
+}
+
 h1,
 h2,
 h3,
diff --git a/templates/gallery.html b/templates/gallery.html
index e70aaa1..54bc640 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -6,9 +6,9 @@
 <br><br>
 <div class="gallery">
 {% for page in section.pages -%}
-    {% set image = resize_image(path=page.extra.picture_src, width=260, height=180, op="fit_width") %}
+    {% set image = resize_image(path=page.extra.picture_src, width=260*2, height=180*2, op="fit_width", format="avif") %}
     <a href="{{ page.permalink }}">
-      <img src="{{ image.url }}" alt="{{page.description}}" fetchpriority=high />
+      <img src="{{ image.url }}" height="{{image.height}}" width="{{image.width}}" alt="{{page.description}}" fetchpriority=high />
     </a>
 {%- endfor %}
 </div>
diff --git a/templates/macros/figures.html b/templates/macros/figures.html
index a07d9ef..0292365 100644
--- a/templates/macros/figures.html
+++ b/templates/macros/figures.html
@@ -1,6 +1,9 @@
 {% macro image(src, caption, class="") %}
+{% set mdata = get_image_metadata(path=src) %}
+{# {% set image = resize_image(path=src, height=mdata.height, width=mdata.width, format="webp") %} #}
+
 <figure class="{% if class %} {{ class }} {% endif %}">
-  <img src="{{ get_url(path=src) }}" loading="lazy" alt="{{caption | default(value='')}}" decoding="async" class="zoomable">
+  <img src="{{ src }}" loading="lazy" alt="{{caption | default(value='')}}" decoding="async" class="zoomable">
   {% if caption != "" %}
     <figcaption>{{ caption  | markdown() | safe }}</figcaption>
   {% endif %}
@@ -10,6 +13,7 @@
 
 
 {% macro video(src, caption, loop=false, controls=true, autoplay=false, poster="", class="") %}
+
 <figure class="{% if class %} {{ class }} {% endif %}">
   <video
       {% if poster %} poster="{{ poster }}"{% endif %}