sampleimg

Developer images from a URL.URLだけで開発用画像を生成。

Free Placeholder Image API with deterministic mock images, QR, OG, Avatar, Chart & more. No API key required.決定性モック画像、QR、OG、アバター、チャートなどに対応した無料画像API。APIキー不要です。

Open Image Builder画像ビルダーを開く/product?seed=product-123See the deterministic shop demo
Fast高速Customizableカスタマイズ可能Auto-Cached自動キャッシュFree無料

BUILD FROM A URLURLから画像を作成

Interactive Image Builderインタラクティブ画像ビルダー

Tune the image, preview the real API response, then copy the snippet you need.画像を調整し、実際のAPIレスポンスを確認して、必要なコードをコピーできます。

API docsAPI仕様
Canvasキャンバス
Quick sizesよく使うサイズ
Background背景
Textテキスト
Border & overlay枠線・Overlay
LIVE PREVIEWライブプレビューReady
placeholder image preview

Use this imageこの画像を使う

Copy and pasteコピーして利用
Image URL
HTML
Markdown
CSS
React / Next.js

Getting Started使い方

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

Basic Usage基本的な使い方

https://sampleimg.com/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 are native; JPEG/WebP currently return PNG.出力形式。SVG/PNG対応、JPEG/WebP指定時は現在PNGを返します。png?format=svg
fontSizeText size (1-512px)文字サイズ（1-512px）min(w,h)/10?fontSize=48
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
seedDeterministic background seed (max 200 chars)決定性背景のseed（最大200文字）-?seed=product-123
styleSeed style: gradient, mesh, geometric, or wavesSeedスタイル: gradient / mesh / geometric / wavesgradient?seed=123&style=mesh

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 or PNG. JPEG/WebP requests are compatibility aliases and return PNG.形式: SVGまたはPNG。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完全カスタマイズ

Combine color, text, size, typography, gradients, patterns, and more色、テキスト、サイズ、文字、グラデーション、パターンなどを組み合わせ可能

CORS ReadyCORS対応

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

Deterministic Seeds決定性Seed

Responsive, stable mock images from a seed — ideal for products, users, and repeatable prototypesレスポンシブで安定したモック画像をSeedから生成。商品、ユーザー、再現可能なプロトタイプに最適

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

Deterministic Mock Images決定性モック画像

The same seed creates the same image every time. Choose a style for a different visual language.同じSeedならいつでも同じ画像を生成します。スタイルを選んで見た目を変えられます。

Product / gradient商品 / gradient
/product?seed=product-001
MeshMesh
/600x600?seed=product-002&style=mesh
GeometricGeometric
/600x600?seed=product-003&style=geometric
YouTube / wavesYouTube / waves
/youtube?seed=product-004&style=waves

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:注意: Use HTTP(S) image URLs without credentials. Local/private destinations and redirects are rejected; responses are limited to 2MB. 認証情報のないHTTP(S)画像URLを使用してください。ローカル/プライベート宛先とリダイレクトは拒否され、レスポンスは2MBまでです。
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.com/800x450?bg=4a90e2&text=Placeholder" alt="Placeholder">

Markdown

![Placeholder](https://sampleimg.com/800x450?bg=4a90e2&text=Image)

CSS

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