3 个仓库
Tools that dynamically determine the optimal image size to load based on the current layout and viewport.
Distinct from Image Optimization Tools: Distinct from Image Optimization Tools: focuses on real-time resolution selection rather than static file compression.
Explore 3 awesome GitHub repositories matching web development · Responsive Resolution Optimizers. Refine with filters or upvote what's useful.
lazysizes is a JavaScript lazy loading library and DOM visibility observer that defers the loading of images and iframes until they enter the browser viewport. It functions as a responsive image optimizer and SEO friendly asset loader designed to reduce initial page load times while maintaining search engine visibility. The project calculates optimal image sizes and handles srcset and picture elements to deliver the most appropriate asset based on device resolution and layout. It includes a mechanism for low-quality image placeholders and applies CSS classes during the loading process to trig
Calculates optimal image sizes and manages srcset attributes to deliver the most appropriate asset for the screen.
lozad.js is a JavaScript lazy loading library and viewport-based media loader. It serves as a dependency-free wrapper around the Intersection Observer API to defer the loading of images and iframes until they enter the browser viewport. The project functions as a responsive image loader that optimizes page speed by delivering the most appropriate image sizes and formats based on the user's screen. It includes capabilities for responsive image optimization and layout stabilization through the use of image placeholders to prevent content shifts. The library manages the full lifecycle of deferr
Dynamically determines the optimal image resolution to load based on the current viewport.
North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes. The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configur
Optimizes image loading by selecting the optimal resolution based on the current layout and viewport.