| name | gi-web-optimizer |
| description | Optimize approved assets for web publishing in The Great Inversion asset pipeline. Use when Tim says "optimize for web," "make web-ready," "resize and compress," "create thumbnails," "generate OG images," "batch optimize," or wants to convert approved assets from 05-Approved-Assets into web-ready versions for 06-Web-Ready. Handles resize, compress to WebP, thumbnail generation (400px), OpenGraph crop (1200x630), and feature strip crop (1200x400), then updates the Asset Register tracker. |
| metadata | {"author":"Tim Dickey","version":"1.0","pipeline-step":"5"} |
GI Web Optimizer
Automates Step 5 of the GreatInvert Asset Pipeline — optimizing approved assets for web publishing.
When to Use This Skill
Use when Tim asks to:
- Optimize approved assets for web
- Make assets web-ready
- Resize and compress images
- Create thumbnails, OG images, or feature strips
- Batch-process images from 05-Approved-Assets into 06-Web-Ready
- Run Step 5 of the asset pipeline
What It Produces
From each approved source image, the optimizer generates up to 4 outputs:
| Output | Dimensions | Subfolder | Description |
|---|
| Optimized full-size | Auto (based on aspect ratio) | Optimized-Images | Compressed WebP at quality 82 |
| Thumbnail | 400px wide (proportional height) | Thumbnails | Small preview version |
| OpenGraph crop | 1200 x 630 | OpenGraph | Social sharing preview |
| Feature strip | 1200 x 400 | Feature-Strips | Horizontal banner crop |
Instructions
Single Image Optimization
- Identify the approved asset file (should be in 05-Approved-Assets or local workspace).
- Run the optimize script:
python /home/user/workspace/skills/gi-web-optimizer/scripts/optimize_asset.py \
<source_image> <output_dir> \
--quality 82 --format webp
- Review the JSON output for dimensions and file sizes.
- Optional flags:
--skip-thumb, --skip-og, --skip-strip, --prefix <name>, --format png|jpg.
Batch Optimization
- Collect approved assets into a directory or create a text file listing image paths (one per line).
- Run the batch script:
python /home/user/workspace/skills/gi-web-optimizer/scripts/batch_optimize.py \
<input_dir_or_file_list> <output_dir> \
--quality 82 --format webp
- The script processes all PNG, JPG, JPEG, and WebP images found.
- An
optimization_summary.json file is saved to the output directory.
Update the Tracker
After optimization, update the Asset Register with web-ready entries:
python /home/user/workspace/skills/gi-web-optimizer/scripts/update_tracker_webready.py \
<tracker.xlsx> <optimization_summary.json>
This adds new rows to the Asset Register tab for each derivative (thumbnail, OG image, feature strip, optimized full-size) with:
- Auto-incremented Asset_ID (AST-XXX)
- Stage set to "Web-Ready"
- File path pointing to 06-Web-Ready subfolders
- Dimensions and format metadata
- File size noted in the Notes field
Upload to Google Drive
After optimization, upload the web-ready files to the correct subfolders in the GreatInvert Google Drive:
06-Web-Ready/Optimized-Images/06-Web-Ready/Thumbnails/06-Web-Ready/OpenGraph/06-Web-Ready/Feature-Strips/
Dimension Presets
The optimizer auto-detects the closest aspect ratio and applies these target sizes:
| Aspect Ratio | Target Size |
|---|
| 16:9 | 1920 x 1080 |
| 4:3 | 1600 x 1200 |
| 1:1 | 1200 x 1200 |
| 3:4 | 1200 x 1600 |
| 9:16 | 1080 x 1920 |
Override with --target-width and --target-height flags.
Examples
Single hero image:
Tell Computer: "Optimize GI_playbook_ai-fluency_hero_home_approved_20260329_v01.png for web"
Batch of approved assets:
Tell Computer: "Batch optimize all images in 05-Approved-Assets/Website for web publishing"
Custom quality and format:
Tell Computer: "Optimize the playbook mockup at quality 90 in PNG format, skip the feature strip"
