Add responsive image optimization with WebP support

- Configure thumbs presets in config.php (quality 85%, WebP format)
- Create picture snippet with srcset and WebP support
- Add product-card and product-detail presets
- Update templates to use optimized images
- Implement native lazy loading for product cards
- Add aspect-ratio CSS for layout stability

Improvements over reference project:
- Complete PHPDoc documentation
- Native CSS aspect-ratio support
- Optimized lazy loading strategy
- Product-specific image presets

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

site/templates/product.php

@@ -70,7 +70,13 @@
 
             <figure>
                 <?php if($image = $page->images()->first()): ?>
-                    <img src="<?= $image->url() ?>" alt="<?= $page->title()->html() ?>" />
+                    <?php snippet('picture', [
+                        'file' => $image,
+                        'alt' => $page->title()->html(),
+                        'preset' => 'product-detail',
+                        'size' => 50,
+                        'lazy' => false
+                    ]) ?>
                 <?php endif ?>
             </figure>
         </section>