From 5cc069ce96cda58621cab197b6532980f37c5543 Mon Sep 17 00:00:00 2001 From: Rohan Deb Sarkar Date: Wed, 22 Dec 2021 13:43:52 +0530 Subject: [PATCH] Use WebP responsive images (#498) This PR replaces the jekyll-responsive-images with jekyll-imagemagick for responsive WebP images. WebP images are much smaller compared to PNG and JPEG, faster to load and most of the modern browsers recommend it. More information about WebP images: https://developers.google.com/speed/webp --- Gemfile | 1 - _posts/2015-05-15-images.md | 14 +++++++------- _projects/1_project.md | 16 ++++++++-------- _projects/2_project.md | 16 ++++++++-------- _projects/3_project.md | 16 ++++++++-------- _projects/4_project.md | 16 ++++++++-------- _projects/5_project.md | 16 ++++++++-------- _projects/6_project.md | 16 ++++++++-------- 8 files changed, 55 insertions(+), 56 deletions(-) diff --git a/Gemfile b/Gemfile index a996028d1c04..6742b237cd6a 100644 --- a/Gemfile +++ b/Gemfile @@ -12,7 +12,6 @@ group :jekyll_plugins do gem 'jekyll-link-attributes' gem 'jekyll-minifier' gem 'jekyll-paginate-v2' - gem 'jekyll-responsive-image' gem 'jekyll-scholar' gem 'jekyll-sitemap' gem 'jekyll-toc' diff --git a/_posts/2015-05-15-images.md b/_posts/2015-05-15-images.md index 544bb2bc0319..0729fcb48d78 100644 --- a/_posts/2015-05-15-images.md +++ b/_posts/2015-05-15-images.md @@ -10,10 +10,10 @@ This is an example post with image galleries.
- {% responsive_image path: assets/img/9.jpg class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
@@ -25,10 +25,10 @@ Simply add `data-zoomable` to `` tags that you want to make zoomable.
- {% responsive_image path: assets/img/8.jpg class: "img-fluid rounded z-depth-1" zoomable: true %} + {% include figure.html path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
- {% responsive_image path: assets/img/10.jpg class: "img-fluid rounded z-depth-1" zoomable: true %} + {% include figure.html path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
@@ -36,12 +36,12 @@ The rest of the images in this post are all zoomable, arranged into different mi
- {% responsive_image path: assets/img/11.jpg class: "img-fluid rounded z-depth-1" zoomable: true %} + {% include figure.html path="assets/img/11.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
- {% responsive_image path: assets/img/12.jpg class: "img-fluid rounded z-depth-1" zoomable: true %} + {% include figure.html path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
- {% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" zoomable: true %} + {% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
diff --git a/_projects/1_project.md b/_projects/1_project.md index 9b920a38fe0f..5a95b9ad20fc 100644 --- a/_projects/1_project.md +++ b/_projects/1_project.md @@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -70,10 +70,10 @@ Here's the code for the last row of images above: ```html
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
``` diff --git a/_projects/2_project.md b/_projects/2_project.md index 1a61208a0a86..4a266145d23c 100644 --- a/_projects/2_project.md +++ b/_projects/2_project.md @@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -70,10 +70,10 @@ Here's the code for the last row of images above: ```html
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
``` diff --git a/_projects/3_project.md b/_projects/3_project.md index f7dd8ad30753..56968db035be 100644 --- a/_projects/3_project.md +++ b/_projects/3_project.md @@ -23,13 +23,13 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -37,7 +37,7 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -51,10 +51,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -71,10 +71,10 @@ Here's the code for the last row of images above: ```html
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
``` diff --git a/_projects/4_project.md b/_projects/4_project.md index c7d587e71f26..96eeb0e66ac2 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
- {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -70,10 +70,10 @@ Here's the code for the last row of images above: ```html
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
``` diff --git a/_projects/5_project.md b/_projects/5_project.md index 78697dfb2667..aa488109c78f 100644 --- a/_projects/5_project.md +++ b/_projects/5_project.md @@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -70,10 +70,10 @@ Here's the code for the last row of images above: ```html
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
``` diff --git a/_projects/6_project.md b/_projects/6_project.md index 6b8719c624fb..3d8d04d512b0 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
- {% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
- {% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
@@ -70,10 +70,10 @@ Here's the code for the last row of images above: ```html
- {% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
- {% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %} + {% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
```