{
  "instruction": "Images optimized with lazy loading and explicit dimensions",
  "relevant_when": "Agent builds pages or components that display images",
  "context": "Every image element must include performance attributes: loading=\"lazy\" for below-the-fold images, explicit width and height attributes to prevent layout shift, and alt text. The primary above-the-fold image (LCP candidate) should NOT be lazy-loaded.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/web-performance/SKILL.md",
      "tile": "tessl-labs/web-performance"
    }
  ],
  "checklist": [
    {
      "name": "images-lazy-loaded",
      "rule": "Images that appear below the fold (product listings, gallery items, content images) include loading=\"lazy\". Bare <img src=\"...\"> without loading=\"lazy\" for non-hero images is a failure.",
      "relevant_when": "Agent renders images in lists, grids, or content areas"
    },
    {
      "name": "images-have-dimensions",
      "rule": "Image elements include explicit width and height attributes (or CSS aspect-ratio) to prevent Cumulative Layout Shift. Images without any dimension hints are a failure.",
      "relevant_when": "Agent renders image elements"
    }
  ]
}