marketing

lazysizes

Name: lazysizes
Author: aFarkas

High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

17,710 stars1,688 forksJavaScriptUpdated 4/3/2024100% free · open source

What it does

Automatically loads images, iframes and background pictures only when they scroll into view, boosting page speed and SEO without extra configuration.

When to use it

•Your landing page has many hero or product images and you want faster first‑paint times.
•You serve responsive images (srcset, picture) and need lazy‑loading to work out‑of‑the‑box.
•You want a zero‑config solution that also works for iframes or CSS background images.

Ready-to-paste prompt

<!-- Example: lazy‑loading a responsive picture element -->
<picture class="lazyload" data-iesrcset="/images/fallback.jpg">
  <source data-srcset="/images/hero-800.webp 800w, /images/hero-1600.webp 1600w" type="image/webp" data-sizes="auto">
  <source data-srcset="/images/hero-800.jpg 800w, /images/hero-1600.jpg 1600w" data-sizes="auto">
  <img class="lazyload" data-src="/images/hero-800.jpg" alt="Product" width="1600" height="900">
</picture>

Heads up: lazysizes relies on the `src`/`srcset` attributes being empty until the element scrolls into view; if you forget to set `width` / `height` on images, the page will suffer CLS (content‑layout‑shift) even though loading is lazy.

Saves to your device

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/lazysizes && curl -fsSL https://workflowstacks.com/api/skills/lazysizes/claude-skill -o ~/.claude/skills/lazysizes/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

How lazysizes works

Codeflow

Free to inspect

Lazysizes is a medium JavaScript project (~7k lines across 59 code files, plus 4 test files). Setup is light: installs like a normal app. Reading the code is optional. Last commit 29 months ago, MIT license, has a test suite.

Size

Medium codebase

~7k lines · 59 code files · 59 min skim

Setup

One-command install

Installs like a normal app. Reading the code is optional.

Runs on

Node.js

No API keys detected

JavaScript 60%HTML 36%CSS 5%

Where to start reading

1
README.md
Start here — what it does and how to install it
2
package.json
Dependencies and the commands it exposes
3
src/lazysizes-core.js
Inside src/ — the main logic begins here

What's in each folder

src/Core code — the actual logic4 files

plugins/Sub-packages / plugins67 files

optimumx/Folder3 files

types/Data models & types2 files

rias/Folder1 files

assets/Images & static assets9 files

tests/Tests — proof it works6 files

.github/CI / automation (GitHub Actions)4 files

READMEHas testsDocumentedNo CIMIT licenseLast update 29 mo ago

Use with Claude

New

Skip the builder — one click puts this in Claude, Cursor, Antigravity and more.

✅ Light setup

Installs with a command or two; your AI agent can do it for you.

Try it instantly — no install

Claude Code

mkdir -p ~/.claude/skills/lazysizes && curl -fsSL https://workflowstacks.com/api/skills/lazysizes/claude-skill -o ~/.claude/skills/lazysizes/SKILL.md

Open in another AI app

Opens the app with this repo with the prompt ready to go — no copy-paste needed.

Connect the whole catalog (MCP)

claude mcp add --transport http workflowstacks https://workflowstacks.com/api/mcp

Adds a WorkflowStacks connector to Claude Code: search and load any skill here by chatting.

Quick Actions

Details

Creator

aFarkas

Language

JavaScript

Do this with a working workflow

Pages we wrote and tested that put a skill like this to work — importable n8n templates, outcome guides and Claude Desktop configs.

Outcome guide

Automated marketing performance reports

The workflow reads your performance metrics and writes the narrative for you — this week at a glance, what moved and why, what’s next — then sends it on schedule.

Ready-to-run pack · one-time $29