Advanced Media & Icons Guide

Optimizing Images for Performance

Images are often the largest contributors to page weight. Axiom01 encourages strategies to minimize their impact while maintaining visual quality.

Responsive Images

Use the <picture> element and srcset attribute to serve appropriately sized images for different screen resolutions and device capabilities. This prevents users from downloading unnecessarily large files.

<!-- HTML -->
	<picture>
			<source srcset="image-large.webp 1200w, image-medium.webp 800w" type="image/webp">
			<source srcset="image-large.jpg 1200w, image-medium.jpg 800w" type="image/jpeg">
			<img src="image-small.jpg" alt="Descriptive alt text" class="responsive-image" loading="lazy">
	</picture>

The .responsive-image class ensures your image scales correctly within its container.

Lazy Loading

Implement lazy loading for off-screen images using the loading="lazy" attribute. This defers loading until the image is about to enter the viewport, significantly improving initial page load times.

<!-- HTML -->
	<img src="path/to/image.jpg" alt="Description" class="responsive-image" loading="lazy">

Modern Image Formats

Prioritize modern image formats like WebP or AVIF over traditional JPEG or PNG. These formats offer superior compression without significant loss of quality, leading to smaller file sizes and faster downloads.

Integrating Icons & SVGs

Icons are crucial for visual communication. Axiom01 supports both SVG and icon fonts, with recommendations for each.

Scalable Vector Graphics (SVGs)

SVGs are ideal for icons and simple graphics due to their scalability, small file size, and ability to be styled with CSS. Embed them directly in your HTML for maximum control.

<!-- HTML -->
	<!-- Inline SVG for full CSS control -->
	<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="var(--a-color-primary)">
			<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
	</svg>

	<!-- Using an external SVG file -->
	<img src="/assets/icons/check.svg" alt="Checkmark" class="icon-svg">

You can style inline SVGs using CSS variables, making them theme-aware.

Icon Fonts (e.g., Font Awesome)

For a wide range of common icons, icon font libraries like Font Awesome are a convenient choice. Ensure you load the library's CSS and use the provided classes.

<!-- In your HTML head -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" crossorigin="anonymous"/>

	<!-- In your body -->
	<i class="fas fa-star"></i>
	<i class="fas fa-heart primary"></i>
	<i class="fas fa-bell secondary"></i>

Axiom01's styling will automatically apply appropriate sizing and color based on context, but you can override with semantic color classes if needed.

Accessibility for Icons

Always provide alternative text for images (alt attribute) and ensure icons used for meaning have accessible labels (e.g., aria-label, visually hidden text, or a descriptive parent element).

<!-- HTML -->
	<button aria-label="Delete item"><i class="fas fa-trash" aria-hidden="true"></i></button>
	<!-- OR -->
	<a href="#"><i class="fas fa-info-circle" aria-hidden="true"></i> <span>More Information</span></a>

Media Examples

Image Gallery Example

Icon Showcase