Skip to content

Commit ae9ad7e

Browse files
rohandebsarkarhoraciochacon
authored andcommitted
Use WebP responsive images (alshedivat#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
1 parent d4fa914 commit ae9ad7e

12 files changed

+97
-79
lines changed

Gemfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ group :jekyll_plugins do
66
gem 'jekyll-email-protect'
77
gem 'jekyll-feed'
88
gem 'jekyll-github-metadata'
9+
gem 'jekyll-imagemagick'
910
gem 'jekyll-paginate-v2'
10-
gem 'jekyll-responsive-image'
1111
gem 'jekyll-scholar'
1212
gem 'jekyll-sitemap'
1313
gem 'jekyll-target-blank'

_config.yml

+17-14
Original file line numberDiff line numberDiff line change
@@ -142,8 +142,8 @@ plugins:
142142
- jekyll-email-protect
143143
- jekyll-feed
144144
- jekyll-github-metadata
145+
- jekyll-imagemagick
145146
- jekyll-paginate-v2
146-
- jekyll-responsive-image
147147
- jekyll/scholar
148148
- jekyll-sitemap
149149
- jekyll-target-blank
@@ -206,21 +206,24 @@ scholar:
206206

207207

208208
# -----------------------------------------------------------------------------
209-
# Jekyll Responsive Images
209+
# Responsive WebP Images
210210
# -----------------------------------------------------------------------------
211211

212-
responsive_image:
213-
template: _includes/responsive_img.html
214-
# Quality to use when resizing images.
215-
default_quality: 80
216-
sizes:
217-
- width: 480
218-
- width: 800
219-
- width: 1400
220-
quality: 90
221-
# Strip EXIF and other JPEG profiles. Helps to minimize JPEG size.
222-
strip: true
223-
212+
imagemagick:
213+
enabled: true
214+
widths:
215+
- 480
216+
- 800
217+
- 1400
218+
input_directories:
219+
- assets/img
220+
input_formats:
221+
- ".jpg"
222+
- ".jpeg"
223+
- ".png"
224+
- ".tiff"
225+
output_formats:
226+
webp: "-quality 75%"
224227

225228
# -----------------------------------------------------------------------------
226229
# Jekyll Diagrams

_includes/figure.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{% assign path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" %}
2+
3+
<figure>
4+
5+
<picture>
6+
{% for i in site.imagemagick.widths %}
7+
<source media="(max-width: {{ i }}px)" srcset="{{ path | relative_url }}-{{ i }}.webp">
8+
{% endfor %}
9+
10+
<!-- Fallback to the original file -->
11+
<img {% if include.class %}class="{{ include.class }}"{% endif %} src="{{ include.path | relative_url }}" {% if include.alt %}alt="{{ alt }}"{% endif %} {% if include.title %}title="{{ title }}"{% endif %} {% if include.zoomable %}data-zoomable{% endif %} />
12+
13+
</picture>
14+
15+
{% if include.caption %}<figcaption class="caption">{{ include.caption }}</figcaption>{% endif %}
16+
17+
</figure>

_includes/projects.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,9 @@
66
{% endif %}
77
<div class="card hoverable">
88
{% if project.img %}
9-
{% responsive_image_block %}
10-
path: {{ project.img }}
11-
alt: "project thumbnail"
12-
{% endresponsive_image_block %}
9+
{% include figure.html
10+
path=project.img
11+
alt="project thumbnail" %}
1312
{% endif %}
1413
<div class="card-body">
1514
<h2 class="card-title text-lowercase">{{ project.title }}</h2>

_layouts/about.html

+4-5
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,10 @@ <h1 class="post-title">
1515
{% if page.profile %}
1616
<div class="profile float-{% if page.profile.align == 'left' %}left{% else %}right{% endif %}">
1717
{% if page.profile.image %}
18-
{% responsive_image_block %}
19-
path: {{ page.profile.image | prepend: 'assets/img/' }}
20-
class: "img-fluid z-depth-1 rounded"
21-
alt: {{ page.profile.image }}
22-
{% endresponsive_image_block %}
18+
{% assign profile_image_path = page.profile.image | prepend: 'assets/img/' %}
19+
{% include figure.html
20+
path=profile_image_path
21+
class="img-fluid z-dept-1 rounded"%}
2322
{% endif %}
2423
{% if page.profile.address %}
2524
<div class="address">

_posts/2015-05-15-images.md

+7-7
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,10 @@ This is an example post with image galleries.
1010

1111
<div class="row mt-3">
1212
<div class="col-sm mt-3 mt-md-0">
13-
{% responsive_image path: assets/img/9.jpg class: "img-fluid rounded z-depth-1" %}
13+
{% include figure.html path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
1414
</div>
1515
<div class="col-sm mt-3 mt-md-0">
16-
{% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" %}
16+
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
1717
</div>
1818
</div>
1919
<div class="caption">
@@ -25,23 +25,23 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
2525

2626
<div class="row mt-3">
2727
<div class="col-sm mt-3 mt-md-0">
28-
{% responsive_image path: assets/img/8.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
28+
{% include figure.html path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
{% responsive_image path: assets/img/10.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
31+
{% include figure.html path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
3232
</div>
3333
</div>
3434

3535
The rest of the images in this post are all zoomable, arranged into different mini-galleries.
3636

3737
<div class="row mt-3">
3838
<div class="col-sm mt-3 mt-md-0">
39-
{% responsive_image path: assets/img/11.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
39+
{% include figure.html path="assets/img/11.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
4040
</div>
4141
<div class="col-sm mt-3 mt-md-0">
42-
{% responsive_image path: assets/img/12.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
42+
{% include figure.html path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
4343
</div>
4444
<div class="col-sm mt-3 mt-md-0">
45-
{% responsive_image path: assets/img/7.jpg class: "img-fluid rounded z-depth-1" zoomable: true %}
45+
{% include figure.html path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
4646
</div>
4747
</div>

_projects/1_project.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to
2222

2323
<div class="row">
2424
<div class="col-sm mt-3 mt-md-0">
25-
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
25+
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2626
</div>
2727
<div class="col-sm mt-3 mt-md-0">
28-
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
28+
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
31+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3232
</div>
3333
</div>
3434
<div class="caption">
3535
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3636
</div>
3737
<div class="row">
3838
<div class="col-sm mt-3 mt-md-0">
39-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
39+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4040
</div>
4141
</div>
4242
<div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5050

5151
<div class="row justify-content-sm-center">
5252
<div class="col-sm-8 mt-3 mt-md-0">
53-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
53+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5454
</div>
5555
<div class="col-sm-4 mt-3 mt-md-0">
56-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
56+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5757
</div>
5858
</div>
5959
<div class="caption">
@@ -70,10 +70,10 @@ Here's the code for the last row of images above:
7070
```html
7171
<div class="row justify-content-sm-center">
7272
<div class="col-sm-8 mt-3 mt-md-0">
73-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
73+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7474
</div>
7575
<div class="col-sm-4 mt-3 mt-md-0">
76-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
76+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7777
</div>
7878
</div>
7979
```

_projects/2_project.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to
2222

2323
<div class="row">
2424
<div class="col-sm mt-3 mt-md-0">
25-
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
25+
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2626
</div>
2727
<div class="col-sm mt-3 mt-md-0">
28-
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
28+
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
31+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3232
</div>
3333
</div>
3434
<div class="caption">
3535
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3636
</div>
3737
<div class="row">
3838
<div class="col-sm mt-3 mt-md-0">
39-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
39+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4040
</div>
4141
</div>
4242
<div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5050

5151
<div class="row justify-content-sm-center">
5252
<div class="col-sm-8 mt-3 mt-md-0">
53-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
53+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5454
</div>
5555
<div class="col-sm-4 mt-3 mt-md-0">
56-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
56+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5757
</div>
5858
</div>
5959
<div class="caption">
@@ -70,10 +70,10 @@ Here's the code for the last row of images above:
7070
```html
7171
<div class="row justify-content-sm-center">
7272
<div class="col-sm-8 mt-3 mt-md-0">
73-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
73+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7474
</div>
7575
<div class="col-sm-4 mt-3 mt-md-0">
76-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
76+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7777
</div>
7878
</div>
7979
```

_projects/3_project.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to
2323

2424
<div class="row">
2525
<div class="col-sm mt-3 mt-md-0">
26-
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
26+
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2727
</div>
2828
<div class="col-sm mt-3 mt-md-0">
29-
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
29+
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3030
</div>
3131
<div class="col-sm mt-3 mt-md-0">
32-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
32+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3333
</div>
3434
</div>
3535
<div class="caption">
3636
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3737
</div>
3838
<div class="row">
3939
<div class="col-sm mt-3 mt-md-0">
40-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
40+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4141
</div>
4242
</div>
4343
<div class="caption">
@@ -51,10 +51,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5151

5252
<div class="row justify-content-sm-center">
5353
<div class="col-sm-8 mt-3 mt-md-0">
54-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
54+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5555
</div>
5656
<div class="col-sm-4 mt-3 mt-md-0">
57-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
57+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5858
</div>
5959
</div>
6060
<div class="caption">
@@ -71,10 +71,10 @@ Here's the code for the last row of images above:
7171
```html
7272
<div class="row justify-content-sm-center">
7373
<div class="col-sm-8 mt-3 mt-md-0">
74-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
74+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7575
</div>
7676
<div class="col-sm-4 mt-3 mt-md-0">
77-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
77+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7878
</div>
7979
</div>
8080
```

_projects/4_project.md

+8-8
Original file line numberDiff line numberDiff line change
@@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to
2222

2323
<div class="row">
2424
<div class="col-sm mt-3 mt-md-0">
25-
{% responsive_image path: assets/img/1.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
25+
{% include figure.html path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2626
</div>
2727
<div class="col-sm mt-3 mt-md-0">
28-
{% responsive_image path: assets/img/3.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
28+
{% include figure.html path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2929
</div>
3030
<div class="col-sm mt-3 mt-md-0">
31-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
31+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3232
</div>
3333
</div>
3434
<div class="caption">
3535
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3636
</div>
3737
<div class="row">
3838
<div class="col-sm mt-3 mt-md-0">
39-
{% responsive_image path: assets/img/5.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
39+
{% include figure.html path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4040
</div>
4141
</div>
4242
<div class="caption">
@@ -50,10 +50,10 @@ You describe how you toiled, sweated, *bled* for your project, and then... you r
5050

5151
<div class="row justify-content-sm-center">
5252
<div class="col-sm-8 mt-3 mt-md-0">
53-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
53+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5454
</div>
5555
<div class="col-sm-4 mt-3 mt-md-0">
56-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
56+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
5757
</div>
5858
</div>
5959
<div class="caption">
@@ -70,10 +70,10 @@ Here's the code for the last row of images above:
7070
```html
7171
<div class="row justify-content-sm-center">
7272
<div class="col-sm-8 mt-3 mt-md-0">
73-
{% responsive_image path: assets/img/6.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
73+
{% include figure.html path="assets/img/6.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7474
</div>
7575
<div class="col-sm-4 mt-3 mt-md-0">
76-
{% responsive_image path: assets/img/11.jpg title: "example image" class: "img-fluid rounded z-depth-1" %}
76+
{% include figure.html path="assets/img/11.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
7777
</div>
7878
</div>
7979
```

0 commit comments

Comments
 (0)