Overview
EcoLens is a media optimization platform that automates the process of making websites faster and more eco-friendly. It works on public HTML, CSS, and JavaScript sites as well as modern frameworks.
How It Works
EcoLens uses two primary methods to analyze your project:
Website URL Scan
Provide a URL and EcoLens scrapes the page to find media assets. It simulates Cloudinary transformations likef_auto and q_autoto estimate savings.
GitHub Repository Scan
Point EcoLens to a GitHub repository to analyze source code for images and local assets. This enables direct optimization via Pull Requests.
Implementation
Zero-Install SDK
Add this script tag to your HTML head:
<script src="https://ecolens-cloudinary.vercel.app/sdk.js" data-cloud="YOUR_CLOUD_NAME" async ></script>
Automated Pull Request
EcoLens can open a PR that includes an optimization report and a Cloudinary loader.
AI-Guided Prompt
Use the generated prompt in Claude Code or Cursor to automate refactors.
Metrics
EcoLens uses the Digital Carbon Footprint standard:
CO2 (g) = Energy (kWh) × 442 g/kWh
Configuration
To run EcoLens locally, set:
NEXT_PUBLIC_SUPABASE_URL=... NEXT_PUBLIC_SUPABASE_ANON_KEY=... GITHUB_ID=... GITHUB_SECRET=... CLOUDINARY_URL=...