Optimize Landing Page Images

Use this skill when the user asks to "update website images", "add new screenshots to the website", or "optimize images".

Context

The landing page (docs/index.html) uses optimized WebP images stored in docs/assets/images/. These images are generated from high-resolution PNG screenshots located in ShortcutCycle/App Store Connect Assets/Screenshots/. A Python script scripts/optimize_images.py handles the resizing and conversion.

Instructions

1. Identify New or Changed Images

Check if the user has added new screenshots to ShortcutCycle/App Store Connect Assets/Screenshots/ or if they want to update existing ones.

2. Update the Script (If necessary)

If there are NEW files that are not yet being processed:

1. •Read scripts/optimize_images.py.
2. •Add the new filename to the FILES_TO_PROCESS dictionary.
   • •Key: The exact filename in the screenshots folder (e.g., "New Feature.png").
   • •Value: A simple, kebab-case name for the output file (e.g., "new-feature").
3. •Save the script.

3. Run the Optimization

Execute the script from the project root:

python3 scripts/optimize_images.py

Note: The script automatically generates two versions for each screenshot:

• •filename.webp (1800px width)
• •filename-small.webp (900px width)

4. Verify Output

1. •Check that new .webp and -small.webp files exist in docs/assets/images/.
2. •If the user requested to show these images on the site, edit docs/index.html.
   • •Use the <img srcset="..." sizes="..."> pattern for responsive loading.
   • •Reference existing images in docs/index.html as examples.

Dependencies

• •Python 3
• •Pillow (pip3 install Pillow)