shrink images for more screen sizes

layouts/partials/responsive-image.html

@@ -2,13 +2,10 @@
 <img class="{{ .class | default "fill-wh"}}"
 	{{ with resources.Get .context.Params.featured.url }}
 		srcset="
-		  {{ (.Resize "420x q50").RelPermalink }} 420w,
+		{{ (.Resize "320x q30").RelPermalink }} 500w,
-	    {{ (.Resize "700x q65").RelPermalink }} 700w,
+		{{ (.Resize "600x q40").RelPermalink }} 800w,
-	    {{ (.Resize "1200x q65").RelPermalink }} 1200w"
+		{{ (.Resize "1200x q65").RelPermalink }} 2x"
-	  sizes="(max-width: 400px) 420px,
+	src="{{ (.Resize "320x q30").RelPermalink }}"
-	  (max-width: 1000px) 700px,
-	  1200px"
-	  src="{{ .RelPermalink }}"
 	{{ end }}
 	alt="{{ .context.Params.featured.alt }}"
 />
@@ -16,14 +13,11 @@
 <img class="{{ .class | default "fill-wh"}}"
 	{{ with .context.Resources.GetMatch .context.Params.featured.url }}
 		srcset="
-		  {{ (.Resize "420x q50").RelPermalink }} 420w,
+		{{ (.Resize "320x q30").RelPermalink }} 500w,
-	    {{ (.Resize "700x q65").RelPermalink }} 700w,
+		{{ (.Resize "600x q40").RelPermalink }} 800w,
-	    {{ (.Resize "1200x q65").RelPermalink }} 1200w"
+		{{ (.Resize "1200x q65").RelPermalink }} 2x"
-	  sizes="(max-width: 400px) 420px,
+    src="{{ (.Resize "320x q30").RelPermalink }}"
-	  (max-width: 1000px) 700px,
+    alt="{{ .Params.alt }}"
-	  1200px"
-	  src="{{ .RelPermalink }}"
-	  alt="{{ .Params.alt }}"
 	{{ end }}
 />
 {{ end }}

layouts/shortcodes/responsive-image.html

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