Media (Images & Video)

Axicons - The Icon System

Axiom01 includes a comprehensive icon system with over 1,700 native SVG icons in active base and premium libraries.

→ Browse the full Axicons library

Images & Media

Best practices for using images, videos, and other media in your Axiom01 projects.

Responsive Images

<!-- Simple responsive image -->
<figure>
  <img 
    src="image.jpg" 
    alt="Descriptive text"
  >
</figure>

<!-- Picture element for art direction -->
<picture>
  <source media="(min-width: 900px)" srcset="image-large.jpg">
  <source media="(min-width: 600px)" srcset="image-medium.jpg">
  <img src="image-small.jpg" alt="Descriptive text">
</picture>

<!-- With srcset for different densities -->
<img 
  src="image.jpg"
  srcset="image@2x.jpg 2x, image@3x.jpg 3x"
  alt="Descriptive text"
>

Image in Card

<article class="card">
  <figure>
    <img src="thumbnail.jpg" alt="Card image">
  </figure>
  <header>
    <h3>Card Title</h3>
  </header>
  <p>Card description...</p>
</article>

Embedded Video

<!-- Responsive iframe using .video-embed wrapper -->
<div class="video">
  <iframe 
    src="https://www.youtube.com/embed/dQw4w9WgXcQ"
    title="YouTube video player"
    frameborder="0"
    allow="accelerometer; autoplay; clipboard-write;
           encrypted-media; gyroscope; picture-in-picture"
    allowfullscreen
  ></iframe>
</div>

SVG Graphics

<!-- Inline SVG -->
<figure>
  <svg viewBox="0 0 100 100" width="100" height="100">
    <circle cx="50" cy="50" r="40" fill="var(--a-color-primary)"></circle>
  </svg>
</figure>

<!-- External SVG -->
<img src="graphic.svg" alt="Graphic description">

Accessibility for Media

Ensure all media is accessible to all users:

• Alt Text - Always include descriptive alt text for images
• Captions - Add captions for videos (especially audio-dependent content)
• Transcripts - Provide transcripts for podcasts and important videos
• Icon Labels - Use aria-labels or title attributes for icon-only buttons
• Color Contrast - Ensure icons and graphics have proper contrast
• Keyboard Navigation - All interactive media controls must be keyboard accessible

Performance Tips

Optimize media for faster page load times:

• Image Optimization - Use modern formats (WebP) with fallbacks
• Lazy Loading - Use the loading="lazy" attribute for below-the-fold images
• SVG Optimization - Minify SVGs to reduce file size
• Video Optimization - Use appropriate codecs and bitrates for streaming
• Responsive Images - Serve different image sizes for different devices