Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rh12503/tip
Easy-to-use triangulated image placeholders
https://github.com/rh12503/tip
Last synced: 2 months ago
JSON representation
Easy-to-use triangulated image placeholders
- Host: GitHub
- URL: https://github.com/rh12503/tip
- Owner: rh12503
- License: mit
- Created: 2021-05-05T09:16:21.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-05-22T10:36:01.000Z (over 3 years ago)
- Last Synced: 2024-10-15T11:35:36.173Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 3.66 MB
- Stars: 39
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Triangulated image placeholders
tip is an easy-to-use, efficent, and lightweight library for triangulated image placeholders. It uses a highly-optimized format over 10x smaller than minified SVG. _(Currently not production ready)_
Check out [this demo](https://rh12503.github.io/tip/).
## Usage
1. Add the library to your HTML:
```html
...
```
2. Change the `src` attribute to `data-src` for any image with placeholders.
The library will look for the placeholder asset in the same location as the original image. To apply a blur filter on the placeholder, use the `data-blur` attribute.
## Generating placeholders
Placeholder assets have the same name as the original asset but with the extension `.tri`. For example, `image.png` would become `image.tri`.
### GUI
Install the GUI from the [releases page](https://github.com/RH12503/tip/releases).
### CLI
_In the future the command will be added to npx._
Install the CLI using the command:
```
go get -u github.com/RH12503/tip-backend/tip
```
Generate the placeholder files by running
```
tip -in /path/to/image
```
or to process all images in a folder
```
tip -in /path/to/folder
```
The placeholder `.tri` files will be created in the same location as the image files!
## Browser support
Every browser that has been updated within the last few years should be supported.
| 
| 
| 
| 
| 
| 
| :-: | :-: | :-: | :-: | :-: | :-: |
| 26 | 9 | 12 | 16 | 12.1 | 10 |
All major mobile browsers are also supported including: Safari on iOS, Android WebView, Chrome Android & iOS, Firefox for Android, Opera Android, and Samsung Internet.
## Contributors
Thanks to for [@bstncartwright](https://github.com/bstncartwright) for advice and implementing the original concept on [his blog](https://bostonc.dev/)!