Port5002Folio

• 

  my-portfolio

Inspiration

This project was inspired by the need to improve website performance through efficient image handling. I noticed how slow-loading images negatively impact user experience, especially on slow networks. That led me to build a toolchain and dashboard that help developers automate image optimization, generate placeholders for progressive loading, and track improvements visually.

What it does

Automatically compress and resize images using CLI scripts Generate placeholder images for progressive loading strategies Visually compare original, optimized, and placeholder versions via a dashboard Track performance gains (like size reduction) directly from a browser view

How we built it

-> Frontend (Dashboard) Built using HTML, CSS, and vanilla JavaScript Dynamically loads image files from different directories Shows file names and sizes for performance analysis

-> Backend / Tooling (CLI Scripts) Powered by Node.js and the Sharp library Script 1: optimize-images.js Compresses images Resizes for responsive performance Converts formats (e.g., JPEG, PNG, WebP) Script 2: create-placeholders.js Generates Low Quality Image Placeholders (LQIP) Adds blur and small dimensions to make them lightweight // Sample image optimization snippet

  .resize(800)
  .jpeg({ quality: 70 })
  .toFile("optimized.jpg");

Challenges we ran into

Ensuring file naming consistency when generating placeholders. Balancing image quality vs. file size during optimization. Making the dashboard flexible enough to adapt to different image sets and directories.

Accomplishments that we're proud of

Built a full-stack image optimization toolkit from scratch using just Node.js and Sharp—no external services required Created a visual dashboard that simplifies testing and performance evaluation for image assets

What we learned

Automating asset optimization saves time and improves development workflows. I now understand how tools like Sharp and Node.js scripting can streamline repetitive tasks. I also gained experience designing user-friendly dashboards that offer visual feedback to developers.

What's next for Untitled

Web-based version hosted on a cloud platform so users can optimize images without installing anything NPM package release of the CLI tools so developers can easily integrate them into their own projects Detailed analytics in the dashboard (e.g., % size savings, format comparisons) Automated testing to ensure script performance and dashboard consistency Dark mode and responsive layout for improved UI/UX

Built With

• cli
• css
• html
• javascript
• jpeg
• local-file-system
• lqip-(low-quality-image-placeholders)
• node.js
• png
• sharp
• vanilla-javascript