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/config/config.php

@@ -5,6 +5,37 @@ return [
 
     'languages' => true,
 
+    'thumbs' => [
+        'quality' => 85,
+        'format' => 'webp',
+        'presets' => [
+            'product-card' => [
+                'width' => 600,
+                'height' => 600,
+                'crop' => true,
+                'format' => 'webp'
+            ],
+            'product-detail' => [
+                'width' => 1200,
+                'format' => 'webp'
+            ],
+            'default' => [
+                'width' => 1024,
+                'format' => 'webp'
+            ],
+        ],
+        'srcsets' => [
+            'default' => [400, 600, 800, 1024, 1440, 2048],
+            'webp' => [
+                '400w' => ['width' => 400, 'format' => 'webp'],
+                '600w' => ['width' => 600, 'format' => 'webp'],
+                '800w' => ['width' => 800, 'format' => 'webp'],
+                '1024w' => ['width' => 1024, 'format' => 'webp'],
+                '1440w' => ['width' => 1440, 'format' => 'webp'],
+            ],
+        ],
+    ],
+
     'routes' => [
         [
             'pattern' => 'snipcart-webhook',