[Feature] Enable WebP image optimization and CI caching #179

Current Behavior

Currently, Markdown images (PNG and JPEG) on this academy site are served in their original unoptimized formats without WebP compression, leading to higher asset weight and slower page loads.

Desired Behavior

Enable dynamic build-time WebP conversion for all Markdown images by consuming the upstream WebP pipeline from academy-theme (layer5io/academy-theme#250), reducing image payloads by up to ~79% with zero visual quality loss.

Implementation

1. Update Upstream Theme:
   Ensure the academy-theme module is updated to the version containing the WebP render hook (academy-theme#250).
2. Mount Content into Assets (hugo.yaml):
   Add the content mount so Hugo's asset pipeline can process content images:

   module:
     mounts:
       - source: content
         target: assets/contentimg

3. Cache Build Artifacts: Add caching for resources/_gen in the GitHub Actions workflow (.github/workflows/) to keep warm CI build times fast.

Acceptance Tests

• Markdown PNG and JPEG images render as responsive <picture> tags with <source type="image/webp"> and original fallback <img>.

• Visual regression check: Text, diagrams, and UI screenshots remain crisp without visible artifacts.

• GitHub Actions CI build passes and successfully caches resources/_gen.

Mockups

Contributor Guide and Resources

• 📚 Instructions for contributing to academy-example
  • academy-template documentation site, example and theme
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Layer5 Discussion Forum and Layer5 Community Slack