☕
URLひとつでダミー画像を生成する AnyPlaceholder.com を公開しました
ダミー画像がほしいときに簡単に使える、AnyPlaceholder.comを作って公開しました。
1. AnyPlaceholder.com って何？
https://anyplaceholder.com/placeholder?...
にパラメータを付けるだけで、SVG・PNG などのダミー画像 を即時返すサービスです。
8 桁 HEX (α付きカラー)、角丸、Retina、WebP まで対応しています。
2. 使い方
最小例
<img src="https://anyplaceholder.com/placeholder?width=300&height=200">
| パラメータ | 必須 | 型 / 例 | 既定値 | 説明 |
|---|---|---|---|---|
width |
✅ |
300 (整数, px) |
— | 画像の横幅(最大3000px) |
height |
✅ |
200 (整数, px) |
— | 画像の高さ(最大3000px) |
bg |
－ |
48b6fab5 ( HEX3,6(透過無し)・4,8(透過あり) ) |
cccccc |
背景色。4桁・8桁時は末尾がアルファ値 (0〜f, 00〜ff) |
color |
－ |
ffffffaa ( HEX3,6(透過無し)・4,8(透過あり) ) |
333333 |
テキスト色 |
text |
－ | AnyPlaceHolder |
"${width}x${height}" |
中央に描画する文字列 |
fontSize |
－ |
60 (px) |
20 |
フォントサイズ |
radius |
－ |
10 (px) |
0 |
角丸半径。format=svg/png/webp で有効jpg の場合は角丸描画はするがデータは長方形 |
format |
－ |
webp png jpg svg
|
svg |
出力フォーマット |
retina |
－ | bool |
false |
true にするとサイズを2倍で生成 高DPI対応用 |
例: トップの画像はこちらです。
https:/placeholder?width=600&height=300&bg=48b6fab5&color=ffffff&text=AnyPlaceHolder&fontSize=60&radius=10&format=webp
JPG だけ注意
-
jpgは αチャンネルが使えないため、背景は自動的に不透明化 -
radius指定時は見た目は角丸、データ上は長方形になります
3. しくみをざっくり
| レイヤ | 技術 |
|---|---|
| CDN | CloudFront |
| 画像生成 | Lambda@Edge + Sharp |
| キャッシュ | 同一 URL を 24h エッジキャッシュ |
CloudFront + Lambda@Edgeで最小構成を目指しました。
まとめ
- 8桁 HEX、角丸、Retina、WEBP までカバー
- URL だけで完結
- 画像自体は純粋なバイナリのみ（余計なスクリプトなし）
気軽に試してみてください 🙌
Discussion