https://github.com/roborourke/rsp-img
A light JS library makes image's `sizes` attributes match their current display width
https://github.com/roborourke/rsp-img
Last synced: 12 months ago
JSON representation
A light JS library makes image's `sizes` attributes match their current display width
- Host: GitHub
- URL: https://github.com/roborourke/rsp-img
- Owner: roborourke
- License: gpl-3.0
- Created: 2024-08-10T21:17:10.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-08-12T18:34:23.000Z (almost 2 years ago)
- Last Synced: 2025-06-28T16:12:04.495Z (12 months ago)
- Language: JavaScript
- Homepage: https://gigantic-three-sparrow.glitch.me/
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# `rsp-img`
JS that updates image's `sizes` attribute according to its currently displayed size.
## Demo
https://gigantic-three-sparrow.glitch.me/
## What is this?
Responsive images on the web are difficult to get right. What I think most of us would like is an image tag that uses the `srcset` attribute to determine the most appropriate available src based on the size the image is currently being displayed at, rather than in relation to the viewport.
This library makes the `sizes` attribute dynamic and tied to an image's current display size, so the browser can make a more informed decision about which image to download from the `srcset`.
## Features
- Less than 500B
- Progressive enhancement for standard `img` tags
- Accounts for device pixel ratio
- Uses `ResizeObserver` and `requestAnimationFrame` for optimal performance
## Usage
Include the `rsp-img.js` file in your bundle or directly in your web page e.g.
```html
```