{}jsonExamples

Image

Last updated 2026-05-20

Generate placeholder images on the fly from a URL. Set size, background and text colour, custom text, font family, font size, and output format (PNG, JPG, WebP). Live at /image.

Image

GET

Generate square image

  • The URL is: jsonexamples.com/image
// https://jsonexamples.com/image/SIZE
fetch('https://jsonexamples.com/image/150')
  .then(response => response.blob())
  .then(blob => { console.log('Fetched image blob:', blob); })
// Blob { size: SIZE, type: 'image/png' }
GET

Custom width / height

  • URL: jsonexamples.com/image/WIDTHxHEIGHT
fetch('https://jsonexamples.com/image/200x100')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })
GET

Custom text

  • URL: jsonexamples.com/image/SIZE?text=TEXT
fetch('https://jsonexamples.com/image/400x200/008080/ffffff?text=Hello+Peter')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })
GET

Custom background color

fetch('https://jsonexamples.com/image/400x200/282828')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })
GET

Custom background and text color

fetch('https://jsonexamples.com/image/400x200/008080/ffffff')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })
GET

Different image formats

  • Supported formats: png, jpg, webp.
fetch('https://jsonexamples.com/image/100?type=webp')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })
GET

Custom font family

  • Supported: bitter, cairo, comfortaa, cookie, dosis, gotham, lobster, marhey, pacifico, poppins, quicksand, qwigley, satisfy, ubuntu.
fetch('https://jsonexamples.com/image/400x200/008080/ffffff?text=Hello+Peter!&fontFamily=cookie')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })
GET

Custom font size

fetch('https://jsonexamples.com/image/400x200/008080/ffffff?text=Hello+Peter!&fontSize=16')
  .then(response => response.blob())
  .then(blob => { console.log(blob); })

Related examples

Hub