{"version":"https://jsonfeed.org/version/1","title":"Aaron Gustafson: Content tagged responsive design","description":"The latest 20 posts and links tagged responsive design.","home_page_url":"https://www.aaron-gustafson.com","feed_url":"https://www.aaron-gustafson.com/feeds/responsive-design.json","author":{"name":"Aaron Gustafson","url":"https://www.aaron-gustafson.com"},"icon":"https://www.aaron-gustafson.com/i/og-logo.png","favicon":"https://www.aaron-gustafson.com/favicon.png","expired":false,"items":[{"id":"https://www.aaron-gustafson.com/notebook/lazy-loading-images-based-on-screen-size/","title":"✍🏻 Lazy Loading Images Based on Screen Size","summary":"The lazy-img web component goes beyond native lazy loading and srcset—it can completely skip loading images on small screens, saving bandwidth where it matters most.","content_html":"

Native lazy loading and srcset are great, but they have a limitation: they always load some variant of the image. The lazy-img web component takes a different approach—it can completely skip loading images when they don’t meet your criteria, whether that’s screen size, container size, or visibility in the viewport.

\n

This is particularly valuable for mobile users on slow connections or limited data plans. If an image is only meaningful on larger screens, why waste their bandwidth loading it at all?

\n

# The performance benefit

\n

Unlike picture or srcset, which always load some image variant, lazy-img can completely skip loading images on screens or containers below your specified threshold. Set min-inline-size="768px" and mobile users will never download that image at all—saving data and speeding up page loads.

\n

Once an image is loaded, however, it remains loaded even if the viewport or container is resized below the threshold. This is intentional—the component prevents unnecessary downloads but doesn’t unload images already in memory. You can control visibility with CSS if needed using the loaded and qualifies attributes (which we’ll get to shortly).

\n

# Basic usage

\n

The lazy-img works pretty much identically to a regular img element, with all the attributes you know and love:

\n
<lazy-img src=\"image.jpg\" alt=\"A beautiful image\"> </lazy-img>
\n

But that’s not very interesting. The real power comes from conditional loading.

\n

# Container queries (default)

\n

Load an image only when its container reaches a minimum width:

\n
<lazy-img src=\"large-image.jpg\" alt=\"Large image\" min-inline-size=\"500px\">\n</lazy-img>
\n

The image loads when the lazy-img element’s container reaches 500px wide. This is the default query mode—it uses ResizeObserver to watch the container size.

\n

# Media queries

\n

You can lazy load images based on viewport width instead by switching to media query mode:

\n
<lazy-img\n  src=\"desktop-image.jpg\"\n  alt=\"Desktop image\"\n  min-inline-size=\"768px\"\n  query=\"media\"\n>\n</lazy-img>
\n

With this configuration, the image loads when the browser window is at least 768px wide.

\n

# View mode (scroll-based loading)

\n

Load images when they scroll into view using IntersectionObserver by switching to the “view” query type:

\n
<lazy-img src=\"image.jpg\" alt=\"Loads when scrolled into view\" query=\"view\">\n</lazy-img>
\n

The default behavior (view-range-start="entry 0%") loads as soon as any part of the image enters the viewport.

\n

Control when images load with the view-range-start attribute:

\n

Load when 50% visible:

\n
<lazy-img\n  src=\"image.jpg\"\n  alt=\"Loads when half visible\"\n  query=\"view\"\n  view-range-start=\"entry 50%\"\n>\n</lazy-img>
\n

Preload before entering viewport:

\n
<lazy-img\n  src=\"image.jpg\"\n  alt=\"Preloads 200px before visible\"\n  query=\"view\"\n  view-range-start=\"entry -200px\"\n>\n</lazy-img>
\n

This creates a smooth user experience—images are already loaded by the time users scroll to them.

\n

# Responsive images

\n

As with regular images, you can use srcset and sizes for responsive images:

\n
<lazy-img\n  src=\"image-800.jpg\"\n  srcset=\"image-400.jpg 400w,\n          image-800.jpg 800w,\n          image-1200.jpg 1200w\"\n  sizes=\"(max-width: 600px) 400px,\n         (max-width: 1000px) 800px,\n         1200px\"\n  alt=\"Responsive image\"\n  min-inline-size=\"400px\"\n>\n</lazy-img>
\n

The component waits until the conditions are met before loading a real image and the browser takes over from there.

\n

# Named breakpoints

\n

You can also define named breakpoints using CSS custom properties:

\n
:root {\n  --lazy-img-mq: small;\n}\n\n@media (min-width: 768px) {\n  :root {\n    --lazy-img-mq: medium;\n  }\n}\n\n@media (min-width: 1024px) {\n  :root {\n    --lazy-img-mq: large;\n  }\n}
\n

Then reference them in your markup:

\n
<lazy-img\n  src=\"image.jpg\"\n  alt=\"Image with named breakpoints\"\n  named-breakpoints=\"medium, large\"\n  query=\"media\"\n>\n</lazy-img>
\n

The image loads when --lazy-img-mq matches “medium” or “large”.

\n

# Preventing layout shift

\n

As with regular images, don’t forget to use width and height attributes to prevent Cumulative Layout Shift (CLS):

\n
<lazy-img\n  src=\"image.jpg\"\n  alt=\"A beautiful image\"\n  width=\"800\"\n  height=\"600\"\n  min-inline-size=\"768px\"\n>\n</lazy-img>
\n

The browser reserves the correct space while the image loads, preventing content from jumping around.

\n

# State attributes for styling

\n

The component provides loaded and qualifies attributes you can use in CSS:

\n
/* Hide images that loaded but no longer meet conditions */\nlazy-img[loaded]:not([qualifies]) {\n  display: none;\n}\n\n/* Show a placeholder for images that qualify but haven't loaded */\nlazy-img[qualifies]:not([loaded])::before {\n  content: \"Loading…\";\n  display: block;\n  padding: 2em;\n  background: #f0f0f0;\n  text-align: center;\n}
\n

# Events

\n

If you crave control, you can add your own functionality by listening for when images load:

\n
const lazyImg = document.querySelector(\"lazy-img\");\nlazyImg.addEventListener(\"lazy-img:loaded\", (event) => {\n  console.log(\"Image loaded:\", event.detail.src);\n});
\n

# Performance

\n

The component is highly optimized:

\n\n

Even with hundreds of lazy-img elements on a page, performance remains excellent.

\n

# Progressive enhancement

\n

If JavaScript fails to load, images simply don’t appear (unless using immediate loading mode). This might sound problematic, but for non-critical images—decorative graphics, supplementary screenshots, marketing imagery—it’s often exactly what you want. Your content remains accessible; you just lose the enhancements.

\n

For critical images that are part of your content, use standard img tags. Use lazy-img for conditional enhancements.

\n

# Demo

\n

Explore the demo to see container queries, media queries, scroll-based loading, and more in action:

\n
\n\n\n\n
\n

# Grab it

\n

Check out the project on GitHub. Install via npm:

\n
npm install @aarongustafson/lazy-img
\n

Import and use:

\n
import \"@aarongustafson/lazy-img\";
\n

Based on my original Easy Lazy Images concept, reimagined as a modern custom element.

\n","social_text":"Want to skip loading images entirely on mobile? Here’s a web component that does just that.","url":"https://www.aaron-gustafson.com/notebook/lazy-loading-images-based-on-screen-size/","tags":["web components","progressive enhancement","HTML","performance","images","responsive design"],"date_published":"2025-12-10T17:15:54Z"}]}