Placebear

How to Use This API

1. Basic Size (Width x Height)

https://placebear.com/800/600

2. Square Image

https://placebear.com/300/300

3. Wide Banner / Hero Image

https://placebear.com/1920/480

4. Small Thumbnail

https://placebear.com/150/150

5. Portrait / Vertical

https://placebear.com/400/600

6. Response Format

Placebear returns JPEG images (image/jpeg) of real bear photographs. The service crops a high-quality bear photo to fill your requested dimensions. Each request randomly selects from a library of bear photos, so repeated calls to the same URL may return different images.

7. HTML — Responsive Image

<img src="https://placebear.com/1200/800" 
     alt="Bear placeholder" 
     class="responsive-img"
     style="max-width: 100%; height: auto;">

8. HTML — Gallery Grid with Different Sizes

<div class="gallery">
  <img src="https://placebear.com/400/300" alt="Bear 1">
  <img src="https://placebear.com/400/400" alt="Bear 2">
  <img src="https://placebear.com/400/500" alt="Bear 3">
  <img src="https://placebear.com/400/300" alt="Bear 4">
</div>

9. CSS Background Image

.hero-banner {
  background-image: url('https://placebear.com/1920/1080');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 500px;
}

.card-thumbnail {
  background-image: url('https://placebear.com/400/300');
  background-size: cover;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
}

10. JavaScript — Swap Placeholder on Error

const images = document.querySelectorAll('img[data-src]');
images.forEach(img => {
  img.src = img.dataset.src;
  img.onerror = () => {
    // Fallback to placebear if image fails
    img.src = 'https://placebear.com/400/300';
    img.alt = 'Placeholder bear';
  };
});