Statamic Responsive Images Laravel Package

Technical Evaluation

Architecture Fit

• Statamic-Centric Design: The package is purpose-built for Statamic CMS, leveraging its asset system, Glide for image manipulation, and Antlers/Twig templating. This ensures deep integration with Statamic’s core workflows (e.g., asset containers, fieldtypes, and entry management).
• Responsive Image Paradigm: Aligns with modern web standards (srcset, art direction, format negotiation) while abstracting complexity behind a fieldtype and templating tag. Reduces reliance on manual Glide presets for responsive use cases.
• Statamic 4.0+ Focus: Explicitly supports Statamic 4+, with backward compatibility for v5/v6 (as seen in changelog). Critical for teams upgrading or maintaining multi-version deployments.
• Glide Integration: Leverages Statamic’s Glide for image processing, avoiding vendor lock-in while benefiting from Statamic’s caching and optimization layers.

Integration Feasibility

• Low Friction: Composer-based installation (composer require spatie/statamic-responsive-images) with zero Statamic core modifications. No database migrations or schema changes required.
• Fieldtype Plug-and-Play: Replaces or augments existing image fieldtypes with a responsive-aware UI (e.g., breakpoint controls, ratio adjustments). Minimal content editor training needed.
• Templating Override: Replaces {{ glide }} with {{ responsive }} tags, enabling gradual adoption. Existing Glide logic can coexist via glide: prefixed parameters.
• GraphQL Support: Extends Statamic’s GraphQL API with responsive fields, enabling headless use cases without templating changes.

Technical Risk

Key Questions for TPM

1. Statamic Version Strategy:

   • Is the team locked into Statamic 4/5/6? If not, pin the package version to avoid compatibility surprises.
   • Example: "spatie/statamic-responsive-images": "6.x" for Statamic 6.x.

2. Image Processing Workflow:

   • Should statamic.assets.image_manipulation.cache be disabled (recommended) or enabled for pre-generation?
   • If enabled, plan for regeneration commands (php please responsive:regenerate) during deployments.

3. Breakpoint Alignment:

   • Are frontend breakpoints (e.g., Tailwind, CSS) aligned with the package’s defaults? If not, customize via config/responsive-images.php.
   • Example:

     'breakpoints' => [
         'sm' => '640px',
         'md' => '768px',
         'lg' => '1024px',
         'xl' => '1280px',
     ],
     

4. Format/Quality Tradeoffs:

   • Should AVIF/WEBP be enabled globally or per-request? Test browser support for AVIF (limited to Chrome/Edge/Safari 14+).
   • Example:

     {{ responsive:image_field avif="false" webp="true" quality:webp="80" }}
     

5. Asset Container Exclusions:

   • Are there containers (e.g., logos, icons) where responsive variants are unnecessary? Exclude them via config:

     'excluded_containers' => ['logos', 'favicons'],
     

6. Queue Infrastructure:

   • Is the team using Horizon/Queues? If not, ensure the default queue is monitored for job failures.
   • Example:

     'queue' => 'images', // Custom queue name
     

7. GraphQL Headless Use:

   • If using GraphQL, validate that the responsive field arguments match frontend needs (e.g., ratio, glide_width).

8. Custom HTML Needs:

   • Does the team need to override the default <img> output? Publish views:

     php artisan vendor:publish --provider="Spatie\ResponsiveImages\ServiceProvider"
     

Integration Approach

Stack Fit

• Statamic Ecosystem:

  • Core: Works with Statamic 4.0+, including Statamic 6.x (tested in changelog).
  • Glide: Requires Statamic’s Glide for image processing (no external dependencies).
  • Fieldtypes: Replaces or extends existing image fieldtypes (e.g., assets fieldtype).
  • Templating: Antlers/Twig tags ({{ responsive }}) replace or augment {{ glide }}.
  • GraphQL: Extends Statamic’s GraphQL schema for headless use.

• Frontend Compatibility:

  • Responsive Images: Generates srcset and sizes attributes dynamically via JavaScript (for sizes).
  • Art Direction: Supports breakpoint-specific ratios/sources (e.g., lg:ratio="16/9").
  • Format Negotiation: Defaults to WEBP + original format; AVIF optional.

• Backend Services:

  • Queues: Uses Laravel Queues (default: default) for async image generation.
  • Caching: Leverages Glide’s internal cache; Statamic’s image_manipulation.cache setting controls pre-generation.

Migration Path

Compatibility

• Statamic Versions:
  • Supported: 4.0+ (tested up to 6.6+).
  • Unsupported: Statamic 3.x (package requires 4.0+).
• Glide Dependencies:
  • No conflicts with existing Glide presets; uses separate logic.
• Third-Party Addons:
  • May conflict with other image-related addons (e.g., spatie/laravel-medialibrary). Audit for overlaps.
• PHP/Laravel:
  • Compatible with Laravel 10/11 (via Statamic 6.x support).

Sequencing

1. Pre-Integration:
   • Audit existing image fieldtypes and Glide usage.
   • Decide on breakpoints, formats, and quality settings (configurable in responsive-images.php).
2. Development:
   • Install package and publish config/views if needed.
   • Update blueprints to use the responsive fieldtype.
3. Testing:
   • Test with real assets (not mocks) to validate srcset generation.
   • Verify GraphQL responses if using headless.
4. Deployment:
   • Roll out in stages (e.g., non-critical sections first).
   • Monitor queue jobs and server metrics (CPU/memory).
5. Post-Launch:
   • Optimize quality settings based on real-world performance.
   • Consider AVIF adoption if browser support improves.

Operational Impact

Maintenance

• Configuration Drift:
  • Centralized config (responsive-images.php) reduces