diff --git a/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_1024x512_fill_catmullrom_top.png b/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_1024x512_fill_catmullrom_top.png
new file mode 100644
index 000000000..aac9edb66
Binary files /dev/null and b/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_1024x512_fill_catmullrom_top.png differ
diff --git a/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_512x256_fill_catmullrom_top.png b/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_34aaa1bbe5cc1b4798bfff8f28e1033e.png
similarity index 100%
rename from resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_512x256_fill_catmullrom_top.png
rename to resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_34aaa1bbe5cc1b4798bfff8f28e1033e.png
diff --git a/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_600x300_fill_catmullrom_top.png b/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_600x300_fill_catmullrom_top.png
deleted file mode 100644
index 4cee063ce..000000000
Binary files a/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_600x300_fill_catmullrom_top.png and /dev/null differ
diff --git a/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_940x0_resize_catmullrom.png b/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_940x0_resize_catmullrom.png
deleted file mode 100644
index 96ff188b9..000000000
Binary files a/resources/_gen/images/showcase/template/featured-template_hu2f0d11388f944348b232a431caeb965b_41270_940x0_resize_catmullrom.png and /dev/null differ
diff --git a/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html b/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
index 8c2f2e9a3..337fd2fc8 100644
--- a/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
+++ b/themes/gohugoioTheme/layouts/partials/home-page-sections/showcase.html
@@ -7,8 +7,14 @@
         {{ range $p := first 10 (where .Site.RegularPages "Section" "showcase") }}
         {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
         {{ with $img }}
-        {{ $img := .Fill "512x256 top" }}
-        <a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $img.Width }}px;height: {{ $img.Height }}" data-bg="{{ $img.RelPermalink }}">{{/* data-bg uses a lazyload script to load the actual background image. It is located here: themes/gohugoioTheme/src/js/lazysizes.js */}}
+        {{ $big := .Fill "1024x512 top" }}
+        {{ $small := $big.Resize "512x" }}
+        <a href="{{ $p.RelPermalink}}" class="tile lazyload cover dib f4 h5 ml1 mr4 bg-black relative mw-100 shadow-5" style="width:{{ $small.Width }}px;" 
+          data-bg="{{ $img.RelPermalink }}"
+          data-sizes="auto" 
+           data-srcset="{{ $small.RelPermalink }} 1x,
+          {{ $big.RelPermalink }} 2x" data-src="small"
+        >
           {{with $p.Title}}
           <div class="details absolute bottom-0 f3-ns f4 left-0 o-0 right-0 top-0">
             <div class="absolute bottom-0 pa2 tc white">
diff --git a/themes/gohugoioTheme/layouts/showcase/list.html b/themes/gohugoioTheme/layouts/showcase/list.html
index 0553e4af1..709219947 100644
--- a/themes/gohugoioTheme/layouts/showcase/list.html
+++ b/themes/gohugoioTheme/layouts/showcase/list.html
@@ -22,12 +22,16 @@
 
 
 {{define "showcase_items"}}
-  <a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white db flex-auto-ns hover-bg-near-white mb3 mr3 w-100 w-30-l">
+  <a href="{{.Permalink}}" class="b--moon-gray ba bg-animate bg-white db flex-auto-ns hover-bg-near-white mb3 mr3 w-100 w-30-l" style="max-width: 1024px;">
     <div class="flex flex-column black h-100 mb2 pa3 pa4-l">
       {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
       {{ with $img }}
-      {{ $img := .Fill "600x300 top" }}
-      <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+" data-src="{{ .RelPermalink }}" class="grow img lazyload" />
+      {{ $big := .Fill "1024x512 top" }}
+      {{ $small := $big.Resize "512x" }}
+      <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiIHZpZXdCb3g9IjAgMCAxNjAwIDkwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGU+UmVjdGFuZ2xlPC90aXRsZT48ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz48ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIwIiB5PSIwIiB3aWR0aD0iMTYwMCIgaGVpZ2h0PSI5MDAiLz48L2c+PC9zdmc+" 
+          data-sizes="auto" 
+          data-srcset="{{ $small.RelPermalink }} 1x,
+          {{ $big.RelPermalink }} 2x" data-bg="{{ $small.RelPermalink }}" class="grow img lazyload" style="display: block;  width: 100%; height: auto;" />
       {{end}}
       <div style="margin-top:auto;">{{/* the margin aligns to the bottom */}}
         <h2 class="dib f3 mt4">
diff --git a/themes/gohugoioTheme/layouts/showcase/single.html b/themes/gohugoioTheme/layouts/showcase/single.html
index 55fec7f49..c3e15127e 100644
--- a/themes/gohugoioTheme/layouts/showcase/single.html
+++ b/themes/gohugoioTheme/layouts/showcase/single.html
@@ -35,8 +35,9 @@ Showcase: {{ .Title }}
 {{define "main-column"}}
   {{ $img := (.Resources.ByType "image").GetMatch "*featured*" }}
   {{ with $img }}
-    {{ $img := .Resize "940x" }}
-      <img src="{{ $img.RelPermalink }}" alt="{{ $img.Title }}" width="{{ $img.Width }}"  class="mw-100 b--light-gray ba">
+     {{ $big := .Fill "1024x512 top" }}
+     {{ $small := $big.Resize "512x" }}
+      <img srcset="{{ $small.RelPermalink }} 1x, {{ $big.RelPermalink }} 2x" alt="{{ $img.Title }}" width="{{ $big.Width }}"  class="mw-100 b--light-gray ba">
   {{ end }}
    <div class="mid-gray nested-copy-line-height nested-img nested-links">
   {{with .Params.byline }}