{"library":"retinajs","title":"retinajs","description":"A JavaScript library that automatically serves high-resolution image variants (e.g., @2x, @3x) to devices with retina or high-DPI displays. Current stable version is 2.1.3, released in maintenance mode. It supports multiple pixel density levels and can swap img src attributes, inline background images, or generate CSS media queries. Unlike alternatives that require build-time processing or polyfills, retina.js works client-side with zero configuration for standard image naming conventions. It integrates with Sass, Less, and Stylus for CSS background images.","language":"javascript","status":"active","last_verified":"Sat Apr 25","install":{"commands":["npm install retinajs"],"cli":null},"imports":["import retinajs from 'retinajs'","import { retinajs } from 'retinajs'","window.retinajs('img')","import type { RetinaOptions } from 'retinajs'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"// Install: npm install retinajs\n\nimport retinajs from 'retinajs';\n\n// Option 1: Auto-process all images with data-rjs attribute\ndocument.addEventListener('DOMContentLoaded', () => {\n  retinajs();\n});\n\n// Option 2: Process specific elements\nconst images = document.querySelectorAll('img[data-rjs]');\nretinajs(images);\n\n// HTML example:\n// <img src=\"normal.png\" data-rjs=\"2\" />\n// will become <img src=\"normal@2x.png\" /> on retina devices\n\n// For inline backgrounds:\n// <div style=\"background: url(normal.png)\" data-rjs=\"2\"></div>","lang":"typescript","description":"Shows how to install, import, and use retinajs to auto-swap images on retina displays.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}