https://github.com/jongacnik/plh
⬜️ base64 image placeholders
https://github.com/jongacnik/plh
base64 placeholder transparent
Last synced: about 1 year ago
JSON representation
⬜️ base64 image placeholders
- Host: GitHub
- URL: https://github.com/jongacnik/plh
- Owner: jongacnik
- Created: 2017-02-17T05:07:03.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-02-17T05:12:27.000Z (over 9 years ago)
- Last Synced: 2025-02-28T09:21:02.944Z (over 1 year ago)
- Topics: base64, placeholder, transparent
- Language: JavaScript
- Size: 2.93 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# plh
Returns a base64 encoded transparent placeholder gif as Data URI
```bash
$ npm i plh
```
**Requires [ImageMagick](https://www.imagemagick.org/)**
## CLI
Let's make a 1x1 pixel placeholder:
```bash
$ plh
# → data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==
```
You can also pass in a width and height:
```bash
$ plh 10 50
# → data:image/gif;base64,R0lGODlhCgAyAPAAAAAAAAAAACH5BAEAAAAALAAAAAAKADIAAAIUhI+py+0Po5y02ouz3rz7D4biiBQAOw==
```
## Node
You can also use `plh` from within node:
```js
var plh = require('plh')
var base64 = plh(3, 4)
// → data:image/gif;base64,R0lGODlhAwAEAPAAAAAAAAAAACH5BAEAAAAALAAAAAADAAQAAAIDhI9WADs=
```
## FAQ
### Why?
Sometimes base64 encoded placeholder images are handy. I made this so I could quickly nab aspect ratio specific placeholders.
### How?
The ImageMagick [`convert`](https://www.imagemagick.org/script/convert.php) command is used to create a placeholder image which is piped into the `base64` program and concated to a [data uri](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs) prefix:
```bash
echo 'data:image/gif;base64,'"$(convert -size 1x1 xc:transparent gif:- | base64)"
```