Design system · 44 patterns · classless

Every section,
one page.

All reusable patterns from the design/ library, rendered through the website's <e-*> elements. No class or style attributes in the source — structure via elements, styling in public/css/site.css.

11 groups · 44 demos · 18 elements · variant-driven
18 elements44 demosclassless authoringworker expansion
Navigate

Jump to a group.

Each group showcases four variants from one design/*.html file. Grids are mapped to discrete elements e-grid-feature, e-grid-proof, e-grid-bento, e-grid-dense that reuse the shared e-cards/e-stats/e-bento templates and mappers — single-source styling, distinct tags.

<a href="#grids">Grids</a> — grids.html · 01 feature, 02 proof, 03 bento, 04 dense
<a href="#features">Features</a> — features.html · 01 icon+copy, 02 rows, 03 bento, 04 compact rules
<a href="#ctas">Call-to-actions</a> — call-to-actions.html · 01 band, 02 split, 03 inline, 04 card grid
<a href="#splits">Splits</a> — splits.html · 01 editor, 02 content+card, 03 alternating, 04 narrow+wide
<a href="#faqs">FAQs</a> — faqs.html · 01 accordion, 02 cards, 03 list, 04 compact
<a href="#process">Process</a> — process.html · 01 horizontal, 02 timeline, 03 numbered, 04 icon steps
<a href="#tables">Tables</a> — table.html · 01 savings, 02 matrix, 03 changelog, 04 pricing
<a href="#logos">Logos</a> — logos.html · 01 bar, 02 grid, 03 pills, 04 cluster
<a href="#stats">Stats</a> — stats.html · 01 rules, 02 strip, 03 bento, 04 row
<a href="#points">Points</a> — points.html · 01 checks, 02 cols, 03 numbered, 04 dots
<a href="#content">Content</a> — content.html · 01 editorial, 02 docs, 03 explainer, 04 knowledge base
Library · Grids — grids.html

Grids.

Four reusable grid patterns — from proof metrics to dense capability tiles. Each demo now has a discrete element: e-grid-feature (cards icons), e-grid-proof (stats row), e-grid-bento (bento), e-grid-dense (cards dense) — thin wrappers over the shared templates.

01 Feature grid · 3-col with icon e-grid-feature · cards · 12px · warm

Icon, title and body. Warm-neutral card, 12px radius, whisper border — the default feature grid from landing.html #offline.

Offline by design

No uploads, no cloud queue. Your files never leave the disk.

Batch in seconds

Select a folder and compress dozens at once — no per-file upload.

Quality you control

Quality 85 by default. Tweak engine, format and size caps.

02 Proof grid · 4-col stats e-grid-proof · mono · tabular-nums

Mono label, tabular-nums value, muted note — the proof row from grids.html grid-02.

18.4 MB
Folder size

Across 12 images

−27%
Avg saved

Peak −41%

1,000
Images in 5 min

On a mid-range PC

4
Formats

JPG · PNG · WebP · AVIF

03 Bento · mixed spans e-grid-bento · 2×2 · 12px · layered

Featured dark cell plus two small tiles and three bottom tiles. Uses e-grid-bento + e-cell with span and dark — mirrors grids.html grid-03 and landing.html #principles.

Featured

Compress without compromise.

Quality slider 40–95 with balanced, fast and maximum engines. Keep format or transcode to WebP / AVIF.

Quality 85 · Balanced · Keep original
Before → After

3.4 MB → 2.5 MB

−27% · −904 KB — measured on a mid-range Windows PC.

Savings −27%

JPG — mozjpeg

Photographs and exports. Balanced by default.

PNG — oxipng

Screenshots and transparency. Lossless toggle.

WebP · AVIF — modern

Smaller web delivery. Convert in the same pass.

04 Dense capabilities · 6 compact e-grid-dense · 12px · mono meta

Six small mono-meta cards — the dense grid from grids.html grid-04. Rendered as compact e-card tiles.

Select

Pick files or a whole folder

Strip

Remove EXIF / ICC if you want

Resize

Max W × H, downscale only

Rename

{prefix}-{NNNN}.{ext}

Backup

Originals to /backup

Skip

Filter by type — skip what you don't need

Library · Features — features.html

Features.

Four feature compositions — from icon grids to bento and compact rules. All reuse e-cards and e-bento variants.

01 Icon + copy · 3-col warm alt e-cards variant="icons" cols="3" · warm alt · 12px

Warm-section variant of the feature grid — same element, different surrounding e-section warm.

Built for the formats you actually use.

JPEG, PNG, WebP, AVIF and more — with control over how aggressively each is compressed.

Lossless where it matters

Toggle lossless for PNG / WebP when bit-exact is required.

Offline. Always.

No account, no cloud, no upload step.

02 Feature rows · icon left, copy right e-cards variant="rows" · list · hairline dividers

Icon left, copy right, hairline dividers — the rules list from features.html feat-02.

Fast by design

No upload or download step between you and your files. Your computer does the work.

Private by default

Images never leave your computer. Local processing, no cloud required.

Folder or single file

Work through a whole folder or cherry-pick images — checkboxes for what you compress.

03 Bento · dark feature + two small e-bento cols="2" · layered

Dark featured cell with light companions — the bento from features.html feat-03.

Local · Offline

Your images never leave your computer.

No uploads. No cloud processing. No accounts. Local only.

No cloud · No account
Smaller. Same workflow.

Select → Compress → Done.

Like any Windows utility. Example

hero.jpg 3.4 MB → 2.5 MB−27%
04 Compact · 4-up with top rule e-cards variant="rules" cols="4" · mono eyebrow

Mono eyebrow, top rule, compact type — the 4-up grid from features.html feat-04.

Select

Pick files or a folder. Filter by type, sort by size or date.

Quality

Quality, engine, format, resize caps — all in one panel.

Batch

Batch with concurrency. Backups to /backup when overwriting.

Stay local

No upload, no dashboard, no subscription.

Library · CTAs — call-to-actions.html

Call-to-actions.

Four CTA patterns — centered band, split card, minimal row and two-up. Each maps to one e-cta variant.

01 Centered band e-cta variant="band" · warm · pill meta

Centered pill, headline, sub and meta — the band from call-to-actions.html cta-01. Rendered inline here; in production it is a standalone band section.

Free · Offline · No account

Compress images locally.
Keep your files private.

A small Windows utility for making images smaller — without uploading them anywhere.

Offline · Windows · No account required
02 Split CTA · copy + card e-cta variant="split" · card · 12px

Copy left, actions card right — the split from cta-02.

Get started

Ready to shrink
your next folder?

Select a folder, pick your quality, and compress — all on-device.

Download for Windows — v1.4.0

18.2 MB · Portable .zip also available · View changelog

03 Minimal inline · text + button e-cta variant="inline" · border row

Text plus button on a bordered surface — the inline row from cta-03.

A small tool that stays out of your way.
No dashboard. No subscription. No unnecessary settings.
04 Card grid · two CTAs 2-col e-cta variant="cards" · 2-col · ghost + primary

Two-up cards, ghost + primary — the grid from cta-04. Inner cards are e-card + e-button.

Download the installer

Setup-1.4.0.exe · Signed · 18.2 MB

Try the portable build

Portable-1.4.0.zip · No install · 16.8 MB

Library · Splits — splits.html

Splits.

Four split patterns — editor, content+card, alternating and narrow/wide. All reuse e-split with slot="list|card|media|copy".

01 Editor split · copy left, preview right e-split variant="narrow" · card preview

Workflow copy with mono steps and a preview card — the editor split from splits.html split-01.

Preview — Source files

Folder with type, size and dimensions. Checkboxes for what you compress.

hero-portfolio.jpg 3.4 MB → 2.5 MB−27%
team-photo-2024.jpg 5.1 MB → 3.6 MB−29%

Quality 85 · Balanced · Keep format · 4 threads

Smaller images. Same workflow.

Designed to feel like a normal Windows utility — not another upload site.

Select Pick files or a whole folder
Compress Quality, engine, output format
Done Backups to /backup · Export CSV
02 Content + card · principle + example e-split variant="narrow" · warm

Principle prose with a supporting card — the content+card from splits.html split-02.

Ready when you are.

Install once. Use offline. Resize, rename and strip metadata in the same pass.

brand-sheet.png 1.9 MB → 1.3 MB−31%
Download Compressy

Free for Windows.

Private by default.

Your images are yours. Compressy doesn't need an internet connection — and your files don't need to pass through someone else's server.

Offline · Windows

No upload or download step between you and your files. Your computer does the work.

03 Alternating · image left / text right e-split variant="narrow" · 48/52

Media left (grid preview) and text right — the alternating split from splits.html split-03.

Preview — Source files

Grid of 4 images · 2.4 MB · 2400×1600 each — image-01.jpg through image-04.jpg

Sort & filter

By type, size, date or name. Search by filename. 48/52 split — preview left, text right.

Browse without uploading.

Folder panel shows size, type, dimensions with checkboxes for what you compress. Preview original and result side by side.

Filter by type, sort by size
Search by name
2 / 4 / 8 threads — header stats stay live
04 Narrow + wide · neg list + stay card e-split variant="narrow" · 1.1 / .9

Negative list plus stay card — the narrow+wide from splits.html split-04 and landing.html #download.

  • No account. — open and compress.
  • No dashboard. — one window, two panes.
  • No subscription. — free for Windows.
  • No unnecessary settings. — quality, engine, output, done.

Ready when you are.

Install once. Use offline. Resize, rename and strip metadata in the same pass — then export a CSV of what you saved.

hero-portfolio.jpg 3.4 MB → 2.5 MB−27%
Download Compressy

Free for Windows.

Library · FAQs — faqs.html

FAQs.

Four FAQ patterns — accordion, two-column cards, numbered dividers and compact rules. All use e-faq and emit FAQPage JSON-LD.

01 Accordion · single column details e-faq variant="accordion" · details · warm cards
+Does Compressy upload my images?

No. Everything runs locally on your PC. Files stay in your folder — no upload, no queue, no progress bar tied to the internet.

+Which formats are supported?

JPEG via mozjpeg, PNG via oxipng, WebP and AVIF. Keep original or transcode in the same batch. Resize and rename in the same pass.

+Can I overwrite originals safely?

Yes. When “Overwrite” is on, originals go to a backup/ folder next to your images before anything is replaced.

+How fast is it?

About 1,000 images in 5 minutes on a mid-range Windows PC at Quality 85 · Balanced. Concurrency 2 / 4 / 8.

02 Two-column · Q&A cards 2-col e-faq variant="cards" · 2-col · 12px
Do I need an account?

No. Open the app and select a folder. That is the whole setup. No sign-up, no dashboard, no subscription.

What does Quality 85 mean?

You control it. Quality 85 by default — slide down for size, up for fidelity. Balanced, fast and maximum engines.

How does batch work?

Batch with concurrency. The progress bar and header stats stay live while your PC compresses.

Where do backups go?

Originals go to a backup/ folder next to each file when overwriting. Export a CSV of savings.

03 List · numbered with dividers e-faq variant="list" · hairline
How do I verify a download?

Each release lists a SHA-256. Run certutil -hashfile Compressy-setup.exe SHA256 in PowerShell and compare.

Does it need internet?

No. Compressy compresses without internet after install. Your images never leave your computer.

Can I keep PNG lossless?

Yes — toggle lossless for PNG / WebP. Keeps the file bit-exact while still stripping metadata.

Which Windows versions?

Windows 10 1809 or later, 64-bit. No WebView2, no runtime to install. Signed installer.

04 Compact · inline Q / muted A e-faq variant="compact" · mono eyebrows
No cloud?

No uploads. No cloud queue. Files stay on disk.

No account?

No sign-up, no dashboard. Open and select a folder.

No waiting?

No upload or download step. Your PC does the work — large folders don't stall behind a server queue.

Library · Process — process.html

Process.

Four process patterns — horizontal steps, vertical timeline, numbered rules and icon cards. All share e-steps with howto="…" opt-in for HowTo JSON-LD.

01 Horizontal · Select → Compress → Done e-steps variant="horizontal" · 3-step · pills
01 01
Select

Choose a folder or select images. The file list shows size, type and dimensions — with checkboxes for exactly what you want to compress.

02 02
Compress

Set quality, engine and output format. Run it locally — 2, 4 or 8 threads — and watch per-file savings appear on the right.

03 03
Done.

Export a CSV, open the folder, or overwrite in place with backups to a backup folder. No upload step in between.

Select → Compress → Done. Like any Windows utility.
02 Vertical timeline · line + nodes e-steps variant="timeline" · mono steps
01 01
Drop a folder in.

The file list appears with type, size and dimensions. Folder · Filter · Sort

02 02
Set quality and engine.

Quality 40–95, balanced / fast / maximum, keep format or transcode to WebP / AVIF, max W×H and rename pattern — one panel. Quality 85 · Balanced

03 03
Batch locally with concurrency.

Progress and header stats stay live. Originals go to /backup when overwriting. Export a CSV of what you saved. 1,000 in 5 min

04 04
Keep total savings.

Header shows folder size, total saved and avg. Backups to /backup, open folder when done.

03 Numbered cards · 4-up top rule e-steps variant="numbered" · top rule · warm
01
Select

Pick files or a whole folder.

02
Tune

Quality, engine, format, caps.

03
Batch

Batch locally, backups safe.

04
Export

CSV, open folder, done.

04 Icon steps · copy + meta 3-col e-steps variant="icons" · 3-col · 12px
01 01
Source

Select a folder. Browse or rescan. The list fills with type-tinted previews.

Folder · Browse · Rescan
02 02
Settings

Quality 85, balanced engine, keep-original. Resize off, backups to folder.

Quality 85 · Balanced · Keep original
03 03
Output

Compressed files mark inline — size delta, bar and saved %. Avg −27%.

−27% avg · 1,000 in 5 min
Library · Tables — table.html

Tables.

Four table patterns — savings, capability matrix, changelog and pricing. Authored as a real <table> inside e-table; variant handles mono, alignment and divisors.

01 File savings · mono table e-table variant="savings" · before → after
FileBeforeAfterSaved
hero-portfolio.jpg3.4 MB2.5 MB−27% · −904 KB
gallery-02.png2.1 MB1.4 MB−33% · −693 KB
team-photo.webp1.8 MB1.2 MB−31% · −612 KB
banner.avif4.2 MB2.9 MB−30% · −1.3 MB
02 Capability matrix · check / dash e-table variant="matrix" · warm · 12px
CapabilityCompressyOnline tool
Works offline
No upload required
Batch a whole folder
Keeps backups to /backup
No account
03 Changelog · version table mono e-table variant="changelog" · mono · pills
VersionDateHighlightsDownload
v1.4.0Latest · 2 Dec 2024Auto-rename, Max W×HSetup · Zip
v1.3.218 Nov 2024Settings polishSetup · Zip
v1.0.014 Sep 2024Initial releaseSetup · Zip
04 Pricing · simple tiers e-table variant="pricing" · one accent · warm
TierPriceIncludes
Free₹0For everyone · No account · Offline · Windows 10+
Portable₹0No install · Zip · USB-friendly · Same engine
SourceBuild it · Same tokens, same app — compressy.html
Library · Logos — logos.html

Logos.

Four logo patterns — trust bar, card grid, integration strip and centered cluster. Muted, warm, whisper borders — logos stay secondary.

01 Trust bar · inline e-logos variant="bar" · mono eyebrow
Windows Explorer NTFS mozjpeg oxipng WebP
Built for Windows · Works where your files live
02 Logo grid · 3×2 cards e-logos variant="grid" · 12px · warm
JPG — mozjpeg PNG — oxipng WebP — modern AVIF — next-gen Windows 10+ Offline
03 Integration strip · pill row e-logos variant="pills" · mono · 9999
JPG PNG WebP AVIF Folder Backup
04 Centered cluster · 4 logos + caption e-logos variant="cluster" · warm · centered
Local Offline Signed Free
Private by default. No cloud required.
Library · Stats — stats.html

Stats.

Four stat patterns — hero rules, proof strip, bento and metric row. Tabular-nums, mono labels, whisper borders.

01 Hero stats · 3-up with rule e-stats variant="rules" · display · tabular-nums
−27%
Avg saved

Peak −41% on large photos

1,000
Images in 5 min

On a mid-range Windows PC

0
Uploads

Files never leave your computer

02 Proof strip · inline mono warm e-stats variant="strip" · warm · dot separators

Inline pill with dot separators — the warm proof strip from stats.html stats-02 and e-hero proof.

18.4 MB folder−4.2 MB saved12 images1,000 images in 5 min
03 Bento stats · dark + two small e-stats variant="bento" · layered
1,000
Images in 5 min

Throughput · mid-range Windows PC · Quality 85

−27%
Avg saved

Peak −31% measured

18.4 MB
Folder size

Across 12 images

04 Metric row · bordered e-stats variant="row" · tabular-nums
18.4 MB
Folder

Across 12 files

−4.2 MB
Saved

Across 12 images

−27%
Avg

Peak −41%

4
Formats

JPG PNG WebP AVIF

Library · Points — points.html

Points.

Four point patterns — check lists, two-column rules, numbered dividers and dot bullets. Warm neutrals, whisper borders, one accent.

01 Check list · icon + copy card e-points variant="checks" · card · hairline
Your images never leave your computer. No uploads · No cloud processing · No accounts
No cloud processing. Compression runs on your machine — not on someone else's server.
No accounts. No sign-in, no dashboard, no email wall between you and a smaller file.
02 Two-column · top rule warm e-points variant="cols" · warm · 2-col
Offline Your images never leave your computer. ✓ No uploads ✓ No cloud processing ✓ No accounts
Workflow Smaller images. Same workflow. → Select a folder → Compress locally → Done
03 Numbered · mono + divider e-points variant="numbered" · hairline
Free. Offline. Built for Windows. No account, no cloud, no waiting for a server.
Quality when you need it. Quality 85 by default — slide for size or fidelity.
Faster by staying local. Your computer does the work. No upload or download step.
Private by default. Local processing. No cloud required.
04 Dot list · minimal mono eyebrows e-points variant="dots" · mono eyebrows · 3-col
No account No sign-up, no dashboard. Open and select a folder.
No cloud No uploads. No cloud queue. Files stay on disk.
No waiting No upload or download step. Your PC does the work.
Library · Content — content.html

Content.

Four content-heavy patterns for docs, guides and long-form pages — dense type, readable hierarchy and real code blocks. Primary element is e-content variant="editorial"; the other three are compositions of e-content + e-stats / e-table / e-points / e-faq.

01 Editorial · long-form guide e-content variant="editorial" · 720px · 65ch · warm
Guide · 6 min read

How to shrink a 20 MB portfolio without losing a pixel you care about

Most image weight is invisible — duplicate metadata, oversized dimensions and a quality setting left at 95. Compressy fixes all three locally, in one pass.

How to shrink a 20 MB portfolio without losing a pixel you care about

Most portfolios ship with images at 2× the displayed size and a quality setting left at 95. Dropping to Quality 85 with the balanced engine removes weight the eye won't miss, while Max W × H trims dimensions that never render.

What actually saves the most

Quality is the biggest dial. 85 is the default because it keeps text sharp while cutting photographs by ~26%. For screenshots with large flat areas, the lossless toggle keeps PNG bit-exact while still stripping metadata.

When to change the defaults

Leave Keep original on for archival work — WebP / AVIF as output makes sense when you control the delivery format. Turn Overwrite → backup folder on early — originals land in /backup next to each file before anything is replaced.

Scan first Drop a folder and note the header stats: folder size, avg saved preview and file count.
Slide quality 40–95, balanced / fast / maximum. Peak −41% on large photos at Quality 80.
Check dimensions Max W × H downscales without upscaling — keep aspect, off by default.
02 Docs · sidebar + code + code / callouts e-content · mono · callouts · 240px TOC
Docs · Quick start

Quick start — Select, set, compress

Compressy is a single-window Windows utility. Pick a folder, tune four controls, run locally. No sign-up, no upload, no dashboard.

Quick start — Select, set, compress

On this page: Quick start · Quality & engine · Output format · Max width × height · Auto-rename · Backup & safety · CLI flags — the sticky TOC from content.html content-02. The docs pattern is a narrow prose column with mono callouts and a 240px TOC.

C:\Portfolio> compressy --quality 85 --engine balanced --keep-original C:\Pictures\Portfolio-2024
12 images · 18.4 MB → 14.2 MB · −22% · 00:08
Quality &amp; engine — the two dials that matter. 85 · balanced is the default; fast trades a point for speed.
Output format — keep original or convert the whole batch to WebP / AVIF.
Max W × H — downscale only, keep aspect. Off by default.

Tip: leave Auto-rename {prefix}-{NNNN} off until you have confirmed the savings on a sample folder.

03 Explainer · dense comparison + e-stats + e-table e-content · stats + table · warm
Deep dive · Why local beats cloud

Smaller images, same workflow — without the upload

Cloud compressors add an upload, a queue and a download. Compressy removes all three. The comparison below is measured on the same 12-image portfolio (18.4 MB) on a mid-range Windows PC and a 20 Mbps connection.

Smaller images, same workflow — without the upload

Local processing−26% saved8s durationCloud queue avoided
CapabilityCompressyCloud tool
Works offline
No upload step
Batch 1,000 images✓ 5 minQueued
Private by defaultLocalServer

What to tell your team: if you ship images to the web, the win is not a trick — it is removing pixels and quality the user never sees. Compressy trims both in one pass and shows per-file savings so you can prove it before you ship.

04 Knowledge base · dense index + e-faq / e-points e-content · search · groups · 65ch
Knowledge base

Everything about Compressy, in one place

Twelve guides, one search. No video you have to watch — just text you can scan, copy and keep. The dense index from content.html content-04 is a 720px column with grouped links and a search bar.

Everything about Compressy, in one place

Getting started Quick start · Quality & engine · Output format · Max W×H
Formats JPEG mozjpeg · PNG oxipng · WebP · AVIF · Keep original
Safety Backup & overwrite · Auto-rename · Verify downloads (SHA-256)
Reference Changelog · System requirements · CLI flags · Offline guarantee
Can I use it offline?

Yes. No internet required after install.

Where are backups?

backup/ next to each file when overwriting.

Which flags exist?

--quality 40–95 --engine balanced|fast|maximum --format keep|webp|avif

Library · Hero & Mock — landing.html

Hero and app mock.

The landing hero (e-hero) and the light Primer app mock (e-mock) are standalone elements used together on /. Included here for completeness.

Free · Offline · Built for Windows

Offline Image Compressor
For Windows

Compressy is a fast, offline image compressor for Windows. Shrink images without uploading them to a server, creating an account, or giving your files to a cloud service.

Free. Offline. Built for Windows. — No account required.
18.4 MB folder−4.2 MB saved12 images1,000 images in 5 min
C Compressy — Image Optimizer
C:\Users\Alex\Pictures\Portfolio-2024 12 files Browse…Compress selected →

Source files

4 selected
JPGhero-portfolio.jpg3.4 MB
PNGbrand-sheet.png1.9 MB
JPGteam-photo-2024.jpg5.1 MB
JPGcase-study-cover.jpg2.8 MB
Quality 85 · Balanced · Keep format4 threads

Compressed

−4.2 MB saved
JPGhero-portfolio.jpg3840×2160 → 1920×1080−27% · −904 KB
PNGbrand-sheet.png2400×1600−31% · −586 KB
JPGcase-study-cover.jpg3200×1800−22% · −611 KB
Avg. −26% · Peak −31%Export CSV · Open folder
Preview of the Windows app — folder, settings, and per-file savings in one window.

Hero proof uses e-proof value / label / success; mock uses mock-src / mock-out data tags.

Section library

Ship a page by composing elements.

Copy a demo from this library, swap the copy, keep the structure. All styling lives in site.css; all interactivity in app.js.

Offline · Windows · No account required · 18 elements · 44 demos