imulus/retinajsArchived
Retinajs
Retinajs एक JavaScript लाइब्रेरी और रिस्पॉन्सिव इमेज हैंडलर है जो उच्च-रिज़ॉल्यूशन छवियों को परोसने के लिए डिवाइस पिक्सेल घनत्व का पता लगाता है। यह एक उच्च-रिज़ॉल्यूशन इमेज लोडर और मैनेजर के रूप में कार्य करता है, जो उपयोगकर्ता के डिवाइस की हार्डवेयर डिस्प्ले क्षमताओं के आधार पर मानक इमेज सोर्स एट्रिब्यूट्स और CSS बैकग्राउंड URL को उच्च-घनत्व वाले संस्करणों के साथ बदल देता है।
यह टूल स्वचालित फ़ाइल नाम सम्मेलनों, निम्न-रिज़ॉल्यूशन पथों को उच्च-घनत्व वाली संपत्तियों से मैप करने के लिए पूर्वनिर्धारित प्रत्ययों का उपयोग करके, और मैन्युअल लुकअप टेबल जो विशिष्ट छवियों को कस्टम URL के साथ जोड़ती हैं, दोनों के माध्यम से संपत्ति रिज़ॉल्यूशन का प्रबंधन करता है। इसमें डिवाइस-विशिष्ट बैकग्राउंड इमेज डिलीवरी के लिए प्रीप्रोसेसर मिक्सिन के माध्यम से CSS मीडिया क्वेरी उत्पन्न करने की क्षमता भी शामिल है।
यह लाइब्रेरी रिस्पॉन्सिव इमेज ऑप्टिमाइज़ेशन क्षमताओं की एक विस्तृत श्रृंखला को कवर करती है, जिसमें इमेज स्वैपिंग के लिए डायनामिक DOM मैनिपुलेशन, विंडो-आधारित घनत्व पहचान और CSS बैकग्राउंड छवियों की स्केलिंग शामिल है।
Features
- High-Resolution Image Delivery - Functions as a high-resolution image loader that serves appropriate asset variants to high-DPI displays.
- Browser Pixel Ratio Detection - Determines display pixel density by comparing window inner width to screen width using the devicePixelRatio property.
- Filename-Convention Mapping - Maps low-resolution image paths to high-resolution assets by automatically adding a predefined string to the extension.
- Resolution-Based Image Swappers - Dynamically swaps image source attributes and CSS background URLs based on the device's hardware display capabilities.
- Pixel-Density Asset Delivery - Provides a utility to detect screen resolution and serve high-density image assets for improved visual clarity.
- Source Image Toggles - Swaps image source attributes and background URLs in real-time based on the detected device pixel density.
- Device Detection Utilities - Identifies screen properties and pixel ratios to automate the loading of resolution-optimized image assets.
- Live Element Asset Swaps - Replaces image sources and background URLs on live elements by rewriting attributes based on the device pixel ratio.
- Dynamic Resolution Suffixes - Automatically resolves high-resolution image paths by appending predefined suffixes to the filenames.
- Responsive Image Loaders - Loads the appropriate image resolution based on the detected pixel density of the user's device.
- Dynamic DPI Background Swapping - Dynamically updates CSS background image properties to serve high-resolution assets based on detected screen density.
- Multi-Resolution Assets - Resolves multiple scales of the same asset by automatically appending suffixes to filenames based on pixel density.
- Asset Path Mappers - Implements automatic filename conventions and manual lookup tables to map low-resolution paths to high-density assets.
- Asset Path Overrides - Overrides automatic filename generation by using a lookup table to pair specific standard images with custom high-resolution URLs.
- Responsive Images - Provides a comprehensive handler for managing multiple image sources to ensure high-quality display across different screens.
- High-DPI Background Scaling - Uses media queries and scripts to deliver high-resolution background images based on display density.
- DOM Attribute Management - Implements the programmatic updating of HTML image attributes to swap standard assets for high-density versions.
- Dynamic DOM Manipulation - Iterates through the DOM to modify image elements and replace their sources after detecting screen density.
- CSS Media Queries - Provides preprocessor mixins to generate CSS media queries for delivering device-specific high-resolution background images.
- Sass Utilities - Helpers for rendering high-resolution image variants.
