Image Placeholder Generator

Generate SVG/PNG placeholders for lazy loading

800 × 600 (4:3)

Dimensions & Styling Parameters

Width (px):

Height (px):

Custom Text:

Background:

Text Color:

Font Size:48px

Live Placeholder Preview

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
  <rect width="100%" height="100%" fill="#1e293b" />
  <text x="50%" y="50%" fill="#f8fafc" font-family="system-ui, -apple-system, sans-serif" font-size="48" font-weight="600" text-anchor="middle" dominant-baseline="middle">
    800 × 600
  </text>
</svg>

data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22600%22%20viewBox%3D%220%200%20800%20600%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231e293b%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23f8fafc%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20sans-serif%22%20font-size%3D%2248%22%20font-weight%3D%22600%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%0A%20%20%20%20800%20%C3%97%20600%0A%20%20%3C%2Ftext%3E%0A%3C%2Fsvg%3E

<img src="data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22800%22%20height%3D%22600%22%20viewBox%3D%220%200%20800%20600%22%3E%0A%20%20%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%231e293b%22%20%2F%3E%0A%20%20%3Ctext%20x%3D%2250%25%22%20y%3D%2250%25%22%20fill%3D%22%23f8fafc%22%20font-family%3D%22system-ui%2C%20-apple-system%2C%20sans-serif%22%20font-size%3D%2248%22%20font-weight%3D%22600%22%20text-anchor%3D%22middle%22%20dominant-baseline%3D%22middle%22%3E%0A%20%20%20%20800%20%C3%97%20600%0A%20%20%3C%2Ftext%3E%0A%3C%2Fsvg%3E" alt="800 × 600" width="800" height="600" />