image loading optimization

[mda100]

images load slowly: https://developer.mozilla.org/en-US/docs/Learn/Performance/Multimedia

1. lazy loading https://github.com/aFarkas/lazysizes
2. optimal sizing - convert all images to same size at build / consider two different sizes for mobile and web
3. optimal format - convert all images to webp, webm, or compressed jpeg at build
4. downloading priority - download images in order of when they will be displayed on the carousel
5. define dimensions in img tag to prevent jank loading

seems like the central ideas are

1. script that creates optimal images
2. load images in progressively according to priority
3. define image sizes ahead of time

[mda100]

1. lazy load / priority downloading
2. webp / progressive jpeg
3. optimal size / jank / responsive sizing
4. video https://developer.mozilla.org/en-US/docs/Learn/Performance/video
5. possibly CDN

[mda100]

• [x] lazy loading / priority downloading #35
• [ ] progessive jpeg with the correct compression / webp #38
• [ ] normalize size #38
• [ ] different sizes for breakpoints, responsive sizing #38
• [x] video https://developer.mozilla.org/en-US/docs/Learn/Performance/video #37 ~~ - [ ] loading screen / preload / progressive jpeg the FIRST image ~~ => it already loads this first

[mda100]

if we have continue speed problems:

• web P
• CDN
• caching
• more optimal lazy loading, responsive image specificiations, and image resizing

[mda100]

closed by #38 and #45 and #46