feat: add image size verification script

[JeanneGrenet]

Summary

• Adds a pre-commit check that validates image file sizes (max 500 KB) to prevent committing oversized images
• Integrates with lint-staged so the check runs automatically on staged image files (jpg, jpeg, png, webp, avif)
• Adds a check:images script for manual usage

Closes #637

🤖 Generated with Claude Code

Summary by CodeRabbit

• Chores
  • Added automated image size validation to the development workflow so oversized images are caught before commit, reducing build and performance issues and providing clear guidance when an image exceeds allowed limits.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
forkit-community	Ready	Preview, Comment	Mar 25, 2026 9:25am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 73edae82-a3e7-45b7-b296-4ed833a20310

📥 Commits

Reviewing files that changed from the base of the PR and between 8a66419 and 407572a.

📒 Files selected for processing (1)

• scripts/check-image-size.ts

🚧 Files skipped from review as they are similar to previous changes (1)

• scripts/check-image-size.ts

---

📝 Walkthrough

Walkthrough

New image-size validation: a Node script (scripts/check-image-size.ts) enforces per-path image size limits and is wired into the pre-commit flow via package.json (check:images script and lint-staged entry) to run on staged images before commits.

Changes

Cohort / File(s)	Summary
Pre-commit Integration package.json	Added check:images script (tsx scripts/check-image-size.ts) and updated lint-staged to run the checker for staged image files *.{jpg,jpeg,png,webp,avif}.
Image Size Validation Script scripts/check-image-size.ts	New script that applies ordered {pattern, maxKB} rules to provided file paths, measures file sizes synchronously, reports files exceeding their matched limit, prints guidance, and exits with code 1 on violations.

Sequence Diagram(s)

sequenceDiagram
  participant Git as Git / pre-commit
  participant LintStaged as lint-staged
  participant NodeScript as scripts/check-image-size.ts
  participant FS as File System

  Git->>LintStaged: trigger staged file hooks
  LintStaged->>NodeScript: invoke check-image-size with file paths
  NodeScript->>FS: stat each file, read size
  NodeScript-->>LintStaged: return success or list of violations
  alt violations found
    LintStaged->>Git: fail commit (exit 1), print errors & guidance
  else all ok
    LintStaged->>Git: allow commit to proceed
  end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰✨ Hopping through commits to keep sizes light,
Tiny paws inspect each image in sight,
Five hundred KB or the rule will say nay,
Compress and retry — then hop on your way! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: add image size verification script' accurately and concisely describes the main change in the pull request—introducing an image size verification script.
Linked Issues check	✅ Passed	The pull request successfully implements the core requirement from issue #637: creating a script that validates image sizes before commits to prevent oversized image submissions.
Out of Scope Changes check	✅ Passed	All changes are directly related to the image size verification objective: the new script implements the checking logic, and package.json updates integrate it with lint-staged and add a manual command.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch JeanneGrenet/check-image-sizes

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

scripts/check-image-size.ts (1)

10-16: Consider handling file access errors gracefully.

statSync will throw if a file doesn't exist or is inaccessible (e.g., deleted between staging and the hook running). While rare, this could crash the script with an unhelpful error.

🛡️ Optional: Add try-catch for robustness

 for (const file of files) {
+  try {
     const stats = statSync(file);
     if (stats.size > MAX_SIZE_BYTES) {
       const sizeKB = Math.round(stats.size / 1024);
       errors.push(`  ${basename(file)} (${sizeKB} KB > ${MAX_SIZE_KB} KB)`);
     }
+  } catch (err) {
+    console.warn(`⚠️ Could not check ${basename(file)}: ${(err as Error).message}`);
+  }
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@scripts/check-image-size.ts` around lines 10 - 16, The loop that checks file
sizes currently calls statSync(file) which can throw if a file is missing or
inaccessible; wrap the statSync call in a try-catch inside the for (const file
of files) loop and on error either skip the file and optionally push a
descriptive message into errors (e.g., `${basename(file)} (unavailable:
${err.message})`) or log it, ensuring you still compare stats.size >
MAX_SIZE_BYTES when stat succeeds; reference the symbols files, statSync,
basename, errors, MAX_SIZE_BYTES and MAX_SIZE_KB.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@package.json`:
- Around line 17-18: The lint-staged entry for "*. {ts,tsx,js,jsx,json,astro}"
currently runs "prettier --write src/" which ignores the list of staged files;
update that rule to run Prettier against the staged file paths (i.e., replace
the fixed "prettier --write src/" command with a command that accepts
lint-staged file args such as "prettier --write" so lint-staged will pass the
matched files), keeping the existing pattern name
("*.{ts,tsx,js,jsx,json,astro}") intact so only staged files are formatted.

---

Nitpick comments:
In `@scripts/check-image-size.ts`:
- Around line 10-16: The loop that checks file sizes currently calls
statSync(file) which can throw if a file is missing or inaccessible; wrap the
statSync call in a try-catch inside the for (const file of files) loop and on
error either skip the file and optionally push a descriptive message into errors
(e.g., `${basename(file)} (unavailable: ${err.message})`) or log it, ensuring
you still compare stats.size > MAX_SIZE_BYTES when stat succeeds; reference the
symbols files, statSync, basename, errors, MAX_SIZE_BYTES and MAX_SIZE_KB.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d536a106-61ac-4b6b-8161-7f953517b7b1

📥 Commits

Reviewing files that changed from the base of the PR and between a1bed85 and 8a66419.

📒 Files selected for processing (2)

• package.json
• scripts/check-image-size.ts

[houssembaltii]

for me 500 is too generic, in the project we have images for :

• avatars
• hero sections
• images for podcast
• images used in the news

i think 500 is great for avatars but for hero section or images used in the news/podcast i feel we can easily surpass the 500 KB threshold .
perhaps we can tolerate more in size depending on the image purpose