Research: Image loading performance optimization

[masonmcelvain]

We need to make this app more performant in terms of image loading and video playback.

• We could use image compression to keep file sizes small.
• We could use cacheing of places already visited to make fewer requests to get image/location data from the API.
• Progressive loading of images (low quality if on first load, replaced by high quality if not on mobile).

[Jason-Ku]

https://insanelab.com/blog/web-development/webp-web-design-vs-jpeg-gif-png/#:~:text=JPEG%20is%20a%20no%2Dbrainer,JPEG%20as%20an%20image%20format.

Take away from above and other sources:

• WebP files are ~30% smaller but maintain roughly the same quality
• Not supported by Safari
• Supported by most other browsers though

[masonmcelvain]

AVIF is another file compression format with great compression (about 50% smaller file sizes than JPG). Doesn't have as much browser support as WebP however. https://www.freecodecamp.org/news/how-to-use-avif-images-on-your-website/

https://jakearchibald.com/2020/avif-has-landed/