Add explicit dimensions to lazy-loaded card thumbnails to prevent layout shifts

Description

On the Resources page, Chrome DevTools flags 12 performance and Core Web Vitals warnings:

• Lazy-loaded images should have explicit dimensions (one for each of the 12 resource cards on the page).
  In src/components/Card/index.js, the card thumbnail uses <Image loading="lazy" ... /> without explicit HTML width and height attributes or an intrinsic aspect ratio. Because these images are lazy-loaded, the browser cannot reserve layout space before downloading, resulting in Cumulative Layout Shift (CLS).

Expected Behavior

Thumbnail containers or <img> elements should have explicit dimensions or CSS aspect-ratio defined so the browser reserves layout space before lazy-loaded images load.

Screenshots

flowchart TD
    subgraph Current ["❌ Current: Missing Dimensions"]
        direction TB
        A1["Page Renders"] --> B1["&lt;img loading='lazy' /&gt;<br/>No width or height specified"]
        B1 --> C1["Initial container height unreserved / 0px"]
        C1 --> D1["Image downloads & renders later"]
        D1 --> E1["💥 Content shifts dynamically (Cumulative Layout Shift)"]
    end
    subgraph Proposed ["✅ Proposed: Explicit Dimensions / Aspect Ratio"]
        direction TB
        A2["Page Renders"] --> B2["&lt;img /&gt; with explicit width/height or CSS aspect-ratio"]
        B2 --> C2["Browser pre-allocates layout slot immediately"]
        C2 --> D2["Image downloads lazily in background"]
        D2 --> E2["🎉 Smooth render with 0 layout shift (CLS &lt; 0.1)"]
    end

Environment:

• Host OS:macOS
• Browser:Chrome

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.