🔗
【まとめ】ダミー画像生成サービス
Lorem Picsum
- Unsplash の画像を使用
- https://picsum.photos/images から画像とIDを確認できる
- Go, Redis で書かれ, DigitalOcean にホストされている
- Repository: https://github.com/DMarby/picsum-photos
- 例
- //picsum.photos/200 : 正方形
- //picsum.photos/200/300 : 長方形
- //picsum.photos/id/1/200 : ID で指定
- //picsum.photos/seed/a/200 : シード値に基づく固定画像
- //picsum.photos/200?grayscale : グレースケール
-
//picsum.photos/200?blur : ぼけ
blur=1とすれば 1~10 まで指定可能
<img src="//picsum.photos/seed/a/200?grayscale&blur=2" />
placekitten (子猫)
- 子猫 (kitten) の画像
- 例
- //placekitten.com/200 : 正方形
- //placekitten.com/200/300 : 長方形
- //placekitten.com/g/200/300 : グレースケール
<img src="//placekitten.com/200" />
placebear (くま)
- くまの画像
- 縦横サイズ指定が必須
- 例
<img src="//placebear.com/200/200" />
placebeard (ひげ)
- ひげを生やした人の画像
- 例
- //placebeard.it/200 : 正方形
- //placebeard.it/200/300 : 長方形
- //placebeard.it/g/200/300 : グレースケール
<img src="//placebeard.it/200" />
PlaceIMG
- 縦横サイズ指定が必須
- 例
- //placeimg.com/200/200 : 正方形
- //placeimg.com/200/300 : 長方形
- カテゴリ指定
-
//placeimg.com/200/200/any :
anyはあってもなくても同じ - //placeimg.com/200/200/animals : 動物
- //placeimg.com/200/200/arch : 建物
- //placeimg.com/200/200/people : 人物
- //placeimg.com/200/200/tech : テクノロジー
-
//placeimg.com/200/200/any :
- オプション (カテゴリ名が必須)
- //placeimg.com/200/200/any/grayscale : グレースケール
- //placeimg.com/200/200/any/sepia : セピア
<img src="//placeimg.com/200/200/tech" />
placehold.jp (文字)
- 文字を画像として表示するサービス
- サイトの URL 生成が使いやすい
- 例
- //placehold.jp/200x200.png : サイズはファイル名で指定
- //placehold.jp/000000/ffffff/200x200.png?text=テキスト : 背景色, 文字色, 文字の指定
<img src="//placehold.jp/000000/ffffff/200x200.png?text=テキスト" />
Fakeimg.pl (文字)
- 文字を画像として表示するサービス
- 例
- //fakeimg.pl/200/ : 正方形
- //fakeimg.pl/200/300/ : 長方形
- //fakeimg.pl/200x200/000000/ffffff/?text=text : 背景色, 文字色, 文言の指定
- //fakeimg.pl/200x200/000000/ffffff/?text=テキスト&font=noto : 日本語は Noto フォントの指定が必要
<img src="//fakeimg.pl/200x200/000000/ffffff/?text=テキスト&font=noto" />
p-hold
- Flickr の CC ライセンス画像を使用
- 例
- //p-hold.com/200
- //p-hold.com/200/300
- //p-hold.com/cat/200 : キーワード指定できるが精度悪い
<img src="//p-hold.com/200" />
Pravatar (アバター)
- アバター画像
- 画像一覧: https://pravatar.cc/images
- 例
- //i.pravatar.cc/200 : 正方形のみ対応
- //i.pravatar.cc/200?img=1 : ID指定
-
//i.pravatar.cc/200?u=fake@example.com :
u={適当な文字}で固定画像
<img src="//i.pravatar.cc/200?u=fake@example.com" />
UI Avatars (アバター)
- アバター用に名前のイニシャルの文字を画像として表示するサービス
- デフォルトサイズは 64px
- 例
- //ui-avatars.com/api/?name=John Smith : 「js」
- //ui-avatars.com/api/?name=John Smith&background=000000&color=ffffff : 背景色, 文字色の指定
- //ui-avatars.com/api/?name=John Smith&background=random : ランダムの色
- //ui-avatars.com/api/?name=John Smith&size=200 : サイズ 16~512
- //ui-avatars.com/api/?name=John Smith&font-size=1 : フォントサイズ 0.1~1
- //ui-avatars.com/api/?name=John Smith&rounded=true : 丸
- //ui-avatars.com/api/?name=John Smith&format=svg : フォーマット svg,png
<img src="//ui-avatars.com/api/?name=John%20Smith&size=200" />
DiceBear Avatars (アバター)
- カスタマイズ出来るイラストアバター画像
- ファイル名は任意のシード値
- イラストの種類が豊富 : https://avatars.dicebear.com/styles
- Repository: https://github.com/dicebear/dicebear
- 例
<img src="//avatars.dicebear.com/api/micah/seed.svg" />
<img src="//avatars.dicebear.com/api/adventurer/seed.svg" />
<img src="//avatars.dicebear.com/api/initials/seed.svg" />
| micah | adventurer | initials |
|---|---|---|
 |
 |
 |
RoboHash (アバター)
- ロボットのアバター画像
- 例
-
//robohash.org/seed :
seedの部分に適当な文字を入れる
-
//robohash.org/seed :
<img src="//robohash.org/seed" />
baconmockup (ベーコン)
- ベーコンの画像
<img src="//baconmockup.com/200/200/" />
Discussion