reduce images partials and shortcodes to one image.html

layouts/partials/header-image.html

@@ -1,10 +0,0 @@
-<img class="shadow featured"
-	{{ with .image }}
-		srcset="
-		{{ (.Resize "320x q30").RelPermalink }} 500w,
-		{{ (.Resize "600x q40").RelPermalink }} 800w,
-		{{ (.Resize "1200x q65").RelPermalink }} 2x"
-    src="{{ (.Resize "320x q30").RelPermalink }}"
-	{{ end }}
-    alt="{{ .alt }}"
-/>

layouts/partials/image.html

@@ -0,0 +1,21 @@
+<img class="{{ .class }}"
+	{{ with .image }}
+		srcset="
+    		{{- with (.Resize "600x q40") -}}
+        		{{ printf "%s %dw," .RelPermalink .Width }}
+    		{{- end -}}
+
+    		{{- with (.Resize "1200x q65") -}}
+        		{{ printf "%s %dw" .RelPermalink .Width }}
+    		{{- end -}}"
+
+    	sizes="
+    		{{- with (.Resize "600x q40") -}}
+    			{{- printf "(max-width: 700px) %dpx," .Width -}}
+    		{{- end -}}
+    		800px"
+
+        src="{{ (.Resize "1200x q65").RelPermalink }}"
+	{{ end }}
+    alt="{{ .alt }}"
+>

layouts/partials/responsive-image.html

@@ -1,10 +0,0 @@
-<img class="{{ .class | default "fill-wh"}}"
-	{{ with .context.Resources.GetMatch .context.Params.featured.url }}
-		srcset="
-		{{ (.Resize "320x q30").RelPermalink }} 500w,
-		{{ (.Resize "600x q40").RelPermalink }} 800w,
-		{{ (.Resize "1200x q65").RelPermalink }} 2x"
-    src="{{ (.Resize "320x q30").RelPermalink }}"
-    alt="{{ .Params.alt }}"
-	{{ end }}
-/>

layouts/shortcodes/image.html

@@ -0,0 +1,3 @@
+{{ $image := .Page.Resources.GetMatch (.Get "src") }}
+{{ partial "image.html" (dict "image" $image "alt" (.Get "alt") "class" "fill-wh") }}
+

layouts/shortcodes/responsive-image.html

@@ -1,11 +0,0 @@
-<img class="{{ .Get "class" | default "fill-wh" }}"
-	{{ with .Get "src" | .Page.Resources.GetMatch }}
-		srcset="
-		{{ (.Resize "320x q30").RelPermalink }} 500w,
-		{{ (.Resize "600x q40").RelPermalink }} 800w,
-		{{ (.Resize "1200x q65").RelPermalink }} 2x"
-	src="{{ (.Resize "320x q30").RelPermalink }}"
-	{{ end }}
-	alt="{{ .Get "alt" }}"
-/>
-