sampleimg

Free Placeholder Image API with QR, OG, Avatar, Chart & MoreURLパラメータで動的にカスタマイズ可能なSVG画像生成API

Fast高速Customizableカスタマイズ可能Auto-Cached自動キャッシュFree無料

Getting Started使い方

Generate custom SVG images by simply specifying the image size and parameters in the URL.URLに画像サイズとパラメータを指定するだけで、カスタムSVG画像を生成できます。

Basic Usage基本的な使い方

https://sampleimg.YOUR-SUBDOMAIN.workers.dev/800x450

Sample Imagesサンプル画像

Default
Defaultデフォルト
/800x450
Custom Color
Red Background赤色背景
?bg=ff6b6b&fg=ffffff
Custom Text
Blue with Text青色+テキスト
?bg=4a90e2&text=Hello
Rounded Card
Rounded Card角丸カード
?radius=20&border=2
Bold Text
Bold & Spaced太字+字間
?weight=bold&letterSpacing=3
Aligned Text
Custom Alignment位置調整
?align=left&valign=top
OG Image
OG Image SizeOG画像サイズ
1200x630?bg=1a1a1a
Success
Success Badge成功バッジ
400x300?bg=2ecc71
Banner
Wide Bannerワイドバナー
600x200?bg=34495e
Circle Icon
Rounded Icon丸型アイコン
300x300?radius=50
Full HD
Full HDフルHD
1920x1080?bg=667eea
Sale Badge
Styled Badge装飾バッジ
?radius=15&border=5
Linear Gradient
Linear Gradient線形グラデーション
?gradient=linear&stops=...
Radial Gradient
Radial Gradient放射状グラデーション
?gradient=radial&stops=...
Noise Effect
Noise Effectノイズ効果
?noise=30
Red Dot Pattern
Red Dot Pattern赤ドットパターン
?pattern=dot&patternColor=ff0000
Grid Pattern
Grid Patternグリッドパターン
?pattern=grid
Mixed Effects
Mixed Effects複合エフェクト
?gradient=...&noise=...&pattern=...
PNG Format
PNG FormatPNG形式
?format=png
PNG OG Image
PNG OG ImagePNG OG画像
?format=png&gradient=...

Parametersパラメータ

ParameterパラメータDescription説明DefaultデフォルトExample例
sizeImage size (width x height)画像サイズ（幅x高さ）-800x450
bgBackground color (hex, without #)背景色（hex、#なし）cccccc?bg=ff6b6b
fgText color (hex, without #)文字色（hex、#なし）333333?fg=ffffff
textDisplay text (max 100 chars)表示テキスト（最大100文字）Size (e.g., 800x450)サイズ（例: 800x450）?text=Hello
formatOutput format (svg/png/jpeg/webp)出力形式 (svg/png/jpeg/webp)png?format=svg
radiusCorner radius (0-100px)角丸半径（0-100px）0?radius=20
borderBorder width (0-50px)枠線幅（0-50px）0?border=2
borderColorBorder color (hex, without #)枠線色（hex、#なし）000000?borderColor=ff0000
paddingInner padding (0-200px)内部余白（0-200px）0?padding=40
alignText horizontal alignmentテキスト水平位置center?align=left
valignText vertical alignmentテキスト垂直位置middle?valign=top
weightFont weight (normal/bold/100-900)フォント太さ（normal/bold/100-900）normal?weight=bold
lineHeightLine height (0.5-3.0)行間（0.5-3.0）1.2?lineHeight=1.5
letterSpacingLetter spacing (-10 to 50px)字間（-10～50px）0?letterSpacing=2
gradientGradient type (linear | radial)グラデーション種類（linear | radial）-?gradient=linear
angleGradient angle (0-360°, linear only)グラデーション角度（0-360度、線形のみ）90?angle=45
stopsColor stops (format: color,offset|color,offset)カラーストップ（形式: color,offset|color,offset）-?stops=ff0000,0|00ff00,100
noiseNoise intensity (0-100)ノイズ強度（0-100）0?noise=30
patternPattern type (dot | grid | diagonal)パターン種類（dot | grid | diagonal）-?pattern=dot
patternColorPattern color (hex without #)パターン色（hex、#なし）000000?patternColor=ff0000

Limitations制限事項

  • Size: 1-4096px (per side)サイズ: 1-4096px（各辺）
  • Area: Max 4,194,304px (4096x1024)面積: 最大4,194,304px（4096x1024）
  • Text: Max 100 charactersテキスト: 最大100文字
  • Format: SVG, PNG, JPEG, WebP (Note: JPEG/WebP returns PNG)形式: SVG, PNG, JPEG, WebP（注: JPEG/WebPはPNG形式で返します）

Features特徴

Lightning Fast高速レスポンス

Powered by Cloudflare Workers edge network for blazing fast access worldwideCloudflare Workersのエッジネットワークで世界中どこからでも高速アクセス

Auto Caching自動キャッシュ

Long-term cache headers make subsequent requests ultra-fast. Global CDN delivery長期キャッシュヘッダーで2回目以降は超高速。CDNでグローバル配信

Fully Customizable完全カスタマイズ

Freely combine background color, text color, text, and size背景色、文字色、テキスト、サイズを自由に組み合わせ可能

CORS ReadyCORS対応

Accessible from any domain. No cross-origin restrictionsどんなドメインからでもアクセス可能。クロスオリジン制限なし

Responsiveレスポンシブ

SVG scales beautifully at any size. Retina readySVGなので拡大縮小しても美しい。Retina対応

Free無料

100% free up to 100K requests/month. Commercial use allowed月間10万リクエストまで完全無料。商用利用OK

New Endpoints新エンドポイント

QR Code GeneratorQRコード生成

Generate QR codes for URLs, text, and more.URL、テキストなどのQRコードを生成できます。

Basic QR Code基本的なQRコード
/qr?data=https://sampleimg.com
Large SVG QR大サイズSVG QR
/qr?data=Hello&size=512

OG Image TemplateOG画像テンプレート

Generate Open Graph images (1200x630) for social media.ソーシャルメディア向けのOpen Graph画像（1200x630）を生成できます。

Blog OG ImageブログOG画像
/og?title=Blog&description=...
Dark OG ImageダークOG画像
/og?title=Dark&bg=1a1a1a

Avatar Generatorアバター生成

Generate deterministic identicons from any seed string.任意のseed文字列から決定性のあるIdenticonを生成できます。

User Avatarユーザーアバター
/avatar/user123
Small Avatar小サイズアバター
/avatar/alice?size=128
SVG AvatarSVGアバター
/avatar/bob?format=svg

Chart Generatorチャート生成

Generate simple bar and line charts from data.データから簡易的な棒グラフと折れ線グラフを生成できます。

Bar Chart棒グラフ
/chart?type=bar&data=...
Line Chart折れ線グラフ
/chart?type=line&labels=...
Styled Chartカスタムチャート
/chart?bg=1a1a1a&fg=4a90e2

Pixel Art Generatorドット絵生成

Generate pixel art using presets or custom patterns.プリセットまたはカスタムパターンを使用してドット絵を生成できます。

Heart (Preset)ハート（プリセット）
/pixel?preset=heart
Smiley (Preset)スマイリー（プリセット）
/pixel?preset=smiley
Star (Preset)星（プリセット）
/pixel?preset=star
Check (Preset)チェック（プリセット）
/pixel?preset=check
Arrow (Preset)矢印（プリセット）
/pixel?preset=arrow
X Mark (Preset)バツ（プリセット）
/pixel?preset=x
Custom Patternカスタムパターン
/pixel?data=11111,10001,...
PNG FormatPNG形式
/pixel?format=png

Image Overlay (Composite)画像合成（Overlay）

Overlay external images onto placeholder images. Supports position, size, and opacity control. Works with SVG and PNG formats.プレースホルダー画像に外部画像を重ねて合成できます。位置・サイズ・透明度の制御が可能です。SVG/PNG形式対応。

Note:注意: Overlay feature requires external image URLs. Demo uses example.com placeholders. Overlay機能は外部画像URLが必要です。デモでは example.com のプレースホルダーを使用しています。
Base Image (SVG)ベース画像（SVG）
/800x450?format=svg&bg=667eea
Base Image (PNG)ベース画像（PNG）
/800x450?format=png&bg=1a1a1a
Gradient Base (SVG)グラデーションベース（SVG）
?gradient=linear&stops=...

Overlay ParametersOverlayパラメータ

  • overlay: External image URL (required) 外部画像URL（必須）
  • overlayX: X position (px, left/center/right, default: center) X座標（px、left/center/right、デフォルト: center）
  • overlayY: Y position (px, top/middle/bottom, default: middle) Y座標（px、top/middle/bottom、デフォルト: middle）
  • overlayWidth: Width (px, %, auto, default: auto) 幅（px、%、auto、デフォルト: auto）
  • overlayHeight: Height (px, %, auto, default: auto) 高さ（px、%、auto、デフォルト: auto）
  • overlayOpacity: Opacity (0.0-1.0, default: 1.0) 透明度（0.0-1.0、デフォルト: 1.0）
Example Usage:使用例:
/800x450?format=svg&overlay=https://example.com/logo.png&overlayX=right&overlayY=bottom&overlayOpacity=0.5

Usage Examples使用例

HTML

<img src="https://sampleimg.YOUR-SUBDOMAIN.workers.dev/800x450?bg=4a90e2&text=Placeholder" alt="Placeholder">

Markdown

![Placeholder](https://sampleimg.YOUR-SUBDOMAIN.workers.dev/800x450?bg=4a90e2&text=Image)

CSS

.hero {
  background-image: url('https://sampleimg.YOUR-SUBDOMAIN.workers.dev/1920x1080?bg=667eea&text=Hero');
}