Greenheart
commented
2 years ago For now, this has been solved manually since there aren't that many images yet. Since source images have been kept, this will be possible to migrate to a long term solution in the future.
Image processing could be set up using the sharp library, and image metadata (such as available formats, height and width) exported as JSON in a build step. This could then be used to serve the images with the right dimensions.
We could also consider also keeping fallback images for browsers that don't support the WebP format for OG images, although they will hopefully soon migrate to support WebP and other modern formats. https://www.stevefenton.co.uk/blog/2022/10/webp-opengraph-images/
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,srcand other attributes of allimgtags used on the webpage. This would require some custom code but might be doable.