Weave Code
Statamic Responsive Images Laravel Package
spatie/statamic-responsive-images
Statamic addon that generates responsive images and variants on demand. Includes a “responsive” fieldtype for art-directed images with configurable breakpoints, ratios, and fit options, plus an Antlers tag to render the correct sources for each breakpoint.
Responsive images for Statamic 3
Frequently asked questions about Statamic Responsive Images
- How do I install spatie/statamic-responsive-images in a Laravel/Statamic project?
- Run `composer require spatie/statamic-responsive-images` in your project root. The package integrates automatically with Statamic 4.0+ and requires no manual configuration for basic usage. Ensure your Statamic version is 4.0 or higher, as this package has a hard dependency on it.
- Does this package work with Statamic’s existing Assets fieldtype or Media Library?
- Yes, it replaces or augments existing image fieldtypes. You’ll configure a new `responsive` fieldtype in your blueprints (YAML/JSON) and use it alongside or instead of the standard `assets` fieldtype. The package provides a dedicated fieldtype with art direction controls for breakpoints, ratios, and fits.
- What Laravel/Statamic versions does spatie/statamic-responsive-images support?
- The package is designed for **Statamic 4.0+** and leverages Laravel’s underlying architecture (e.g., service container, Blade templating). It does not support Statamic 3.x or earlier. Always check the [GitHub releases](https://github.com/spatie/statamic-responsive-images/releases) for version-specific notes before upgrading.
- How does responsive image generation impact server performance?
- By default, images are generated on-demand (lazy generation) to reduce storage overhead. For high-traffic sites, pre-generating variants via `php artisan statamic:assets:optimize` or a cron job is recommended. Monitor server resources during peak traffic, especially if using dynamic `srcset` generation without caching.
- Can I customize breakpoints or add WebP support for responsive images?
- Yes, breakpoints are configurable in your fieldtype blueprint (e.g., `sm`, `md`, `lg`). For WebP support, ensure your Statamic asset storage backend (local/S3) supports the format and configure Glide presets accordingly. The package uses Statamic’s built-in image manipulation, so WebP must be enabled in your Glide setup.
- What happens if a browser doesn’t support srcset or Picturefill?
- The package outputs standard `<picture>` and `<source>` tags with fallbacks to `<img>` for unsupported browsers. No additional polyfill (like Picturefill) is required, as modern browsers handle `srcset` natively. For legacy support, ensure your Statamic templates include a basic `<img>` fallback within the `<picture>` element.
- How do I migrate existing image fields to use responsive images?
- Replace your existing `assets` fieldtype with the `responsive` fieldtype in your blueprints. Update templates to use the new `{{ asset->responsiveImage() }}` method instead of `{{ asset->url }}`. Test incrementally by replacing one fieldtype at a time, then roll out gradually using Statamic’s fieldtype blueprints to enforce consistency across collections.
- Does this package support custom storage backends like S3 or local directories?
- Yes, the package works with Statamic’s default storage backends (local, S3, etc.). However, if you’ve customized your asset storage (e.g., non-standard adapters), verify compatibility by testing image uploads and responsive variant generation. The package relies on Statamic’s asset system, so backend-specific issues may require adjustments.
- Can I use this package with a frontend framework like React or Vue?
- Absolutely. The package outputs standard HTML (`<picture>`, `<source>`, `<img>`) with `srcset` attributes, making it framework-agnostic. For React/Vue, fetch the responsive image URL via Statamic’s API or template tags (e.g., `{{ asset->responsiveImage() }}`) and pass it to your components.
- Are there alternatives to spatie/statamic-responsive-images for Laravel/Statamic?
- For Statamic, alternatives include custom Glide presets with manual `srcset` generation or third-party addons like **Statamic Image Optimizer**. For Laravel-only projects, consider **spatie/laravel-medialibrary** or **intervention/image**. However, this package is the most integrated solution for Statamic 4.0+, offering a dedicated fieldtype and seamless art direction controls.
Weaver
How can I help you explore Laravel packages today?