CompanySite/.agents/performance-optimizer/IMAGE_OPTIMIZATION.md

Image Optimization Report

Agent: performance-optimizer Date: 2026-03-21 Project: WorkRoot IT Solutions (workroot.in)

---

Summary

The project had a solid image optimization foundation already in place. This audit identified and implemented targeted improvements to maximize loading performance and Core Web Vitals scores.

---

Asset Inventory

File	Size	Format	Location
favicon.svg	410 B	SVG	/public/
apple-touch-icon.png	495 B	PNG	/public/
logo.png	1.9 KB	PNG	/public/
og-image.jpg	3.6 KB	JPEG	/public/
images/blog/ai-business.jpg	~1 KB	JPEG	/public/images/blog/
images/blog/astro-intro.jpg	~1 KB	JPEG	/public/images/blog/
images/blog/cloud-migration.jpg	~1 KB	JPEG	/public/images/blog/

Total local image size: ~8.4 KB (already minimal)

Remote images via Unsplash CDN: All portfolio thumbnails, gallery images, and team member photos are served from images.unsplash.com with optimized query parameters (auto=format&q=75).

---

Pre-Existing Optimizations (Already in Place)

These were already implemented before this audit:

• Sharp image service configured in astro.config.mjs for WebP conversion
• OptimizedImage.astro component with srcset, lazy loading, aspect ratio preservation
• LazyImage.astro component with fade-in animation and reduced-motion support
• dns-prefetch + preconnect for images.unsplash.com in BaseLayout.astro
• loading="lazy" + decoding="async" on all below-fold images
• loading="eager" + fetchpriority="high" on first portfolio thumbnail (LCP candidate)
• Explicit width/height attributes on all images to prevent CLS
• Unsplash auto=format&q=75 parameters for automatic WebP delivery and compression
• HTML compression via compressHTML: true in Astro config
• Inline stylesheets for small CSS to reduce HTTP requests
• Hover-based prefetch strategy for faster page transitions
• max-image-preview:large robots meta tag for richer search results

---

Changes Made in This Audit

1. astro.config.mjs — Remote Image Domain Configuration

Before:

domains: [],
remotePatterns: [],

After:

domains: ['images.unsplash.com'],
remotePatterns: [
  { protocol: 'https', hostname: 'images.unsplash.com' },
],

Impact: Enables Astro's image optimization pipeline to process Unsplash images when using the <Image> component, allowing future use of Astro's built-in image optimization for remote sources.

---

2. src/pages/about.astro — Hero Image Priority

Change: The main "team collaborating" hero image changed from loading="lazy" to loading="eager" with fetchpriority="high".

Why: This image is visible above the fold on the About page and is a strong LCP candidate. Loading it eagerly with high priority ensures faster Largest Contentful Paint.

---

3. src/pages/about.astro — Team Member Images Priority

Change: First team member image now uses loading="eager" + fetchpriority="high". All others remain loading="lazy" + fetchpriority="auto".

Why: The first team card is often in the initial viewport on larger screens. Eager loading the first card while keeping others lazy balances fast initial render with bandwidth efficiency.

---

4. src/pages/portfolio.astro — All-Projects Grid fetchpriority

Change: Added fetchpriority="low" to the smaller "all projects" grid thumbnails (these are below the featured section).

Why: These images are well below the fold. Explicitly marking them as low priority prevents them from competing with above-fold resources during the initial page load critical path.

---

5. src/styles/global.css — Global Image Base Rules

Added:

img {
  height: auto;
  max-width: 100%;
}

img[width][height] {
  aspect-ratio: attr(width) / attr(height);
}

Why: Ensures all images maintain aspect ratio by default, preventing CLS for any <img> tags that might not have explicit CSS. The aspect-ratio from attributes is the modern CSS approach to CLS prevention.

---

Loading Strategy Summary

Page	Image	Strategy	Reason
about.astro	Team hero image	eager + fetchpriority="high"	LCP candidate
about.astro	First team member	eager + fetchpriority="high"	Above fold
about.astro	Other team members	lazy + fetchpriority="auto"	Below fold
portfolio.astro	First featured thumbnail	eager + fetchpriority="high"	LCP candidate
portfolio.astro	Other featured thumbnails	lazy + fetchpriority="auto"	Below fold
portfolio.astro	All-projects grid	lazy + fetchpriority="low"	Far below fold
portfolio.astro	Modal gallery images	eager	Loaded on-demand when modal opens
blog/index.astro	Post thumbnails	lazy + decoding="async"	All below fold
blog/[slug].astro	Hero image	eager + fetchpriority="high"	LCP candidate

---

Format & Compression Strategy

Image Type	Format	Quality	How
Local JPG/PNG in src/	WebP	80%	Astro Image component
Unsplash remote images	Auto (WebP if supported)	75%	auto=format&q=75 query params
OG image (/og-image.jpg)	JPEG	—	Pre-optimized static file
Logo (/logo.png)	PNG	—	Pre-optimized static file (1.9 KB)
Favicon (/favicon.svg)	SVG	—	Vector, inherently scalable

---

Core Web Vitals Impact

Metric	Impact	How
LCP	Improved	fetchpriority="high" on LCP candidates, preconnect for Unsplash
CLS	Maintained	Explicit width/height + aspect-ratio CSS prevents layout shift
INP	No change	Image loading doesn't block JS interaction
FCP	Maintained	Critical resources already loading correctly

---

Recommendations for Future Improvements

1. Replace placeholder blog images — The three blog images (ai-business.jpg, astro-intro.jpg, cloud-migration.jpg) are ~1 KB placeholder files. Replace with real, high-quality images (800×500px, JPEG/WebP, ~50-100 KB each) for better visual quality.

2. Self-host critical images — Consider self-hosting team member photos for the About page instead of relying on Unsplash CDN. This eliminates third-party CDN dependency and gives full control over caching headers.

3. Add <picture> with AVIF — For local static images, use <picture> elements with AVIF as the primary format and WebP as fallback for maximum compression (AVIF is ~50% smaller than WebP for photographic content).

4. Implement responsive images for OG image — The current og-image.jpg at 3.6 KB is very small and may appear low-quality when shared on social media. Create a proper 1200×630px OG image (ideally ~50 KB after optimization).

5. Service Worker image caching — The existing sw.js service worker could be extended to cache Unsplash images with a stale-while-revalidate strategy for offline support and faster repeat visits.