imulus/retinajsArchived
Retinajs
Retinajs is a JavaScript library and responsive image handler that detects device pixel density to serve high-resolution images. It functions as a high-resolution image loader and manager, replacing standard image source attributes and CSS background URLs with high-density versions based on the hardware display capabilities of the user's device.
The tool manages asset resolution through both automatic filename conventions, using predefined suffixes to map low-resolution paths to high-density assets, and manual lookup tables that pair specific images with custom URLs. It also includes the ability to generate CSS media queries via preprocessor mixins for device-specific background image delivery.
The library covers a broad range of responsive image optimization capabilities, including dynamic DOM manipulation for image swapping, window-based density detection, and the scaling of CSS background images.
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.
Star history
How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.
