Enable image optimization and basic caching to improve page load speed.

[zleypner]

📑 Issue Summary

Enable image optimization and basic caching to improve page load speed.

🏷️ Type of Issue

• Bug
• Feature Request
• Performance
• Documentation
• Security
• Other (please specify)

🔎 Current Behavior

• Images are not optimized for web (large file sizes).
• No caching headers set for static assets.

✅ Expected Behavior

• Compressed images for faster loading.
• Browser caching enabled for static assets (images, fonts, CSS, JS).

📝 Files to Edit

• vite.config.js – Add an image optimization plugin.
• public/ – Replace heavy images with optimized versions.
• index.html – Add basic caching meta tags if needed.

🧭 Steps / Acceptance Criteria

• Install and configure an image optimization plugin for Vite.
• Convert large .png/.jpg assets to .webp or .avif where possible.
• Ensure long-lived cache headers for static assets are applied.
• Verify Lighthouse performance score improves for “Performance” and “Best Practices”.

📒 Notes

• 🖼️ Prefer .webp/.avif for hero and gallery images.
• ⚖️ Keep acceptable visual quality; prioritize meaningful size reductions.
• 🧹 Remove any unused large images from the repo.

Make sure to access the Contributor Guideline before proceeding.

Before you make a draft PR, please check the GIT Guideline to ensure your changes align with the project's standards.

Conventions

• Use kebab-case for file and folder names.
• Use @/ aliases for imports (avoid relative paths).
• Review the organization of the pages to ensure everything is correct.

[Marvelousmicheal]

Can I work on this

[davedumto]

Hi, my name is David, and I am a frontend developer skilled in React, Next.js, TypeScript, and Tailwind CSS. For this task, I will:

• Integrate an image optimization plugin (e.g., vite-imagetools or vite-plugin-image-optimizer) in vite.config.js to automatically compress and convert images to efficient formats (.webp/.avif).
• Replace large .png and .jpg assets in public/ with optimized variants while preserving quality and ensuring proper references in the codebase.
• Add caching headers for static assets (images, fonts, CSS, JS) via Vite’s server configuration or meta tags in index.html to improve browser caching behavior.
• Run Lighthouse audits before and after optimization to confirm measurable improvements in “Performance” and “Best Practices” scores.
• Clean up unused or duplicate image assets from the repository to reduce bundle size.
• Ensure consistent naming conventions (kebab-case) and path usage with @/ aliases according to the Contributor and Git Guidelines.

ETA: 1 day

~ [OnlyDust](https://onlydust.com/) Stellar Fellow

Recommended by OnlyDust for high-quality and dependable contributions.