` for everything
+- Skip heading levels (h1 → h3)
+
+---
+
+## Color System
+
+### Primary Palette
+
+```css
+/* DaisyUI Theme Colors */
+--primary: #4F46E5 /* Slate Blue - Main brand color */
+--secondary: #EC4899 /* Pink - Secondary actions */
+--accent: #F59E0B /* Amber - Highlights */
+--neutral: #1F2937 /* Dark gray - Neutral elements */
+```
+
+### Usage Guidelines
+
+#### Primary Color
+**Use for:**
+- Main CTAs (Call-to-Action buttons)
+- Page headings
+- Important links
+- Active states
+
+```tsx
+// Example: Page heading
+
About Gender Cell
+
+// Example: Primary button
+
+```
+
+#### Secondary Color
+**Use for:**
+- Secondary actions
+- Decorative accents
+- Supporting visual elements
+
+```tsx
+// Example: Secondary button
+
+```
+
+#### Accent Color
+**Use for:**
+- Highlights and badges
+- Warning states (caution)
+- Featured content markers
+
+```tsx
+// Example: Badge
+
New
+```
+
+### Background Colors
+
+```css
+/* Background Hierarchy */
+bg-base-100 /* #FFFFFF - Main page background (white) */
+bg-base-200 /* #F3F4F6 - Card/section backgrounds (light gray) */
+bg-base-300 /* #E5E7EB - Borders/dividers (medium gray) */
+```
+
+**Usage:**
+```tsx
+// Main page container
+
+ {/* Cards and sections */}
+
+
+ {/* Card content */}
+
+
+
+```
+
+### Text Colors
+
+```css
+/* Text Color Hierarchy */
+text-base-content /* Primary text (100% opacity) - Headings */
+text-base-content/80 /* Body text (80% opacity) - Main content */
+text-base-content/70 /* Secondary text (70% opacity) - Labels, captions */
+text-base-content/60 /* Meta text (60% opacity) - Timestamps (use sparingly) */
+```
+
+**Accessibility Note:** Always verify text-base-content/60 meets WCAG AA contrast ratio (4.5:1)
+
+**Usage:**
+```tsx
+// Heading
+
Section Title
+
+// Body paragraph
+
+ This is the main content of the paragraph...
+
+
+// Caption
+
Posted on Jan 1, 2025
+```
+
+### Semantic Colors
+
+**ONLY use for feedback and status messages:**
+
+```css
+text-success /* ✅ Success messages, confirmations */
+text-error /* ❌ Error messages, destructive actions */
+text-warning /* ⚠️ Warning messages */
+text-info /* ℹ️ Information messages */
+```
+
+**❌ NEVER use semantic colors for:**
+- Regular headings
+- Decorative purposes
+- Navigation links
+
+**Example - Correct Usage:**
+```tsx
+// ✅ Success message
+
+ Form submitted successfully!
+
+
+// ❌ WRONG: Using success for heading
+
Our Services
{/* DON'T DO THIS */}
+```
+
+---
+
+## Typography
+
+### Font Families
+
+```css
+/* Defined in tailwind.config.js */
+font-heading: 'Poppins', sans-serif /* For headings (h1-h6) */
+font-sans: 'Inter', sans-serif /* For body text */
+```
+
+### Typography Scale
+
+#### Page Titles (H1)
+
+```tsx
+
+ About Us
+
+```
+
+**Properties:**
+- Mobile: `text-4xl` (36px)
+- Desktop: `md:text-5xl` (48px)
+- Weight: `font-bold` (700)
+- Font: `font-heading`
+- Color: `text-primary`
+- Use: Once per page, main page heading
+
+---
+
+#### Section Titles (H2)
+
+```tsx
+
+ Our Mission
+
+```
+
+**Properties:**
+- Mobile: `text-3xl` (30px)
+- Desktop: `md:text-4xl` (36px)
+- Weight: `font-bold` (700)
+- Font: `font-heading`
+- Color: `text-base-content`
+- Use: Major section headings
+
+---
+
+#### Subsection Titles (H3)
+
+```tsx
+
+ Core Values
+
+```
+
+**Properties:**
+- Mobile: `text-2xl` (24px)
+- Desktop: `md:text-3xl` (30px)
+- Weight: `font-semibold` (600)
+- Font: `font-heading`
+- Color: `text-base-content`
+- Use: Subsections within sections
+
+---
+
+#### Card Titles (H4)
+
+```tsx
+
+ Event Name
+
+```
+
+**Properties:**
+- Mobile: `text-xl` (20px)
+- Desktop: `md:text-2xl` (24px)
+- Weight: `font-semibold` (600)
+- Font: `font-heading`
+- Color: `text-base-content`
+- Use: Card headings, list items
+
+---
+
+### Body Text
+
+#### Large Body Text
+
+```tsx
+
+ This is a large paragraph for hero sections and introductions.
+
+```
+
+**Properties:**
+- Size: `text-lg` (18px)
+- Line height: `leading-relaxed` (1.625)
+- Font: `font-sans`
+- Color: `text-base-content/80`
+- Use: Hero descriptions, key paragraphs
+
+---
+
+#### Normal Body Text
+
+```tsx
+
+ This is the standard body text for main content.
+
+```
+
+**Properties:**
+- Size: `text-base` (16px)
+- Line height: `leading-relaxed` (1.625)
+- Font: `font-sans`
+- Color: `text-base-content/80`
+- Use: Main content paragraphs
+
+---
+
+#### Small Body Text
+
+```tsx
+
+ This is smaller text for secondary information.
+
+```
+
+**Properties:**
+- Size: `text-sm` (14px)
+- Line height: `leading-relaxed` (1.625)
+- Font: `font-sans`
+- Color: `text-base-content/70`
+- Use: Captions, labels, secondary info
+
+---
+
+#### Captions & Metadata
+
+```tsx
+
+ Posted on December 22, 2025
+
+```
+
+**Properties:**
+- Size: `text-xs` (12px)
+- Line height: `leading-normal` (1.5)
+- Font: `font-sans`
+- Color: `text-base-content/60`
+- Use: Timestamps, metadata, fine print
+- **Note:** Verify WCAG AA contrast compliance
+
+---
+
+### Typography Best Practices
+
+1. **Always use leading-relaxed for body text** - Improves readability
+2. **Never use font-extrabold** - Use `font-bold` instead for consistency
+3. **Never use font-serif** - Stick to defined font families
+4. **Always pair font size with responsive variant** - e.g., `text-xl md:text-2xl`
+5. **Use font-heading for all h1-h6** - Use `font-sans` for body text
+
+---
+
+## Spacing & Layout
+
+### Page Container Padding
+
+```tsx
+
+ {/* Page content */}
+
+```
+
+**Properties:**
+- Mobile: `px-4` (16px)
+- Tablet: `md:px-6` (24px)
+- Desktop: `lg:px-8` (32px)
+- Center: `mx-auto`
+- Max width: `container` (from Tailwind config)
+
+---
+
+### Section Padding (Vertical)
+
+```tsx
+
+ {/* Section content */}
+
+```
+
+**Properties:**
+- Mobile: `py-16` (64px top/bottom)
+- Desktop: `md:py-20` (80px top/bottom)
+- Use: For all major page sections
+
+---
+
+### Card Padding
+
+#### Standard Cards
+
+```tsx
+
+
+ {/* Card content */}
+
+
+```
+
+**Properties:**
+- Mobile: `p-6` (24px)
+- Desktop: `md:p-8` (32px)
+
+---
+
+#### Large Cards
+
+```tsx
+
+
+ {/* Card content */}
+
+
+```
+
+**Properties:**
+- Mobile: `p-8` (32px)
+- Desktop: `md:p-10` (40px)
+- Use: Hero cards, feature cards
+
+---
+
+### Gap Spacing
+
+```css
+/* Standardized gap values */
+gap-4 /* 16px - Tight spacing */
+gap-6 /* 24px - Standard spacing (recommended default) */
+gap-8 /* 32px - Loose spacing */
+```
+
+**Usage:**
+```tsx
+// Grid layout
+
+ {/* Grid items */}
+
+
+// Flex layout
+
+ {/* Flex items */}
+
+```
+
+**❌ Avoid:** `gap-3`, `gap-5`, `gap-7`, `gap-12` - Use standardized values only
+
+---
+
+### Margins Between Sections
+
+```css
+mb-8 /* 32px - Small spacing */
+mb-12 /* 48px - Standard spacing */
+mb-16 /* 64px - Large spacing */
+```
+
+**Usage:**
+```tsx
+
Section Title
+```
+
+---
+
+## Components
+
+### Buttons
+
+#### Primary Button
+
+```tsx
+
+```
+
+**Use for:** Main CTAs, important actions
+
+---
+
+#### Secondary Button (Outline)
+
+```tsx
+
+```
+
+**Use for:** Secondary actions, alternative choices
+
+---
+
+#### Ghost Button
+
+```tsx
+
+```
+
+**Use for:** Less important actions, navbar items
+
+---
+
+#### Button Sizes
+
+```tsx
+// Small
+
+
+// Default (Medium)
+
+
+// Large
+
+```
+
+---
+
+#### Button with Icon
+
+```tsx
+
+```
+
+---
+
+### Cards
+
+#### Standard Card
+
+```tsx
+
+
+
+ Card Title
+
+
+ Card content goes here...
+
+
+
+
+
+
+```
+
+**Properties:**
+- Background: `bg-base-200`
+- Shadow: `shadow-lg` (base), `hover:shadow-xl` (hover)
+- Transition: `transition-shadow duration-300`
+- Padding: `p-6 md:p-8`
+
+---
+
+#### Card with Hover Lift
+
+```tsx
+
+ {/* Card content */}
+
+```
+
+**Use for:** Interactive cards, clickable items
+
+---
+
+#### Card with Border
+
+```tsx
+
+ {/* Card content */}
+
+```
+
+**Use for:** When extra definition is needed
+
+---
+
+### Sections
+
+#### Standard Section
+
+```tsx
+
+
+
+ Section Title
+
+ {/* Section content */}
+
+
+```
+
+---
+
+#### Alternate Background Section
+
+```tsx
+
+
+ {/* Section content */}
+
+
+```
+
+**Use for:** Alternating sections to create visual rhythm
+
+---
+
+### Forms
+
+#### Input Field
+
+```tsx
+
+
+
+
+
+```
+
+---
+
+#### Textarea
+
+```tsx
+
+
+
+
+```
+
+---
+
+### Navigation
+
+#### Navbar
+
+```tsx
+
+```
+
+**Important:** Use `Link` from `react-router-dom`, not `
`
+
+---
+
+### Accordions
+
+```tsx
+
+
+
+ Question Title
+
+
+
+ {/* Content */}
+
+```
+
+---
+
+#### Hover Lift
+
+```tsx
+
+ {/* Content */}
+
+```
+
+---
+
+#### Hover Scale
+
+```tsx
+
+ {/* Content */}
+
+```
+
+---
+
+### Animation Duration Standards
+
+```css
+duration-200 /* 200ms - Quick interactions (button hover) */
+duration-300 /* 300ms - Standard (default for most transitions) */
+duration-500 /* 500ms - Slow animations (page transitions, reveals) */
+```
+
+**✅ Use `duration-300` as default**
+
+**❌ Avoid custom durations** like `duration-700`, `duration-400`
+
+---
+
+### Easing
+
+```css
+ease-in-out /* Default easing for all transitions */
+```
+
+**Usage:**
+```tsx
+
+ {/* Content */}
+
+```
+
+---
+
+## Accessibility Standards
+
+### WCAG AA Compliance
+
+All components must meet **WCAG 2.1 Level AA** standards minimum.
+
+---
+
+### Color Contrast
+
+**Text Contrast Requirements:**
+- Normal text (< 18px): **4.5:1** minimum
+- Large text (≥ 18px): **3:1** minimum
+- Interactive elements: **3:1** minimum
+
+**Testing:**
+```tsx
+// ⚠️ Verify text-base-content/60 contrast
+
+ This may fail WCAG AA - test with DevTools
+
+
+// ✅ Safer alternative
+
+ This has better contrast
+
+```
+
+**Tools:**
+- Chrome DevTools (Lighthouse)
+- [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)
+
+---
+
+### ARIA Labels
+
+**All interactive elements without visible text need ARIA labels:**
+
+```tsx
+// Icon-only button
+
+
+// Icon link
+
+
+
+```
+
+---
+
+### Focus Indicators
+
+**All interactive elements must have visible focus states:**
+
+```tsx
+// Default DaisyUI buttons already have focus states
+
+
+// Custom interactive element
+
+ Custom Interactive Element
+
+```
+
+---
+
+### Semantic HTML
+
+```tsx
+// ✅ GOOD: Proper heading hierarchy
+
Page Title
+
Section
+
Subsection
+
+// ❌ BAD: Skipping levels
+
Page Title
+
Section
{/* Skipped h2 */}
+```
+
+---
+
+### Keyboard Navigation
+
+**All interactive elements must be keyboard accessible:**
+- Tab: Navigate forward
+- Shift + Tab: Navigate backward
+- Enter/Space: Activate buttons/links
+- Escape: Close modals/dropdowns
+
+**Testing:** Navigate entire site using only keyboard
+
+---
+
+### Alt Text for Images
+
+```tsx
+// Decorative images
+
+
+// Informative images
+
+
+// Functional images (logo links)
+
+
+
+```
+
+---
+
+## Best Practices
+
+### Component Development
+
+1. **Always use existing components first** - Check `src/components/Common/` before creating new ones
+2. **Keep components small and focused** - Single responsibility principle
+3. **Use TypeScript interfaces** - Define prop types explicitly
+4. **Export reusable types** - Share interfaces between components
+
+---
+
+### File Organization
+
+```
+src/
+├── components/
+│ ├── Common/ # Reusable base components
+│ ├── Cards/ # Card variants
+│ ├── Sections/ # Page sections
+│ ├── Navbar/ # Navigation
+│ └── Footer/ # Footer
+├── pages/ # Route pages
+├── types/ # TypeScript types
+└── utils/ # Helper functions
+```
+
+---
+
+### Naming Conventions
+
+```tsx
+// Component files: PascalCase
+HomeCard.tsx
+ContactCard.tsx
+SupportService.tsx
+
+// Component names: Match file name
+export const HomeCard: React.FC
= ({ ... }) => { ... }
+
+// Props interfaces: ComponentNameProps
+interface HomeCardProps {
+ title: string;
+ description: string;
+}
+
+// Utility files: camelCase
+dateFormatter.ts
+apiHelper.ts
+```
+
+---
+
+### CSS Class Ordering
+
+**Recommended order for Tailwind classes:**
+
+1. Layout (display, position)
+2. Flexbox/Grid
+3. Spacing (margin, padding)
+4. Sizing (width, height)
+5. Typography (font, text size, color)
+6. Visual (background, border, shadow)
+7. Interactivity (hover, focus, transition)
+
+**Example:**
+```tsx
+
+ {/* Content */}
+
+```
+
+---
+
+### Performance Optimization
+
+1. **Lazy load images below the fold**
+```tsx
+
+```
+
+2. **Use React.memo for expensive components**
+```tsx
+export const ExpensiveCard = React.memo(({ data }) => {
+ // Component logic
+});
+```
+
+3. **Code split routes**
+```tsx
+const About = lazy(() => import('./pages/About'));
+```
+
+4. **Minimize animation libraries**
+- Prefer CSS transitions for simple effects
+- Use Framer Motion only for complex animations
+
+---
+
+## Code Examples
+
+### Complete Page Template
+
+```tsx
+import { motion } from 'framer-motion';
+
+const ExamplePage: React.FC = () => {
+ return (
+
+ {/* Hero Section */}
+
+
+
+ Page Title
+
+
+
+ Hero description paragraph with large text for better readability.
+
+
+
+ {/* Content Section */}
+
+
+
+ Section Title
+
+
+ {/* Card Grid */}
+
+ {/* Card Example */}
+
+
+
+ Card Title
+
+
+ Card description with standard body text styling.
+
+
+
+
+
+
+
+ {/* Repeat cards... */}
+
+
+
+
+
+ {title}
+
+
+ {description}
+
+ {actionLink && (
+
+ )}
+
+
+ {items.map((item) => (
+
+ ))}
+
+
+{/* 1 column on mobile, 2 on tablet, 4 on desktop */}
+
+ {items.map((item) => (
+
+ ))}
+
+
+{/* Auto-fit with min width */}
+
+ {items.map((item) => (
+
+ ))}
+
+```
+
+---
+
+## Changelog
+
+### Version 1.0 (2025-12-22)
+- Initial design system documentation
+- Established typography scale
+- Defined color system
+- Component standards documented
+- Accessibility guidelines added
+- Code examples provided
+
+---
+
+## Maintenance
+
+This design system is a living document. When making changes:
+
+1. **Update this document first** - Before implementing new patterns
+2. **Get team consensus** - Discuss major changes with team
+3. **Update examples** - Keep code examples current
+4. **Version updates** - Increment version number and update changelog
+5. **Communicate changes** - Notify team of updates
+
+---
+
+## Resources
+
+### External Links
+- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
+- [DaisyUI Components](https://daisyui.com/components/)
+- [Framer Motion Docs](https://www.framer.com/motion/)
+- [WCAG 2.1 Guidelines](https://www.w3.org/WAI/WCAG21/quickref/)
+- [WebAIM Resources](https://webaim.org/resources/)
+
+### Internal Files
+- Implementation Plan: `UI-UX-IMPLEMENTATION-PLAN.md`
+- Tailwind Config: `tailwind.config.js`
+- Base Styles: `src/index.css`
+
+---
+
+**For questions or suggestions, contact the Gender Cell Web Team.**
diff --git a/docs/IMAGE-OPTIMIZATION.md b/docs/IMAGE-OPTIMIZATION.md
new file mode 100644
index 0000000..4f205ea
--- /dev/null
+++ b/docs/IMAGE-OPTIMIZATION.md
@@ -0,0 +1,935 @@
+# Image Optimization Guide
+
+**Project:** Gender Cell IIT Kanpur Website
+**Created:** 2025-12-22
+**Version:** 1.0
+
+---
+
+## Table of Contents
+
+1. [Executive Summary](#executive-summary)
+2. [Current Image Audit](#current-image-audit)
+3. [Optimization Strategies](#optimization-strategies)
+4. [Implementation Guide](#implementation-guide)
+5. [Best Practices](#best-practices)
+6. [Performance Impact](#performance-impact)
+
+---
+
+## Executive Summary
+
+### Current State
+
+The website uses **multiple image formats** across various sections:
+
+- **Team photos:** 10 images (mix of JPG, JPEG, PNG)
+- **Blog images:** 2 PNG files
+- **Icons:** 9 PNG files
+- **Page illustrations:** 15+ images (mix of PNG, JPG)
+- **Logos:** 5 PNG files
+
+### Issues Identified
+
+1. ❌ **Mixed formats** - No consistent image format strategy
+2. ❌ **No lazy loading** - All images load immediately
+3. ❌ **PNG overuse** - PNGs used where JPG/WebP would be smaller
+4. ❌ **No responsive images** - Same image served to all devices
+5. ❌ **No modern formats** - No WebP or AVIF support
+6. ❌ **Potentially unoptimized** - Original image sizes may be too large
+
+### Goals
+
+1. Reduce total image payload by 40-60%
+2. Implement lazy loading for below-fold images
+3. Use modern image formats (WebP, AVIF)
+4. Serve responsive images based on device
+5. Maintain visual quality
+
+### Expected Impact
+
+- **Page Load Time:** 1-3 seconds faster on slow connections
+- **Bandwidth Savings:** 500KB-2MB per page load
+- **Lighthouse Score:** +10-20 points
+- **Mobile Experience:** Significantly improved
+
+---
+
+## Current Image Audit
+
+### Image Inventory
+
+#### Team Photos (`src/assets/team/`)
+
+```
+vaibhav.jpg - Profile photo
+jishnu.jpeg - Profile photo
+urbi.jpg - Profile photo
+priyanka.jpg - Profile photo
+pragati.jpeg - Profile photo
+rasagana.png - Profile photo (⚠️ Should be JPG)
+satyaki.png - Profile photo (⚠️ Should be JPG)
+jyoti.jpeg - Profile photo
+pushpender.jpeg - Profile photo
+devlina.png - Profile photo (⚠️ Should be JPG)
+```
+
+**Issues:**
+- ⚠️ Inconsistent formats (jpg, jpeg, png)
+- ⚠️ PNGs used for photos (should be JPG/WebP)
+- ⚠️ No WebP versions
+- ⚠️ Potentially too large for web display
+
+**Recommendations:**
+- Convert all to WebP with JPG fallback
+- Standardize naming: `.webp` + `.jpg`
+- Optimize to ~100-150KB per image (from potentially 200-500KB)
+
+---
+
+#### Icons (`src/assets/icons/`)
+
+```
+faqs2.png - FAQ icon
+ICC1.png - ICC icon
+ICC2.png - ICC icon
+meet.png - Meeting icon
+Resources1.png - Resources icon
+support1.png - Support icon (illustration)
+support2.png - Support icon
+support3.png - Support icon
+```
+
+**Issues:**
+- ⚠️ All PNG format (good for transparency, but check if needed)
+- ⚠️ May be larger than necessary
+
+**Recommendations:**
+- Keep PNG for icons with transparency
+- Consider SVG for simple icons (infinitely scalable, smaller file size)
+- Compress PNGs with tools like TinyPNG
+- For complex icons without transparency, use WebP
+
+---
+
+#### Page Illustrations (`src/assets/images/`)
+
+```
+home.png - Home page illustration
+icc.png - ICC page illustration
+support_illustration.png - Support page illustration
+movie5.jpg - Event/movie image
+movie6.jpg - Event/movie image
+open1.jpg - Event image
+open2.jpg - Event image
+open3.jpg - Event image
+survey_img/2-8.png - Survey result images
+```
+
+**Issues:**
+- ⚠️ Large illustrations not optimized
+- ⚠️ No lazy loading implemented
+- ⚠️ No responsive images
+
+**Recommendations:**
+- Convert large illustrations to WebP
+- Implement lazy loading
+- Create responsive image sets
+- Compress all images
+
+---
+
+#### Logos (`src/assets/images/`)
+
+```
+logo-gc.png - Gender Cell logo
+logo-iitk-dark.png - IIT Kanpur logo (dark)
+logo-iitk.png - IIT Kanpur logo
+logo_gc_new.png - New Gender Cell logo
+```
+
+**Issues:**
+- ⚠️ Multiple versions of logos (inconsistent usage)
+- ⚠️ May not be optimized
+
+**Recommendations:**
+- **Convert to SVG if possible** (logos are ideal for vector format)
+- If raster required, use WebP with PNG fallback
+- Optimize PNG with lossless compression
+- Consolidate duplicate logos
+
+---
+
+#### Blog Images (`src/assets/blogs/`)
+
+```
+sneha.png - Author photo
+sonal.png - Author photo
+```
+
+**Issues:**
+- ⚠️ PNG used for photos (should be JPG/WebP)
+
+**Recommendations:**
+- Convert to WebP with JPG fallback
+- Optimize file size
+
+---
+
+### Format Recommendations by Use Case
+
+| Use Case | Current Format | Recommended Format | Reason |
+|----------|---------------|-------------------|---------|
+| Team Photos | JPG/PNG | WebP + JPG fallback | 25-35% smaller than JPG |
+| Blog Photos | PNG | WebP + JPG fallback | 25-35% smaller than JPG |
+| Icons (simple) | PNG | SVG | Infinitely scalable, tiny file size |
+| Icons (complex) | PNG | PNG (optimized) or WebP | Transparency + compression |
+| Illustrations | PNG | WebP + PNG fallback | Significant size savings |
+| Event Photos | JPG | WebP + JPG fallback | Better compression |
+| Logos | PNG | SVG preferred, or WebP + PNG | Scalable or optimized |
+
+---
+
+## Optimization Strategies
+
+### Strategy 1: Convert to WebP Format
+
+**What is WebP?**
+- Modern image format developed by Google
+- 25-35% smaller than JPG/PNG with same visual quality
+- Supports transparency (like PNG)
+- Supported by 97%+ of browsers
+
+**Conversion Process:**
+
+1. **Install conversion tool:**
+ ```bash
+ # Using npm
+ npm install -g webp-converter
+
+ # Or use online tools:
+ # - https://squoosh.app/
+ # - https://cloudconvert.com/
+ ```
+
+2. **Convert images:**
+ ```bash
+ # Single image
+ cwebp input.jpg -q 85 -o output.webp
+
+ # Batch convert (all JPG in directory)
+ for file in *.jpg; do
+ cwebp "$file" -q 85 -o "${file%.jpg}.webp"
+ done
+ ```
+
+3. **Quality settings:**
+ - `-q 85`: High quality (recommended for photos)
+ - `-q 90`: Very high quality (for important images)
+ - `-q 75`: Good quality, smaller size
+
+---
+
+### Strategy 2: Implement Lazy Loading
+
+**What is Lazy Loading?**
+- Images load only when they're about to enter the viewport
+- Improves initial page load time
+- Reduces bandwidth for users who don't scroll
+
+**Implementation:**
+
+#### Modern Browser Native Lazy Loading
+
+```tsx
+// Simple implementation
+
+```
+
+**Benefits:**
+- Native browser support (no JavaScript required)
+- Supported by 97%+ of browsers
+- Zero configuration
+
+**Usage Guidelines:**
+- ✅ Use `loading="lazy"` for all images below the fold
+- ✅ Always specify `width` and `height` to prevent layout shift
+- ❌ Don't use for above-the-fold images (hero, logo)
+
+---
+
+#### Advanced Lazy Loading with Intersection Observer
+
+For more control, use React lazy loading library:
+
+```bash
+npm install react-lazy-load-image-component
+```
+
+```tsx
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+import 'react-lazy-load-image-component/src/effects/blur.css';
+
+
+```
+
+---
+
+### Strategy 3: Responsive Images
+
+**Serve different image sizes based on device:**
+
+```tsx
+
+ {/* WebP for modern browsers */}
+
+
+ {/* JPG fallback for older browsers */}
+
+
+ {/* Fallback img */}
+ 
+
+```
+
+---
+
+### Strategy 4: Image Compression
+
+**Lossless Compression Tools:**
+
+1. **TinyPNG / TinyJPG**
+ - Website: https://tinypng.com/
+ - Reduces file size by 50-80% without visible quality loss
+ - Supports batch processing
+
+2. **Squoosh** (by Google)
+ - Website: https://squoosh.app/
+ - Advanced controls for compression
+ - Compare before/after visually
+
+3. **ImageOptim** (Mac)
+ - Desktop app for batch optimization
+ - Removes metadata and optimizes compression
+
+4. **Sharp** (Node.js)
+ ```bash
+ npm install sharp
+ ```
+
+ ```javascript
+ const sharp = require('sharp');
+
+ sharp('input.jpg')
+ .resize(800, 600)
+ .webp({ quality: 85 })
+ .toFile('output.webp');
+ ```
+
+---
+
+### Strategy 5: Use SVG for Logos and Icons
+
+**Benefits:**
+- Infinitely scalable (perfect for any screen size)
+- Tiny file size (often < 5KB)
+- Can be styled with CSS
+- No quality loss
+
+**When to Use SVG:**
+- ✅ Logos
+- ✅ Simple icons
+- ✅ Illustrations with solid colors
+- ❌ Photos (use WebP/JPG instead)
+- ❌ Complex gradients/effects
+
+**Optimization:**
+```bash
+# Install SVGO
+npm install -g svgo
+
+# Optimize SVG
+svgo input.svg -o output.svg
+```
+
+---
+
+## Implementation Guide
+
+### Phase 1: Quick Wins (2-3 hours)
+
+#### Task 1: Add Lazy Loading to Existing Images
+
+1. **Find all images in components:**
+ ```bash
+ grep -r "
+ ```
+
+ **After:**
+ ```tsx
+ 
+ ```
+
+3. **Exclude above-the-fold images:**
+ - Hero section images
+ - Logos in navbar
+ - First visible content
+
+**Impact:** 30-50% faster initial page load
+
+---
+
+#### Task 2: Compress Existing Images
+
+1. **Batch compress with TinyPNG:**
+ - Visit https://tinypng.com/
+ - Upload all team photos
+ - Download optimized versions
+ - Replace originals
+
+2. **Or use CLI tool:**
+ ```bash
+ npm install -g tinypng-cli
+ tinypng src/assets/team/*.{jpg,jpeg,png} --key YOUR_API_KEY
+ ```
+
+**Impact:** 40-60% reduction in image file sizes
+
+---
+
+### Phase 2: Convert to WebP (3-4 hours)
+
+#### Task 1: Generate WebP Versions
+
+```bash
+# Install conversion tool
+npm install --save-dev @squoosh/cli
+
+# Create script in package.json
+"scripts": {
+ "optimize-images": "squoosh-cli --webp auto src/assets/**/*.{jpg,jpeg,png}"
+}
+
+# Run optimization
+npm run optimize-images
+```
+
+---
+
+#### Task 2: Create Image Component with WebP Support
+
+Create `src/components/Common/OptimizedImage.tsx`:
+
+```tsx
+import React from 'react';
+
+interface OptimizedImageProps {
+ src: string;
+ webpSrc?: string;
+ alt: string;
+ width?: number;
+ height?: number;
+ className?: string;
+ loading?: 'lazy' | 'eager';
+}
+
+/**
+ * OptimizedImage Component
+ *
+ * Automatically serves WebP with fallback to original format.
+ * Includes lazy loading and proper dimensions.
+ */
+export const OptimizedImage: React.FC = ({
+ src,
+ webpSrc,
+ alt,
+ width,
+ height,
+ className = '',
+ loading = 'lazy',
+}) => {
+ // Auto-generate WebP path if not provided
+ const webpSource = webpSrc || src.replace(/\.(jpg|jpeg|png)$/i, '.webp');
+
+ return (
+
+ {/* WebP version for modern browsers */}
+
+
+ {/* Original format fallback */}
+ 
+
+ );
+};
+
+export default OptimizedImage;
+```
+
+---
+
+#### Task 3: Update Components to Use OptimizedImage
+
+**Before:**
+```tsx
+
+```
+
+**After:**
+```tsx
+import { OptimizedImage } from '@/components/Common/OptimizedImage';
+
+
+```
+
+---
+
+### Phase 3: Advanced Optimizations (4-6 hours)
+
+#### Task 1: Implement Responsive Images
+
+Generate multiple sizes:
+
+```bash
+# Install Sharp
+npm install --save-dev sharp
+
+# Create optimization script
+node scripts/generate-responsive-images.js
+```
+
+**scripts/generate-responsive-images.js:**
+```javascript
+const sharp = require('sharp');
+const fs = require('fs');
+const path = require('path');
+
+const sizes = [400, 800, 1200];
+const inputDir = './src/assets/team';
+const outputDir = './src/assets/team/responsive';
+
+fs.mkdirSync(outputDir, { recursive: true });
+
+fs.readdirSync(inputDir).forEach(file => {
+ if (file.match(/\.(jpg|jpeg|png)$/)) {
+ sizes.forEach(size => {
+ sharp(path.join(inputDir, file))
+ .resize(size)
+ .webp({ quality: 85 })
+ .toFile(
+ path.join(outputDir, `${path.parse(file).name}-${size}w.webp`)
+ );
+ });
+ }
+});
+```
+
+---
+
+#### Task 2: Convert Logos to SVG
+
+1. **Use online converters:**
+ - https://convertio.co/png-svg/
+ - https://vectorizer.com/
+
+2. **Or hire designer to recreate as vector**
+
+3. **Update imports:**
+ ```tsx
+ // Before
+ import logoGC from '@/assets/images/logo-gc.png';
+
+ // After
+ import logoGC from '@/assets/images/logo-gc.svg';
+ ```
+
+---
+
+#### Task 3: Implement Progressive Image Loading
+
+Create blur-up effect:
+
+```tsx
+import { useState } from 'react';
+
+const ProgressiveImage: React.FC<{ src: string; placeholder: string; alt: string }> = ({
+ src,
+ placeholder,
+ alt
+}) => {
+ const [loaded, setLoaded] = useState(false);
+
+ return (
+
+ {/* Blurred placeholder */}
+
+
+ {/* Full resolution image */}
+
setLoaded(true)}
+ className={`w-full h-full object-cover transition-opacity duration-300 ${
+ loaded ? 'opacity-100' : 'opacity-0'
+ }`}
+ loading="lazy"
+ />
+
+```
+
+---
+
+## Performance Impact
+
+### Before Optimization
+
+**Estimated Current State:**
+- Total image payload: ~3-5MB per page
+- Largest Contentful Paint (LCP): 3-5 seconds
+- Team photos: ~200-500KB each (10 photos = 2-5MB)
+- Icons: ~20-50KB each (9 icons = 180-450KB)
+- Page illustrations: ~200-800KB each
+
+**Performance Score:**
+- Lighthouse: 60-70
+- Mobile: Slow to load on 3G
+
+---
+
+### After Phase 1 (Lazy Loading + Compression)
+
+**Expected Improvements:**
+- Total initial payload: ~1-2MB (60% reduction)
+- LCP: 2-3 seconds (33% faster)
+- Team photos: ~80-150KB each (50% reduction)
+- Icons: ~10-25KB each (50% reduction)
+
+**Performance Score:**
+- Lighthouse: 75-85 (+15 points)
+- Mobile: Acceptable on 3G
+
+---
+
+### After Phase 2 (WebP Conversion)
+
+**Expected Improvements:**
+- Total initial payload: ~600KB-1.2MB (75% reduction)
+- LCP: 1.5-2.5 seconds (50% faster)
+- Team photos: ~40-80KB each (75% reduction)
+- Icons: ~5-15KB each (70% reduction)
+
+**Performance Score:**
+- Lighthouse: 85-92 (+25 points)
+- Mobile: Fast on 3G, instant on 4G
+
+---
+
+### After Phase 3 (Full Optimization)
+
+**Expected Improvements:**
+- Total initial payload: ~400-800KB (85% reduction)
+- LCP: 1-2 seconds (67% faster)
+- Progressive loading improves perceived performance
+- Responsive images save mobile bandwidth
+
+**Performance Score:**
+- Lighthouse: 90-98 (+30 points)
+- Mobile: Excellent performance
+
+---
+
+## Monitoring and Maintenance
+
+### Image Audit Checklist
+
+Run monthly:
+
+- [ ] Check for new unoptimized images
+- [ ] Verify all images have alt text
+- [ ] Confirm lazy loading is working
+- [ ] Test on slow connection (throttle in DevTools)
+- [ ] Check Lighthouse image recommendations
+- [ ] Verify WebP is being served to modern browsers
+
+---
+
+### Performance Testing
+
+```bash
+# Lighthouse CI
+npm install -g @lhci/cli
+
+# Run audit
+lhci autorun --collect.url=http://localhost:5173
+
+# Check image-specific metrics
+# - Largest Contentful Paint (LCP)
+# - Total Blocking Time (TBT)
+# - Cumulative Layout Shift (CLS)
+```
+
+---
+
+### Automation
+
+**Add to CI/CD pipeline:**
+
+```yaml
+# .github/workflows/image-optimization.yml
+name: Image Optimization Check
+
+on: [pull_request]
+
+jobs:
+ check-images:
+ runs-on: ubuntu-latest
+ steps:
+ - uses: actions/checkout@v2
+
+ - name: Check for large images
+ run: |
+ find src/assets -type f \( -name "*.jpg" -o -name "*.png" \) -size +500k
+ if [ $? -eq 0 ]; then
+ echo "❌ Large images found (>500KB). Please optimize."
+ exit 1
+ fi
+
+ - name: Check for missing alt text
+ run: |
+ grep -r "
-
-
-
-
-
-
-
-
-
-
-
-
-
- Gender Cell IITK
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Gender Cell IITK
+
+
+
+
+
+
+
+
+
+