Responsive image fix (alshedivat#2014)

Fixes alshedivat#1967 

Update the way responsive images are used to only use one srcset, and
add corresponding `sizes` attribute to the relevant layouts and
templates.
I did not go through and add `sizes` to all the example posts/projects.
When `sizes` is not specified by the user, the `figure.html` template
defaults to 95% the width of the viewport which should work fine for
most cases; users can optimize further if they wish by feeding `sizes`
into the template.

Additionally:
 - Enabled support for .gif to .webp compression
- fix error in jekyll-imagemagick config where all images were resized
to be 800px or less. (for example img-1400.webp was actually only 800px
wide, etc.)
- added note about making sure imagemagick is installed before enabling
it in responsive images section of `_config.yml`

Author: nWestie

_config.yml

@@ -329,6 +329,8 @@ external_links:
 # Responsive WebP Images
 # -----------------------------------------------------------------------------
 
+# MAKE SURE imagemagick is installed and on your PATH before enabling imagemagick. In a terminal, run:
+#   convert -version
 imagemagick:
   enabled: true # enables responsive images for your site (recommended, see https://github.com/alshedivat/al-folio/issues/537)
   widths:
@@ -342,8 +344,9 @@ imagemagick:
     - ".jpeg"
     - ".png"
     - ".tiff"
+    - ".gif"
   output_formats:
-    webp: "-resize 800x"
+    webp: "-quality 85 -strip"
 
 # -----------------------------------------------------------------------------
 # Jekyll Diagrams

_includes/figure.html

@@ -1,23 +1,22 @@
-{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" -%}
+{%- assign img_path = include.path | remove: ".jpg" | remove: ".jpeg" | remove: ".png" | remove: ".tiff" | remove: ".gif" -%}
 
 <figure>
-
   <picture>
+    <!-- Auto scaling with imagemagick -->
+    <!-- See https://www.debugbear.com/blog/responsive-images#w-descriptors-and-the-sizes-attribute and 
+      https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images for info on defining 'sizes' for responsive images-->
     {% if site.imagemagick.enabled %}
-    {% for i in site.imagemagick.widths -%}
-      <source
-        class="responsive-img-srcset"
-        media="(max-width: {{ i }}px)"
-        srcset="{{ img_path | relative_url }}-{{ i }}.webp"
-      />
-    {% endfor -%}
+      <source class = "responsive-img-srcset" srcset="
+      {% for i in site.imagemagick.widths -%}
+      {{ img_path | relative_url }}-{{ i }}.webp {{i}}w,
+      {% endfor -%}" 
+      {% if include.sizes %} sizes="{{include.sizes}}" {% else %} sizes="95vw" {% endif %}
+      type="image/webp"/>
     {% endif %}
-
-    <!-- Fallback to the original file -->
     <img
       src="{% if include.cache_bust %}{{ include.path | relative_url | bust_file_cache }}{% else %}{{ include.path | relative_url }}{% endif %}"
       {% if include.class %}class="{{ include.class }}"{% endif %}
-      {% if include.width %}width="{{ include.width }}"{% else %}width="auto"{% endif %}
+      {% if include.width %}width="{{ include.width }}"{% else %}width="100%"{% endif %}
       {% if include.height %}height="{{ include.height }}"{% else %}height="auto"{% endif %}
       {% if include.min-width %}min-width="{{ include.min-width }}"{% endif %}
       {% if include.min-height %}min-height="{{ include.min-height }}"{% endif %}

_includes/projects.html

@@ -10,6 +10,7 @@
         {%- if project.img %}
         {%- include figure.html
           path=project.img
+          sizes = "250px"
           alt="project thumbnail" -%}
         {%- endif %}
         <div class="card-body">

_includes/projects_horizontal.html

@@ -8,7 +8,7 @@
       <div class="row g-0">
         {%- if project.img -%}
         <div class="card-img col-md-6">
-          {% include figure.html path=project.img alt="project thumbnail" %}
+          {% include figure.html path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
         </div>
         <div class="col-md-6">
         {%- else -%}

_layouts/about.html

@@ -23,11 +23,15 @@ <h1 class="post-title">
                 {%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
               {% endif %}
 
+              {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
+              
               {% include figure.html
-              path=profile_image_path
-              class=profile_image_class
-              alt=page.profile.image
-              cache_bust=true -%}
+                path = profile_image_path
+                class = profile_image_class
+                sizes = sizes
+                alt = page.profile.image
+                cache_bust = true 
+              %}
             {% endif -%}
             {%- if page.profile.more_info %}
             <div class="more-info">

_layouts/bib.html

@@ -11,6 +11,7 @@
             {%- assign entry_path = entry.preview | prepend: '/assets/img/publication_preview/' -%}
             {% include figure.html
             path=entry_path
+            sizes = "200px"
             class="preview z-depth-1 rounded"
             zoomable=false
             alt=entry.preview -%}

_layouts/profiles.html

@@ -19,10 +19,14 @@
                 {%- assign profile_image_class = "img-fluid z-depth-1 rounded" -%}
               {% endif %}
 
+              {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
+
               {% include figure.html
-              path=profile_image_path
-              class=profile_image_class
-              alt=profile.image -%}
+                path = profile_image_path
+                class = profile_image_class
+                sizes = sizes
+                alt = profile.image 
+              %}
             {% endif -%}
             {%- if profile.more_info %}
             <div class="more-info">