Mesa Design System White Logo

Overview

Anatomy

Gallery Anatomy

  1. Image
  2. Caption
  3. Margin

 

When to use

  • When large amounts of multimedia content need to be displayed at once

 

When not to use

  • For a limited amount of multimedia content — use a single image or embed instead
  • If page load speed is a concern

 

Best practices

Compress and optimize image sizes

Reducing the file size without hindering quality can improve page load speed and overall performance.

 

Add descriptive alt text

Adding alt text to images ensures accessibility for users who use screen readers.

 

Provide captioning

Provide relevant captioning or descriptions of images to add context.

 

References

Ecommerce UX: The Best Practices Product Image Gallery, UX Planet