feat: optimize mockup images with WebP and auto-regeneration

Browse Source

Convert mockup source images from JPG to WebP format for 76% size
reduction (20MB → 4.7MB). Variants are now auto-generated on startup
via Oban, keeping the same DRY approach as database images.

Changes:
- Add OptimizeWorker.enqueue_mockup/1 for filesystem images
- Extend VariantCache to check mockup sources on startup
- Update MockupGenerator to save source as optimized WebP
- Update .gitignore to ignore generated variants
- Convert 55 source mockups from JPG to WebP

The mockup pipeline now uses the same code paths as database images:
- Optimizer.to_optimized_webp/1 for source conversion
- Optimizer.process_file/3 for variant generation
- OptimizeWorker for Oban background processing
- VariantCache for startup cache validation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

...

This commit is contained in:

Jamey Greenwood

2026-01-25 00:30:42 +00:00

parent 2b5b749a69

commit 252ca2268a

114 changed files with 185 additions and 7 deletions

Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL

Download Patch File Download Diff File Expand all files Collapse all files

BIN

priv/static/mockups/autumn-leaves-notebook-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 351 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 51 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 313 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 44 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 329 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 58 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 420 KiB

BIN

priv/static/mockups/autumn-leaves-notebook-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 84 KiB

BIN

priv/static/mockups/blue-waves-laptop-sleeve-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 258 KiB

BIN

priv/static/mockups/blue-waves-laptop-sleeve-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 50 KiB

BIN

priv/static/mockups/blue-waves-laptop-sleeve-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 262 KiB

BIN

priv/static/mockups/blue-waves-laptop-sleeve-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 44 KiB

BIN

priv/static/mockups/blue-waves-laptop-sleeve-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 512 KiB

BIN

priv/static/mockups/blue-waves-laptop-sleeve-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 125 KiB

BIN

priv/static/mockups/botanical-illustration-print-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 359 KiB

BIN

priv/static/mockups/botanical-illustration-print-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 86 KiB

BIN

priv/static/mockups/botanical-illustration-print-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 507 KiB

BIN

priv/static/mockups/botanical-illustration-print-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 79 KiB

BIN

priv/static/mockups/botanical-illustration-print-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 883 KiB

BIN

priv/static/mockups/botanical-illustration-print-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 219 KiB

BIN

priv/static/mockups/fern-leaf-mug-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 274 KiB

BIN

priv/static/mockups/fern-leaf-mug-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 52 KiB

BIN

priv/static/mockups/fern-leaf-mug-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 268 KiB

BIN

priv/static/mockups/fern-leaf-mug-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 47 KiB

BIN

priv/static/mockups/fern-leaf-mug-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 220 KiB

BIN

priv/static/mockups/fern-leaf-mug-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 33 KiB

BIN

priv/static/mockups/fern-leaf-mug-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 914 KiB

BIN

priv/static/mockups/fern-leaf-mug-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 240 KiB

BIN

priv/static/mockups/forest-light-hoodie-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 141 KiB

BIN

priv/static/mockups/forest-light-hoodie-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 159 KiB

BIN

priv/static/mockups/forest-light-hoodie-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 129 KiB

BIN

priv/static/mockups/forest-light-hoodie-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 129 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 52 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 21 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 47 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 18 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 67 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 35 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 51 KiB

BIN

priv/static/mockups/forest-silhouette-tshirt-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 24 KiB

BIN

priv/static/mockups/geometric-abstract-print-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 107 KiB

BIN

priv/static/mockups/geometric-abstract-print-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 7.9 KiB

BIN

priv/static/mockups/geometric-abstract-print-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 413 KiB

BIN

priv/static/mockups/geometric-abstract-print-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 43 KiB

BIN

priv/static/mockups/geometric-abstract-print-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 860 KiB

BIN

priv/static/mockups/geometric-abstract-print-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 209 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 399 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 72 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 386 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 72 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 376 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 76 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 418 KiB

BIN

priv/static/mockups/monstera-leaf-notebook-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 83 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 123 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 104 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 108 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 88 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 96 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 80 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 131 KiB

BIN

priv/static/mockups/monstera-leaf-phone-case-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 117 KiB

BIN

priv/static/mockups/mountain-sunrise-print-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 142 KiB

BIN

priv/static/mockups/mountain-sunrise-print-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 17 KiB

BIN

priv/static/mockups/mountain-sunrise-print-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 422 KiB

BIN

priv/static/mockups/mountain-sunrise-print-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 47 KiB

BIN

priv/static/mockups/mountain-sunrise-print-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 864 KiB

BIN

priv/static/mockups/mountain-sunrise-print-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 210 KiB

BIN

priv/static/mockups/night-sky-blanket-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 520 KiB

BIN

priv/static/mockups/night-sky-blanket-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 117 KiB

BIN

priv/static/mockups/night-sky-blanket-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 417 KiB

BIN

priv/static/mockups/night-sky-blanket-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 90 KiB

BIN

priv/static/mockups/night-sky-blanket-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 919 KiB

BIN

priv/static/mockups/night-sky-blanket-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 242 KiB

BIN

priv/static/mockups/night-sky-blanket-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 654 KiB

BIN

priv/static/mockups/night-sky-blanket-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 107 KiB

BIN

priv/static/mockups/ocean-waves-cushion-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 165 KiB

BIN

priv/static/mockups/ocean-waves-cushion-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 24 KiB

BIN

priv/static/mockups/ocean-waves-cushion-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 162 KiB

BIN

priv/static/mockups/ocean-waves-cushion-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 23 KiB

BIN

priv/static/mockups/ocean-waves-cushion-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 442 KiB

BIN

priv/static/mockups/ocean-waves-cushion-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 86 KiB

BIN

priv/static/mockups/ocean-waves-print-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 191 KiB

BIN

priv/static/mockups/ocean-waves-print-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 24 KiB

BIN

priv/static/mockups/ocean-waves-print-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 436 KiB

BIN

priv/static/mockups/ocean-waves-print-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 52 KiB

BIN

priv/static/mockups/ocean-waves-print-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 869 KiB

BIN

priv/static/mockups/ocean-waves-print-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 212 KiB

BIN

priv/static/mockups/sunset-gradient-tote-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 225 KiB

BIN

priv/static/mockups/sunset-gradient-tote-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 29 KiB

BIN

priv/static/mockups/sunset-gradient-tote-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 195 KiB

BIN

priv/static/mockups/sunset-gradient-tote-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 19 KiB

BIN

priv/static/mockups/sunset-gradient-tote-3.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 428 KiB

BIN

priv/static/mockups/sunset-gradient-tote-3.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 94 KiB

BIN

priv/static/mockups/sunset-gradient-tote-4.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 407 KiB

BIN

priv/static/mockups/sunset-gradient-tote-4.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 91 KiB

BIN

priv/static/mockups/wildflower-meadow-print-1.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 316 KiB

BIN

priv/static/mockups/wildflower-meadow-print-1.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 68 KiB

BIN

priv/static/mockups/wildflower-meadow-print-2.jpg

Binary file not shown.

Side by Side Before Width:  |  Height:  |  Size: 500 KiB

BIN

priv/static/mockups/wildflower-meadow-print-2.webp Normal file

Binary file not shown.

Side by Side After Width:  |  Height:  |  Size: 73 KiB

Some files were not shown because too many files have changed in this diff Show More