Deliver sliders or other large images as webp (#995) · Issues · thalia / concrexit

Deliver sliders or other large images as webp

Why?

According to Google PageSpeed, we can speed up our site by a lot by converting slider images to webp.

Current implementation

Large pictures are all served as png, this is a good image format for things that need to be compressed lossless.

Suggested implementation

Supply images as <picture> with multiple sources

<!--
    This template is for changes that do not affect the behaviour of the website.

** If you are not in the Technicie, there is a very high chance that you
       should not use this template

Examples:

* Changes in CI
     * Refactoring of code
     * Technicie-facing documentation
-->

### Why?
According to [Google PageSpeed](https://developers.google.com/speed/pagespeed/insights/?hl=nl&url=thalia.nu&tab=mobile), we can speed up our site by a lot by converting slider images to webp.

### Current implementation
Large pictures are all served as png, this is a good image format for things that need to be compressed lossless.

### Suggested implementation
Supply images as `<picture>` [with multiple sources](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#Use_modern_image_formats_boldly)

To upload designs, you'll need to enable LFS. More information