The `lazy-img` web component goes beyond native lazy loading by completely skipping image downloads when conditions aren't met—rather than just deferring them. It supports three query modes: container queries (via ResizeObserver), media queries (viewport width), and scroll-based loading (via IntersectionObserver). Key features include named breakpoints via CSS custom properties, srcset/sizes support for responsive images, state attributes (`loaded` and `qualifies`) for CSS-driven styling, custom events, and performance optimizations like shared observers and throttled resize handling. The component is particularly useful for mobile users on limited data plans, where desktop-only images can be skipped entirely. Progressive enhancement is considered: if JS fails, non-critical images simply don't appear.
