Bulma Image

The Image component in Bulma provides a responsive container for images that automatically maintains aspect ratios and works well across all devices. It offers various modifiers for rounded corners, thumbnails, and ratio preservation.

Basic Image Container

The simplest way to use images in Bulma is with the .image container:

<!-- Basic responsive image -->
<figure class="image">
  <img src="image.jpg" alt="Description" />
</figure>

<!-- Fixed size image -->
<figure class="image is-128x128">
  <img src="image.jpg" alt="Description" />
</figure>

Bulma provides placeholder images in various sizes

Square Image Sizes

Bulma offers several predefined square size classes:

Rectangular Image Sizes

For non-square aspect ratios, use these rectangular size classes:

<!-- Standard rectangular sizes -->
<figure class="image is-2by1">
  <img src="image.jpg" alt="2:1 ratio" />
</figure>

<figure class="image is-3by2">
  <img src="image.jpg" alt="3:2 ratio" />
</figure>

<figure class="image is-4by3">
  <img src="image.jpg" alt="4:3 ratio" />
</figure>

<figure class="image is-16by9">
  <img src="image.jpg" alt="16:9 ratio" />
</figure>

Image Modifiers

Enhance your images with various style modifiers:

Rounded Images

<!-- Fully rounded (circle) -->
<figure class="image is-128x128">
  <img class="is-rounded" src="avatar.jpg" alt="Rounded avatar" />
</figure>

<!-- Different border radius options -->
<img class="is-rounded" src="image.jpg" alt="Rounded" />
<img class="has-radius-small" src="image.jpg" alt="Small radius" />
<img class="has-radius-normal" src="image.jpg" alt="Normal radius" />
<img class="has-radius-large" src="image.jpg" alt="Large radius" />

Thumbnail Images

<!-- Image with frame/border -->
<figure class="image is-128x128">
  <img src="photo.jpg" class="is-thumbnail" alt="Thumbnail" />
</figure>

Responsive Images

<!-- Full width responsive image -->
<figure class="image">
  <img src="hero.jpg" alt="Hero image" />
</figure>

<!-- Responsive with max width -->
<figure class="image" style="max-width: 300px;">
  <img src="logo.png" alt="Logo" />
</figure>

Image with Caption

Use the standard HTML <figure> and <figcaption> elements:

<figure class="image is-16by9">
  <img src="landscape.jpg" alt="Beautiful landscape" />
  <figcaption class="has-text-centered mt-2">
    <p class="is-size-7 has-text-grey">A beautiful mountain landscape at sunset</p>
  </figcaption>
</figure>

Lazy Loading

For better performance, use native lazy loading:

<figure class="image">
  <!-- Native lazy loading -->
  <img src="image.jpg" alt="Description" loading="lazy" />
</figure>

<!-- Low-quality image placeholder (LQIP) -->
<figure class="image">
  <img 
    src="low-quality.jpg" 
    data-src="high-quality.jpg" 
    alt="Description" 
    class="lazyload" 
    loading="lazy" 
  />
</figure>

Practical Examples

Avatar Gallery

<div class="columns is-multiline is-centered">
  <div class="column is-narrow">
    <figure class="image is-64x64">
      <img class="is-rounded" src="avatar1.jpg" alt="User 1" />
    </figure>
  </div>
  <div class="column is-narrow">
    <figure class="image is-64x64">
      <img class="is-rounded" src="avatar2.jpg" alt="User 2" />
    </figure>
  </div>
  <div class="column is-narrow">
    <figure class="image is-64x64">
      <img class="is-rounded" src="avatar3.jpg" alt="User 3" />
    </figure>
  </div>
  <div class="column is-narrow">
    <figure class="image is-64x64">
      <img class="is-rounded" src="avatar4.jpg" alt="User 4" />
    </figure>
  </div>
</div>

Responsive Product Gallery

<div class="columns is-multiline">
  <div class="column is-half-tablet is-one-third-desktop">
    <figure class="image is-4by3">
      <img src="product1.jpg" alt="Product 1" loading="lazy" />
    </figure>
  </div>
  <div class="column is-half-tablet is-one-third-desktop">
    <figure class="image is-4by3">
      <img src="product2.jpg" alt="Product 2" loading="lazy" />
    </figure>
  </div>
  <div class="column is-half-tablet is-one-third-desktop">
    <figure class="image is-4by3">
      <img src="product3.jpg" alt="Product 3" loading="lazy" />
    </figure>
  </div>
</div>

Hero Banner with Overlay Text

<figure class="image is-16by9">
  <img src="hero-banner.jpg" alt="Hero banner" />
  <div class="has-overlay">
    <div class="overlay-content has-text-centered">
      <h1 class="title is-2 has-text-white">Welcome to Our Site</h1>
      <p class="subtitle has-text-white">Discover amazing products</p>
    </div>
  </div>
</figure>

<style>
.has-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

CSS Variables for Customization

Best Practices

• Always add alt text for accessibility
• Use appropriate aspect ratio classes for consistent layouts
• Implement lazy loading for images below the fold
• Optimize images for web (compression, modern formats like WebP)
• Use loading=&qout;lazy&qout; attribute for better performance
• Consider using <picture> element with multiple sources
• Add appropriate borders and shadows for visual hierarchy

Up next: Bulma Menu Component