Fixes#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`
Addressing #1395 but with a different solution from #1478, using
semantic versioning based on implementation found
[here](https://distresssignal.org/busting-css-cache-with-jekyll-md5-hash).
Implemented a way of calculating the hash for both a single file or
directory. This way we can calculate the hash for when there is a change
in the `_sass` dir, for example, or in the contents of a single file.
Examples of generated outputs of the plugin:
```
/al-folio/assets/css/main.css?d41d8cd98f00b204e9800998ecf8427e
/al-folio/assets/js/theme.js?96d6b3e1c3604aca8b6134c7afdd5db6
/al-folio/assets/js/dark_mode.js?9b17307bb950ffa2e34be0227f53558f
/al-folio/assets/js/no_defer.js?d633890033921b33e0ceb13d22340a9c
/al-folio/assets/js/common.js?acdb9690d7641b2f8d40529018c71a01
/al-folio/assets/js/copy_code.js?c9d9dd48933de3831b3ee5ec9c209cac
/al-folio/assets/img/prof_pic.jpg?974957d202f671e4fa6700c04e68deae
```
Signed-off-by: George Araujo <george.gcac@gmail.com>
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