diff --git a/content/_index.md b/content/_index.md
index 80a2cac46fc5fc763b7007963c71baf5fa9693f2..f76807daa7f39a602dde5f7ce9518f7c724933c1 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -22,7 +22,7 @@ The SOAFEE architecture will seek to re-use existing open standards for the diff
 
 SOAFEE builds on top of these specifications and standards with a reference framework to standardize key non-differentiating middle-layers, such as the hypervisor, operating systems, container runtime and hardware abstraction layers.  
 
-{{< figure src="images/SOAFEE-Web-Image1.png" alt="SOAFEE architectural view" width="100%">}}
+{{< img src="images/SOAFEE-Web-Image1.png" alt="SOAFEE architectural view" media_page="headless_media">}}
 
 An initial version of SOAFEE, called the SOAFEE R1 is available to download.  Instructions on how to build it are available at the [SOAFEE GitLab repository](https://gitlab.arm.com/soafee/working-groups/-/tree/main/groups/ecosystem/auto_reference_stack). It serves as a starting point to enable automotive DevOps using cloud-native fundamentals.  
 
diff --git a/static/images/SOAFEE-Web-Image1.png b/content/headless_media/images/SOAFEE-Web-Image1.png
similarity index 100%
rename from static/images/SOAFEE-Web-Image1.png
rename to content/headless_media/images/SOAFEE-Web-Image1.png
diff --git a/themes/soafee/assets/sass/styles.scss b/themes/soafee/assets/sass/styles.scss
index 87093ed6747973039a162217affc7a8e5d218039..143c5829d667c089f1c0051ad0712a0606c46fef 100644
--- a/themes/soafee/assets/sass/styles.scss
+++ b/themes/soafee/assets/sass/styles.scss
@@ -3,15 +3,30 @@ h1, h2, h3 {
     padding-top: 15px;
 }
 
+img {
+  width: 100%;
+  height: auto;
+}
+
+// Banner styling
+
 .banner-img{
   margin:0 20% 5%;
 }
 
+// Imagegrid styling
+
 .imagegrid img {
   width: 70%;
   margin: 0 15% 5%;
 }
 
+// Navbar styling
+
+.navbar-brand img {
+  height: 30px;
+}
+
 // Banner styling
 
 .banner h3 {
diff --git a/themes/soafee/layouts/partials/img.html b/themes/soafee/layouts/partials/img.html
new file mode 100644
index 0000000000000000000000000000000000000000..25df858d3871606bc47bbe34f761c5f884b43cfe
--- /dev/null
+++ b/themes/soafee/layouts/partials/img.html
@@ -0,0 +1,31 @@
+<!-- Bootstrap standard breakpoints -->
+{{ $breakpoints := dict "sm" 576 "md" 768 "lg" 992 "xl" 1200 "xxl" 1400 }}
+
+<!-- TODO: Filter breakpoints if needed -->
+
+{{ $alt := .alt | default "" }}
+{{ $columns := .columns | default 1 }}
+
+<!-- Allow specifying a resource bundle to source the image from -->
+{{ $mediaPage := .media_page | default .Page.File.Path }}
+{{ $resourcesPage := .site.GetPage $mediaPage }}
+{{ $image := $resourcesPage.Resources.GetMatch .src }}
+
+
+{{ $imgSrcSet := slice }}
+{{ $sizes := slice }}
+{{ range $breakpoints }}
+  {{ $size := printf "%dx" ( div . $columns ) }}
+  {{ $resize := $image.Resize $size }}
+  {{ $imgSrcSet = $imgSrcSet | append (printf "%s %dw" $resize.RelPermalink . )}}
+  {{ $sizes = $sizes | append (printf "(max-width: %dpx) %dpx" $resize.Width $resize.Height )}}
+{{ end }}
+{{ $imgSrcSet = (delimit $imgSrcSet ",") }}
+{{ $sizes = (delimit $sizes ",") }}
+
+<img src="{{ $image.RelPermalink }}"
+     srcset="{{ $imgSrcSet }}"
+     sizes="{{ $sizes }}"
+     width="{{ $image.Width }}"
+     height="{{ $image.Height }}"
+     alt={{ $alt }}>
diff --git a/themes/soafee/layouts/shortcodes/imagegrid.html b/themes/soafee/layouts/shortcodes/imagegrid.html
index 251674af3260cecab463d05ca218860a9b17563b..80091d3cf130689d51a8d7ca60d9997154a7c384 100644
--- a/themes/soafee/layouts/shortcodes/imagegrid.html
+++ b/themes/soafee/layouts/shortcodes/imagegrid.html
@@ -30,13 +30,8 @@
             {{ end }}
         {{ end }}
 
-        {{ $image := $resourcesPage.Resources.GetMatch .image }}
-        {{ $placeholder := $image.Fit "600x300" }} 
-
         <div class="col-md">
-            <a href="{{.url}}" style="width:100%">
-                <img src="{{ $placeholder.RelPermalink }}" alt="{{ .alt }}">
-            </a>
+        {{ partial "img" (dict "site" $.Site "src" .image "alt" .alt "columns" 3 "media_page" $mediaPage )}}
         </div>
 
         {{ if eq $row $lastRow }}
@@ -53,4 +48,4 @@
             <div class="w-100"></div>
         {{ end }}
     {{ end }}
-</div>
\ No newline at end of file
+</div>
diff --git a/themes/soafee/layouts/shortcodes/img.html b/themes/soafee/layouts/shortcodes/img.html
new file mode 100644
index 0000000000000000000000000000000000000000..d14a2bff74a62514f6390f3784b559ed4bf122d3
--- /dev/null
+++ b/themes/soafee/layouts/shortcodes/img.html
@@ -0,0 +1,10 @@
+
+{{ $src := .Get "src" }}
+{{ $alt := .Get "alt" | default "" }}
+{{ $columns := .Get "columns" | default 1 }}
+
+<!-- Allow specifying a resource bundle to source the image from -->
+{{ $mediaPage := .Get "media_page" | default .Page.File.Path }}
+
+<!-- Shared implementation is in the shortcode -->
+{{ partial "img" (dict "site" $.Site "src" $src "alt" $alt "columns" $columns "media_page" $mediaPage )}}