idg.tools icon indicating copy to clipboard operation
idg.tools copied to clipboard

Optimize images to reduce bandwidth usage

Open Greenheart opened this issue 1 year ago • 1 comments

With images already being the largest part of our bandwidth usage, it will be important to serve optimized images going forward.

  • One option is to consider setting up Cloudinary or another media library for static asset management. Though that requires accounts and access, which might not work as well for external contributors.

  • Another option could be to use a solution like https://github.com/JonasKruckenberg/imagetools to optimize local images at build time. A local folder is great for local development, though I'm not sure if it works when the CMS is hosted online.

  • Maybe use https://github.com/verlok/vanilla-lazyload together with some solution from https://www.reddit.com/r/sveltejs/comments/uvl4ee/nextjs_image_alternative_in_svelte/


Since we have all content locally, we could theoretically optimize all images as part of the content build process, and cache the results. We could then create a shared util to pre-populate the srcset, src and other attributes of all img tags used on the webpage. This would require some custom code but might be doable.

Greenheart avatar Nov 15 '22 20:11 Greenheart