Statamic Responsive Images Laravel Package

Product Decisions This Supports

• Performance Optimization: Enable lazy-loading and adaptive image delivery to reduce page load times and bandwidth usage, directly improving Core Web Vitals (LCP, CLS).
• Art Direction & Responsive Design: Support advanced responsive image techniques (e.g., aspect ratio switching, breakpoint-based assets) for modern UX, aligning with design system requirements.
• Build vs. Buy: Avoid reinventing the wheel by leveraging a battle-tested, Statamic-native solution instead of custom PHP/Glide implementations.
• Headless & GraphQL: Enable responsive images in headless setups (e.g., mobile apps, SPAs) via GraphQL, expanding API-driven use cases.
• Content Editor Workflow: Provide a user-friendly fieldtype for non-technical editors to manage responsive images without manual intervention.
• Multi-Format Support: Reduce conversion complexity by auto-generating WebP/AVIF variants, improving compatibility and performance across devices.
• A/B Testing & Personalization: Use breakpoint-based asset swapping (e.g., lg:src) to dynamically serve tailored images for experiments or user segments.

When to Consider This Package

• Avoid if:

  • Your project uses non-Statamic CMS (this is Statamic-specific).
  • You need custom image processing pipelines beyond responsive breakpoints (e.g., complex filters, non-standard formats).
  • Your team lacks PHP/Laravel familiarity to debug or extend the package.
  • You’re constrained by legacy infrastructure (e.g., no Glide support, strict CDN requirements).
  • Cost is a blocker: While MIT-licensed, Spatie’s paid products may influence adoption decisions.

• Consider if:

  • You’re using Statamic 4.0+ and need responsive images out-of-the-box.
  • Your roadmap includes performance-driven features (e.g., Core Web Vitals compliance).
  • You prioritize developer velocity over custom solutions.
  • Your design system requires art direction (e.g., hero images with aspect ratio changes).
  • You’re building headless APIs with GraphQL image queries.

How to Pitch It (Stakeholders)

For Executives:

"This package solves a critical performance bottleneck by automatically generating optimized, responsive images for Statamic—reducing load times by up to 50% and improving mobile UX. It’s a turnkey solution that eliminates the need for custom development, saving both time and resources. With support for modern formats (WebP/AVIF) and art direction, it aligns with our design system and headless API goals while future-proofing for Core Web Vitals compliance."

For Engineers:

*"Spatie’s statamic-responsive-images integrates seamlessly with Statamic’s asset pipeline, using Glide under the hood to generate responsive variants on-demand (with optional caching). Key benefits:

• Lazy-loaded <img> tags with dynamic srcset and sizes via JavaScript.
• Breakpoint-based art direction: Swap assets/ratios at sm, md, etc. (Tailwind-compatible by default).
• GraphQL support: Expose responsive images in headless setups with flexible arguments (e.g., ratio, quality:webp).
• Extensible: Override views, configure breakpoints, or exclude containers via responsive-images.php.
• Performance: Disables Glide caching by default to save storage; uses base64 placeholders for LCP improvements. Tradeoff: Minimal setup (Composer + config), but requires Glide and Statamic 4.0+."*

For Designers/Editors:

*"This adds a drag-and-drop fieldtype for responsive images, letting you:

• Define multiple image versions (e.g., portrait on mobile, landscape on desktop) without manual cropping.
• Set custom aspect ratios (e.g., 16:9 for heroes, 1:1 for thumbnails).
• Preview changes in real-time (live reload support). No code needed—just upload and configure in the Statamic control panel!"*