[FEATURE] Image Optimization & Accessibility Improvements

[Khushi5155]

📖 Description

Optimizing images not only improves page load performance but also enhances SEO and accessibility.
This issue focuses on adding alt text, converting images to WebP where possible, and implementing lazy loading across the Edulume platform.

---

📌 Parent Issue

Part of #68 – SEO Improvements: Structured Data, Missing Pages & Performance

---

🎯 Scope of Work

1. Add alt text to all images

   • Ensure every <img> tag has descriptive alt text
   • For decorative images, use alt=""
   • File locations:

     client/src/assets/
     client/src/components/
     client/src/pages/
     client/public/
     

2. Convert images to WebP

   • Optimize images for faster loading
   • Prefer WebP format where supported while keeping fallback PNG/JPG

3. Implement lazy loading

   • For non-critical images (below the fold), use loading="lazy"
   • Ensure above-the-fold images load normally

4. Accessibility review

   • Ensure images with functional meaning have meaningful alt text
   • Avoid missing alt attributes
   • Check contrast and readability of images with text overlays (OG images, banners)

---

✅ Acceptance Criteria

• Every image has appropriate alt text
• Images are optimized (WebP preferred, smaller file sizes)
• Lazy loading works for below-the-fold images
• No accessibility violations related to images (check with browser DevTools or Lighthouse)
• Page performance scores improve or remain stable

---

🛠️ Implementation Notes

• Use the following tools for optimization:
  • Squoosh for converting images to WebP
  • Tailwind or standard React props for loading="lazy"
• Keep naming consistent with existing assets
• Avoid breaking image references after conversion

---

🧪 Testing Checklist

• Inspect <img> tags for correct alt attributes
• Verify WebP images load correctly and fallback works in unsupported browsers
• Test lazy loading by scrolling the page
• Run Lighthouse performance & accessibility audits
• Check OG and banner images for readability

---

🏷️ Labels

frontend, seo, accessibility, performance, swoc2026, medium

---

🙌 Contribution Notes

• Focus only on image optimization and accessibility
• Do not modify SEO metadata or structured data (handled in separate issues)
• Document any major changes to image paths or naming conventions in the PR

[Anshpujara5]

Hi @tarinagarwal 👋

I’d like to work on [FEATURE] Image Optimization & Accessibility Improvements (#99).

I understand the scope is limited to image optimization and accessibility, and I plan to approach it as follows:

Proposed approach:

Audit all image usage across assets, components, pages, and public to identify missing or incorrect alt attributes.

Add meaningful alt text for informative images and use alt="" for decorative images to meet accessibility best practices.

Convert suitable images to WebP while keeping PNG/JPG fallbacks where required, ensuring no broken references.

Implement loading="lazy" for below-the-fold images and verify that critical images load eagerly.

Run Lighthouse audits to confirm accessibility and performance improvements.

I’ll keep the changes focused strictly on images and document any path or naming changes clearly in the PR.

Please let me know if this works — I’d be happy to take this up 😊

[addz9015]

@tarinagarwal if this issue is not yet resolved I would like to contribute. I am a contributor in SWOC'26