Image Optimize

When new images are added to a web project, ensure they are optimized before committing. Unoptimized images bloat the bundle and hurt performance.

Workflow

1. Detect new images. When you write an image file or notice the user has added images, check:

   • What format are they? (png, jpg, jpeg, webp, svg)
   • What size are they? (run ls -lh on the file)
   • Where are they? (which directory)

2. Check for an optimize script. Look for:

   • npm run optimize-images (portfolio uses this)
   • A scripts/optimize-images.js or similar file
   • Sharp, imagemin, or other image optimization tools in package.json

3. If an optimize script exists: Run it.

   npm run optimize-images
   

   Report what was optimized and the size savings.

4. If no optimize script exists: Flag the issue to the user: