diff --git a/Gemfile b/Gemfile
index 9634030b57d3..bac9010a0936 100644
--- a/Gemfile
+++ b/Gemfile
@@ -6,6 +6,7 @@ group :jekyll_plugins do
     gem 'jekyll-feed'
     gem 'jekyll-github-metadata'
     gem 'jekyll-paginate-v2'
+    gem 'jekyll-responsive-image'
     gem 'jekyll-scholar'
     gem 'jekyll-sitemap'
     gem 'jekyll-target-blank'
diff --git a/_config.yml b/_config.yml
index 9172ef0e8bc9..2e175b70bd9f 100644
--- a/_config.yml
+++ b/_config.yml
@@ -154,6 +154,7 @@ plugins:
   - jekyll-feed
   - jekyll-github-metadata
   - jekyll-paginate-v2
+  - jekyll-responsive-image
   - jekyll-sitemap
   - jekyll-target-blank
   - jekyll-twitter-plugin
@@ -191,6 +192,24 @@ scholar:
 
   query: "@*"
 
+
+# -----------------------------------------------------------------------------
+# Jekyll Responsive Images
+# -----------------------------------------------------------------------------
+
+responsive_image:
+  template: _includes/responsive_img.html
+  # Quality to use when resizing images.
+  default_quality: 80
+  sizes:
+    - width: 480
+    - width: 800
+    - width: 1400
+      quality: 90
+  # Strip EXIF and other JPEG profiles. Helps to minimize JPEG size.
+  strip: true
+
+
 # -----------------------------------------------------------------------------
 # Jekyll Diagrams
 # -----------------------------------------------------------------------------
diff --git a/_includes/projects.html b/_includes/projects.html
index 1af5547d30ba..396690d754b1 100644
--- a/_includes/projects.html
+++ b/_includes/projects.html
@@ -6,7 +6,10 @@
   {% endif %}
     <div class="card hoverable">
       {% if project.img %}
-      <img src="{{ project.img | relative_url }}" alt="project thumbnail">
+        {% responsive_image_block %}
+          path: {{ project.img }}
+          alt: "project thumbnail"
+        {% endresponsive_image_block %}
       {% endif %}
       <div class="card-body">
         <h2 class="card-title text-lowercase">{{ project.title }}</h2>
diff --git a/_includes/projects_horizontal.html b/_includes/projects_horizontal.html
index d1d7924fa6c2..e0dd5f20349c 100644
--- a/_includes/projects_horizontal.html
+++ b/_includes/projects_horizontal.html
@@ -8,7 +8,10 @@
       <div class="row g-0">
         {% if project.img %}
         <div class="card-img col-md-6">
-          <img src="{{ project.img | relative_url }}" alt="project thumbnail">
+          {% responsive_image_block %}
+            path: {{ project.img }}
+            alt: "project thumbnail"
+          {% endresponsive_image_block %}
         </div>
         <div class="col-md-6">
         {% else %}
diff --git a/_includes/responsive_img.html b/_includes/responsive_img.html
new file mode 100644
index 000000000000..c6a06ca83a05
--- /dev/null
+++ b/_includes/responsive_img.html
@@ -0,0 +1,8 @@
+{% assign largest = resized | sort: 'width' | last %}
+{% capture srcset %}
+{% for i in resized %}
+    {{ i.path | relative_url }} {{ i.width }}w,
+{% endfor %}
+{% endcapture %}
+
+<img {% if class %}class="{{ class }}"{% endif %}  src="{{ largest.path | relative_url }}" srcset="{{ srcset | strip_newlines }}/ {{ path }} {{ original.width }}w" {% if alt %}alt="{{ alt }}"{% endif %} {% if title %}title="{{ title }}"{% endif %} {% if zoomable %}data-zoomable{% endif %}/>
diff --git a/_layouts/about.html b/_layouts/about.html
index bb3b6b1248bb..dd30418d9872 100644
--- a/_layouts/about.html
+++ b/_layouts/about.html
@@ -15,7 +15,10 @@ <h1 class="post-title">
     {% if page.profile %}
     <div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
       {% if page.profile.image %}
-        <img class="img-fluid z-depth-1 rounded" src="{{ page.profile.image | prepend: '/assets/img/' | relative_url }}">
+        {% responsive_image_block %}
+          path: {{ page.profile.image | prepend: 'assets/img/' }}
+          class: "img-fluid z-depth-1 rounded"
+        {% endresponsive_image_block %}
       {% endif %}
       {% if page.profile.address %}
         <div class="address">
diff --git a/_posts/_2015-05-15-images.md b/_posts/_2015-05-15-images.md
index c1dd4865643f..1ded7f279ccd 100644
--- a/_posts/_2015-05-15-images.md
+++ b/_posts/_2015-05-15-images.md
@@ -8,12 +8,12 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow
 
 <div class="row mt-3">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/9.jpg">
+        {% responsive_image path: assets/img/9.jpg class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="row mt-3">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
+        {% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -21,10 +21,17 @@ Jean shorts raw denim Vice normcore, art party High Life PBR skateboard stumptow
 </div>
 <div class="row mt-3">
     <div class="col-sm mt-3 mt-md-0">
+<<<<<<< HEAD:_posts/_2015-05-15-images.md
         <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/8.jpg">
     </div>
     <div class="col-sm mt-3 mt-md-0">
         <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg">
+=======
+        {% responsive_image path: assets/img/8.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% responsive_image path: assets/img/10.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
+>>>>>>> 174024e (Add support for responsive images (#439)):_posts/2015-05-15-images.md
     </div>
 </div>
 
@@ -32,6 +39,7 @@ Slow-carb four dollar toast Helvetica pop-up. Kale chips next level literally tr
 
 <div class="row mt-3">
     <div class="col-sm mt-3 mt-md-0">
+<<<<<<< HEAD:_posts/_2015-05-15-images.md
         <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/11.jpg">
     </div>
     <div class="col-sm mt-3 mt-md-0">
@@ -39,5 +47,14 @@ Slow-carb four dollar toast Helvetica pop-up. Kale chips next level literally tr
     </div>
     <div class="col-sm mt-3 mt-md-0">
         <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg">
+=======
+        {% responsive_image path: assets/img/11.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% responsive_image path: assets/img/12.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
+    </div>
+    <div class="col-sm mt-3 mt-md-0">
+        {% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
+>>>>>>> 174024e (Add support for responsive images (#439)):_posts/2015-05-15-images.md
     </div>
 </div>
diff --git a/_projects/1_project.md b/_projects/1_project.md
index ea09a99b1fdf..9b920a38fe0f 100644
--- a/_projects/1_project.md
+++ b/_projects/1_project.md
@@ -2,7 +2,7 @@
 layout: page
 title: project 1
 description: a project with a background image
-img: /assets/img/12.jpg
+img: assets/img/12.jpg
 importance: 1
 category: work
 ---
@@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
 
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
 </div>
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
 To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
 Here's the code for the last row of images above:
 
+{% raw %}
 ```html
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 ```
+{% endraw %}
diff --git a/_projects/2_project.md b/_projects/2_project.md
index 7a7de4bb3759..1a61208a0a86 100644
--- a/_projects/2_project.md
+++ b/_projects/2_project.md
@@ -2,7 +2,7 @@
 layout: page
 title: project 2
 description: a project with a background image
-img: /assets/img/3.jpg
+img: assets/img/3.jpg
 importance: 2
 category: work
 ---
@@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
 
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
 </div>
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
 To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
 Here's the code for the last row of images above:
 
+{% raw %}
 ```html
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 ```
+{% endraw %}
diff --git a/_projects/3_project.md b/_projects/3_project.md
index db5ad61d8855..f7dd8ad30753 100644
--- a/_projects/3_project.md
+++ b/_projects/3_project.md
@@ -2,7 +2,7 @@
 layout: page
 title: project 3
 description: a project that redirects to another website
-img: /assets/img/7.jpg
+img: assets/img/7.jpg
 redirect: https://unsplash.com
 importance: 3
 category: work
@@ -23,13 +23,13 @@ To give your project a background in the portfolio page, just add the img tag to
 
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -37,7 +37,7 @@ To give your project a background in the portfolio page, just add the img tag to
 </div>
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -51,10 +51,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -67,13 +67,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
 To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
 Here's the code for the last row of images above:
 
+{% raw %}
 ```html
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 ```
+{% endraw %}
diff --git a/_projects/4_project.md b/_projects/4_project.md
index bb19465b18ed..c7d587e71f26 100644
--- a/_projects/4_project.md
+++ b/_projects/4_project.md
@@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
 
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
 </div>
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
 To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
 Here's the code for the last row of images above:
 
+{% raw %}
 ```html
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 ```
+{% endraw %}
diff --git a/_projects/5_project.md b/_projects/5_project.md
index 0e07044327ff..78697dfb2667 100644
--- a/_projects/5_project.md
+++ b/_projects/5_project.md
@@ -2,7 +2,7 @@
 layout: page
 title: project 5
 description: a project with a background image
-img: /assets/img/1.jpg
+img: assets/img/1.jpg
 importance: 3
 category: fun
 ---
@@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
 
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
 </div>
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
 To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
 Here's the code for the last row of images above:
 
+{% raw %}
 ```html
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 ```
+{% endraw %}
diff --git a/_projects/6_project.md b/_projects/6_project.md
index e3fa046b72f9..6b8719c624fb 100644
--- a/_projects/6_project.md
+++ b/_projects/6_project.md
@@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
 
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/1.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/3.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
 </div>
 <div class="row">
     <div class="col-sm mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/5.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
 
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 <div class="caption">
@@ -66,13 +66,15 @@ Just wrap your images with `<div class="col-sm">` and place them inside `<div cl
 To make images responsive, add `img-fluid` class to each; for rounded corners and shadows use `rounded` and `z-depth-1` classes.
 Here's the code for the last row of images above:
 
+{% raw %}
 ```html
 <div class="row justify-content-sm-center">
     <div class="col-sm-8 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/6.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
     <div class="col-sm-4 mt-3 mt-md-0">
-        <img class="img-fluid rounded z-depth-1" src="{{ '/assets/img/11.jpg' | relative_url }}" alt="" title="example image"/>
+        {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
     </div>
 </div>
 ```
+{% endraw %}
diff --git a/assets/resized/1-480x320.jpg b/assets/resized/1-480x320.jpg
new file mode 100644
index 000000000000..20a94fc3587d
Binary files /dev/null and b/assets/resized/1-480x320.jpg differ
diff --git a/assets/resized/1-800x534.jpg b/assets/resized/1-800x534.jpg
new file mode 100644
index 000000000000..6e4c3492bbbe
Binary files /dev/null and b/assets/resized/1-800x534.jpg differ
diff --git a/assets/resized/10-1400x933.jpg b/assets/resized/10-1400x933.jpg
new file mode 100644
index 000000000000..37a8fb6965d6
Binary files /dev/null and b/assets/resized/10-1400x933.jpg differ
diff --git a/assets/resized/10-480x320.jpg b/assets/resized/10-480x320.jpg
new file mode 100644
index 000000000000..652864bba9cf
Binary files /dev/null and b/assets/resized/10-480x320.jpg differ
diff --git a/assets/resized/10-800x533.jpg b/assets/resized/10-800x533.jpg
new file mode 100644
index 000000000000..09692beea353
Binary files /dev/null and b/assets/resized/10-800x533.jpg differ
diff --git a/assets/resized/11-1400x1956.jpg b/assets/resized/11-1400x1956.jpg
new file mode 100644
index 000000000000..1fc376d78d0f
Binary files /dev/null and b/assets/resized/11-1400x1956.jpg differ
diff --git a/assets/resized/11-480x671.jpg b/assets/resized/11-480x671.jpg
new file mode 100644
index 000000000000..9d355f2e5400
Binary files /dev/null and b/assets/resized/11-480x671.jpg differ
diff --git a/assets/resized/11-800x1118.jpg b/assets/resized/11-800x1118.jpg
new file mode 100644
index 000000000000..db171f602c63
Binary files /dev/null and b/assets/resized/11-800x1118.jpg differ
diff --git a/assets/resized/12-1400x933.jpg b/assets/resized/12-1400x933.jpg
new file mode 100644
index 000000000000..b927ef95f0b4
Binary files /dev/null and b/assets/resized/12-1400x933.jpg differ
diff --git a/assets/resized/12-480x320.jpg b/assets/resized/12-480x320.jpg
new file mode 100644
index 000000000000..105c3bb05820
Binary files /dev/null and b/assets/resized/12-480x320.jpg differ
diff --git a/assets/resized/12-800x533.jpg b/assets/resized/12-800x533.jpg
new file mode 100644
index 000000000000..30cce2a5e16d
Binary files /dev/null and b/assets/resized/12-800x533.jpg differ
diff --git a/assets/resized/3-1400x933.jpg b/assets/resized/3-1400x933.jpg
new file mode 100644
index 000000000000..210d0a198ffd
Binary files /dev/null and b/assets/resized/3-1400x933.jpg differ
diff --git a/assets/resized/3-480x320.jpg b/assets/resized/3-480x320.jpg
new file mode 100644
index 000000000000..4678bc5cd618
Binary files /dev/null and b/assets/resized/3-480x320.jpg differ
diff --git a/assets/resized/3-800x533.jpg b/assets/resized/3-800x533.jpg
new file mode 100644
index 000000000000..7e6f7e18e92b
Binary files /dev/null and b/assets/resized/3-800x533.jpg differ
diff --git a/assets/resized/5-1400x933.jpg b/assets/resized/5-1400x933.jpg
new file mode 100644
index 000000000000..2d319cca50e0
Binary files /dev/null and b/assets/resized/5-1400x933.jpg differ
diff --git a/assets/resized/5-480x320.jpg b/assets/resized/5-480x320.jpg
new file mode 100644
index 000000000000..60773b1f0ddb
Binary files /dev/null and b/assets/resized/5-480x320.jpg differ
diff --git a/assets/resized/5-800x533.jpg b/assets/resized/5-800x533.jpg
new file mode 100644
index 000000000000..e4c95f7f7802
Binary files /dev/null and b/assets/resized/5-800x533.jpg differ
diff --git a/assets/resized/6-1400x933.jpg b/assets/resized/6-1400x933.jpg
new file mode 100644
index 000000000000..00cbee6a430b
Binary files /dev/null and b/assets/resized/6-1400x933.jpg differ
diff --git a/assets/resized/6-480x320.jpg b/assets/resized/6-480x320.jpg
new file mode 100644
index 000000000000..bcf82987e4f6
Binary files /dev/null and b/assets/resized/6-480x320.jpg differ
diff --git a/assets/resized/6-800x533.jpg b/assets/resized/6-800x533.jpg
new file mode 100644
index 000000000000..138e0336b8f7
Binary files /dev/null and b/assets/resized/6-800x533.jpg differ
diff --git a/assets/resized/7-1400x933.jpg b/assets/resized/7-1400x933.jpg
new file mode 100644
index 000000000000..871ec54300e5
Binary files /dev/null and b/assets/resized/7-1400x933.jpg differ
diff --git a/assets/resized/7-480x320.jpg b/assets/resized/7-480x320.jpg
new file mode 100644
index 000000000000..3f9dc6a6999c
Binary files /dev/null and b/assets/resized/7-480x320.jpg differ
diff --git a/assets/resized/7-800x533.jpg b/assets/resized/7-800x533.jpg
new file mode 100644
index 000000000000..bb29a3f4ff8c
Binary files /dev/null and b/assets/resized/7-800x533.jpg differ
diff --git a/assets/resized/8-1400x973.jpg b/assets/resized/8-1400x973.jpg
new file mode 100644
index 000000000000..347a04726444
Binary files /dev/null and b/assets/resized/8-1400x973.jpg differ
diff --git a/assets/resized/8-480x334.jpg b/assets/resized/8-480x334.jpg
new file mode 100644
index 000000000000..ce3a4e91584d
Binary files /dev/null and b/assets/resized/8-480x334.jpg differ
diff --git a/assets/resized/8-800x556.jpg b/assets/resized/8-800x556.jpg
new file mode 100644
index 000000000000..2a7a987ab2db
Binary files /dev/null and b/assets/resized/8-800x556.jpg differ
diff --git a/assets/resized/9-1400x933.jpg b/assets/resized/9-1400x933.jpg
new file mode 100644
index 000000000000..865dc1f929cb
Binary files /dev/null and b/assets/resized/9-1400x933.jpg differ
diff --git a/assets/resized/9-480x320.jpg b/assets/resized/9-480x320.jpg
new file mode 100644
index 000000000000..79972f7e1926
Binary files /dev/null and b/assets/resized/9-480x320.jpg differ
diff --git a/assets/resized/9-800x533.jpg b/assets/resized/9-800x533.jpg
new file mode 100644
index 000000000000..b91bc0224ad5
Binary files /dev/null and b/assets/resized/9-800x533.jpg differ
diff --git a/assets/resized/prof_pic-1400x1867.jpg b/assets/resized/prof_pic-1400x1867.jpg
new file mode 100644
index 000000000000..e567583c8da4
Binary files /dev/null and b/assets/resized/prof_pic-1400x1867.jpg differ
diff --git a/assets/resized/prof_pic-480x640.jpg b/assets/resized/prof_pic-480x640.jpg
new file mode 100644
index 000000000000..36e67895c72c
Binary files /dev/null and b/assets/resized/prof_pic-480x640.jpg differ
diff --git a/assets/resized/prof_pic-800x1067.jpg b/assets/resized/prof_pic-800x1067.jpg
new file mode 100644
index 000000000000..53ec5ea14bc0
Binary files /dev/null and b/assets/resized/prof_pic-800x1067.jpg differ