diff --git a/_includes/page__hero.html b/_includes/page__hero.html
index dd1c26fb..0becaecc 100644
--- a/_includes/page__hero.html
+++ b/_includes/page__hero.html
@@ -1,5 +1,12 @@
+{% assign img = include.img %}
+<picture>
+    <source type="image/webp" srcset="/assets/images/posts/{{ page.slug }}/{{ img }}.webp" >
+    <img src="/assets/images/posts/{{ page.slug }}/{{ img }}.{{ include.ext }}" alt="{{ include.alt }}" />
+</picture>
+
 {% capture overlay_img_path %}{{ page.header.overlay_image | relative_url }}{% endcapture %}
 
+
 {% if page.header.overlay_filter contains "gradient" %}
   {% capture overlay_filter %}{{ page.header.overlay_filter }}{% endcapture %}
 {% elsif page.header.overlay_filter contains "rgba" %}
diff --git a/_includes/picture.html b/_includes/picture.html
new file mode 100644
index 00000000..71cdf5f8
--- /dev/null
+++ b/_includes/picture.html
@@ -0,0 +1,5 @@
+{% assign img = include.img %}
+<picture>
+    <source type="image/webp" srcset="/assets/images/posts/{{ page.slug }}/{{ img }}.webp" >
+    <img src="/assets/images/posts/{{ page.slug }}/{{ img }}.{{ include.ext }}" alt="{{ include.alt }}" />
+</picture>