Detailed loom walking through this doc

Goals

The main goal is to make it easy to ensure you can seamlessly use any image in Qwik, but to ensure it is optimized for speed. This means

• Use proper sizes (always show the right size image for the right screen size, using dynamically generated srcset)
• Use next gen formats when possible (e.g. using webp when possible via <source>)
• Use browser-native lazy loading by default, but be able to be turned off for high priority images, such as your LCP image
• Avoid layout shifts (images need a fixed height/width or an aspect ratio so they don’t cause a layout shift when they load)

The main things needed for this are

• A frontend <Image /> component that should feel quite a lot like the plain <img> tag in terms of DX
• A backend API in Qwik City to dynamically serve images in different sizes and formats

References/inspiration

• Builder image component
• Nextjs image component:

Note: Most of this stuff is simple. The tricky part is really the backend/api that can serve the default loader

Responsive Images

This is the best default for most images, to resize to any width

Input:

<Image src="..." aspectRatio="16 / 9" />