lemuriaOS
creativecontentseo

Image Asset Pipeline

Define the image optimization strategy, format selection, responsive srcset configuration, and lazy loading rules that keep visual quality high while meeting Core Web Vitals performance targets.

Context

Images are the leading cause of slow web pages. An unoptimized hero image can single-handedly fail Core Web Vitals. This skill defines the pipeline rules so every image is the right format, the right size, loaded at the right time, and described with the right alt text.

Procedure

  1. Classify every image by position: above-fold (hero, logo), below-fold (features, testimonials, case studies), decorative (backgrounds, patterns), and functional (icons, avatars).
  2. Choose formats per image type: photographs → WebP (primary) with AVIF (progressive enhancement) and JPEG fallback. Graphics/logos → SVG (preferred), PNG fallback. Icons → SVG inline or icon font.
  3. Define quality settings: hero images at 80-85% quality (balance of size and sharpness), thumbnails at 70%, decorative at 60%.
  4. Create srcset breakpoints for responsive images: 640w, 960w, 1280w, 1920w. Map to the responsive layout system breakpoints.
  5. Set loading attributes: above-fold images get loading="eager" and fetchpriority="high". Below-fold images get loading="lazy" and decoding="async".
  6. Write alt text rules: descriptive for content images (what the image shows + why it matters), empty alt="" for decorative images, functional alt for linked images (where the link goes).

Output Format

# Image Asset Pipeline

## Format Matrix
| Image Type | Primary | Fallback | Quality | Max Width |
|------------|---------|----------|---------|-----------|
| Hero photo | WebP | JPEG | 82% | 1920px |
| Feature screenshot | WebP | PNG | 80% | 1280px |
| Logo | SVG | PNG | — | 200px |
| Avatar | WebP | JPEG | 75% | 96px |
| Background | WebP | JPEG | 60% | 1920px |
| Icon | SVG inline | — | — | 32px |

## Responsive Srcset
```html
<img
  src="/img/hero.webp"
  srcset="
    /img/hero-640w.webp 640w,
    /img/hero-960w.webp 960w,
    /img/hero-1280w.webp 1280w,
    /img/hero-1920w.webp 1920w
  "
  sizes="(max-width: 640px) 100vw, (max-width: 1280px) 50vw, 640px"
  width="1920"
  height="1080"
  alt="[descriptive alt text]"
  loading="eager"
  fetchpriority="high"
/>

Loading Strategy

| Position | Loading | Priority | Decoding | |----------|---------|----------|----------| | Hero (above fold) | eager | high | auto | | Trust logos | eager | low | async | | Feature sections | lazy | auto | async | | Testimonial avatars | lazy | auto | async | | Footer images | lazy | low | async |

Alt Text Rules

| Image Type | Alt Text Pattern | Example | |------------|-----------------|---------| | Product screenshot | "[What it shows] in [product name]" | "Dashboard showing real-time metrics in LemuriaOS" | | Team photo | "[Name], [role] at [company]" | "Sarah Chen, CTO at Acme" | | Decorative | alt="" (empty) | Background gradient | | Icon with label | alt="" (label provides context) | Search icon next to "Search" text | | Linked image | "[Where the link goes]" | "Read the case study" |

Build Pipeline

  1. Source images stored in /public/img/source/ (originals)
  2. Build step generates optimized variants per format matrix
  3. next/image handles srcset and format negotiation automatically
  4. Or: sharp/squoosh CLI for manual pipeline
  5. CI check: no image over 200KB in production build

Performance Budget

| Metric | Budget | |--------|--------| | Total above-fold images | < 150KB | | Total page images (initial) | < 500KB | | LCP image load time (3G) | < 1.5s | | CLS from images | 0 (explicit dimensions) |


## QA Rubric (scored)

- Format optimization (0-5): modern formats used with appropriate fallbacks.
- Loading strategy (0-5): above-fold eager, below-fold lazy, priorities set correctly.
- CLS prevention (0-5): every image has explicit dimensions or aspect-ratio CSS.
- Alt text quality (0-5): content images have descriptive alt, decorative images have empty alt.

## Examples (good/bad)

- Good: "Hero image: 1920×1080 WebP at 82% quality (68KB), eager loading with fetchpriority='high', srcset at 640/960/1280/1920w, explicit width/height attributes, alt='AI agents coordinating a marketing campaign in LemuriaOS dashboard.'"
- Bad: "Hero image: 4000×3000 PNG (2.4MB), no srcset, no lazy loading, alt='image1.png', no width/height — causes 1.2s CLS."

## Variants

- Zero-JS mode: use native `&lt;img>` with srcset only — no JavaScript image components. Maximum performance for static sites.
- CDN mode: all images served from a CDN with on-the-fly transforms (Cloudinary, imgix) — srcset URLs use transformation parameters instead of pre-built variants.