A minimal, multi-framework, responsive image component

Doing web images right can be hard. The <img> tag is just the starting point. In 2023, if you want the best performance you should be:

• using srcset to deliver multiple resolutions for different device and screen sizes
• using sizes so that the browser knows which image resolution to download
• delivering modern image formats such as AVIF and WebP if the browser supports them
• ensuring that the image resizes responsively, maintaining aspect ratio
• avoids layout shift when the images has loaded
• use native lazy-loading and async decoding for offscreen images
• use high priority fetching for critical images
• supports placeholders for lazy-loaded images

This isn’t realistically something that can be done manually, but luckily many web frameworks provide tools to handle this. Depending on the framework, these may handle image resizing at build time or runtime, and may provide a component that makes it easy to embed the images. These all have drawbacks though – resizing at build…