Use properly-resized big image on post layout

_layouts/post.html

@@ -7,7 +7,30 @@
     <h1 class="text-center">{{- page.title -}}</h1>
     <p class="text-center text-muted"><time datetime="{{ page.date | date_to_xmlschema }}">{{ page.date | date_to_string }}</time> &ndash; {{ page.category }}</p>
     {%- if page.big_image -%}
-      <img src="{{ site.url }}/assets/img/{{ page.big_image }}" class="img-fluid mb-4" alt="{{ page.big_image_alt }}">
+      {% assign big_image_path = page.big_image | prepend: "/assets/img/" %}
+      <img
+        srcset="
+          {% thumbnail_img big_image_path 1080 %} 1080w,
+          {% thumbnail_img big_image_path 576 %} 576w,
+          {% thumbnail_img big_image_path 520 %} 520w,
+          {% thumbnail_img big_image_path 420 %} 420w,
+          {% thumbnail_img big_image_path 380 %} 380w,
+          {% thumbnail_img big_image_path 300 %} 300w,
+          {% thumbnail_img big_image_path 200 %} 200w
+        "
+        sizes="
+          (max-width: 200px) 200px,
+          (max-width: 300px) 300px,
+          (max-width: 380px) 380px,
+          (max-width: 420px) 420px,
+          (max-width: 520px) 520px,
+          (max-width: 576px) 576px,
+          1080px
+        "
+        src="{{ big_image_path }}"
+        class="img-fluid mb-4"
+        alt="{{ page.big_image_alt }}"
+      >
     {%- endif -%}
     {{- content -}}
   </article>