diff --git a/Gemfile b/Gemfile
index 9634030..bac9010 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 0943d70..091f193 100644
--- a/_config.yml
+++ b/_config.yml
@@ -144,6 +144,7 @@ plugins:
   - jekyll-feed
   - jekyll-github-metadata
   - jekyll-paginate-v2
+  - jekyll-responsive-image
   - jekyll-sitemap
   - jekyll-target-blank
   - jekyll-twitter-plugin
@@ -181,6 +182,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 1af5547..396690d 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 d1d7924..e0dd5f2 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 0000000..c6a06ca
--- /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 bb3b6b1..dd30418 100644
--- a/_layouts/about.html
+++ b/_layouts/about.html
@@ -15,7 +15,10 @@ layout: default
     {% 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 6347918..1a43f7c 100644
--- a/_posts/2015-05-15-images.md
+++ b/_posts/2015-05-15-images.md
@@ -8,10 +8,10 @@ This is an example post with image galleries.
 
 <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 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">
@@ -23,10 +23,10 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
 
 <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/8.jpg" data-zoomable>
+        {% 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">
-        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/10.jpg" data-zoomable>
+        {% responsive_image path: assets/img/10.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
     </div>
 </div>
 
@@ -34,12 +34,12 @@ The rest of the images in this post are all zoomable, arranged into different mi
 
 <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/11.jpg" data-zoomable>
+        {% 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">
-        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/12.jpg" data-zoomable>
+        {% 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">
-        <img class="img-fluid rounded z-depth-1" src="{{ site.baseurl }}/assets/img/7.jpg" data-zoomable>
+        {% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
     </div>
 </div>
diff --git a/_projects/1_project.md b/_projects/1_project.md
index ea09a99..9b920a3 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 7a7de4b..1a61208 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 db5ad61..f7dd8ad 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 bb19465..c7d587e 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 0e07044..78697df 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 e3fa046..6b8719c 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 0000000..20a94fc
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 0000000..6e4c349
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 0000000..37a8fb6
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 0000000..652864b
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 0000000..09692be
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 0000000..1fc376d
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 0000000..9d355f2
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 0000000..db171f6
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 0000000..b927ef9
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 0000000..105c3bb
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 0000000..30cce2a
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 0000000..210d0a1
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 0000000..4678bc5
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 0000000..7e6f7e1
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 0000000..2d319cc
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 0000000..60773b1
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 0000000..e4c95f7
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 0000000..00cbee6
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 0000000..bcf8298
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 0000000..138e033
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 0000000..871ec54
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 0000000..3f9dc6a
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 0000000..bb29a3f
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 0000000..347a047
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 0000000..ce3a4e9
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 0000000..2a7a987
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 0000000..865dc1f
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 0000000..79972f7
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 0000000..b91bc02
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 0000000..e567583
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 0000000..36e6789
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 0000000..53ec5ea
Binary files /dev/null and b/assets/resized/prof_pic-800x1067.jpg differ