How I Solved Lazy Image Resizing Without Slowing Down the Page Load

The moment user-uploaded images need to appear in more than one place (a thumbnail grid, a product preview, a hero banner) you need multiple sizes. The standard approach generates all variants at upload time, but this slows uploads, wastes disk space on sizes that are never requested, and forces a full library reprocess whenever your layout changes. Most image sizes will never actually be requested. Generating them eagerly is wasteful. The solution I landed on: store only the original, and use the web server's 404 handler to trigger resizing on demand. Once a size is generated, it's saved to disk and served as a static file forever. No application code is involved on repeat visits. The Problem The correct image size depends entirely on your UI, and those sizes change whenever your layout changes. The standard solution is responsive <picture> elements with srcset and sizes attributes: <picture> <source srcset= "/uploads/photos/480x480/my-image.webp 480w, /uploads/photos/640x640/my-image