Sproutset: Our take on responsive images for Bedrock + Sage + Blade

showcase
, ,
1

Hey everyone!

We’ve been working on something we wanted to share with the community: Sproutset, a composer package for handling responsive images in projects using Bedrock + Sage + Blade.

This is actually our first step into creating open source software and giving back to the community. This package is inspired by mindkomm/timmy (which we use in our Timber/Twig projects) and wanted something similar for Blade templates.

Sproutset makes it easy to work with responsive images through a simple Blade component. Here’s what we’ve built in:

  • Blade component for clean and responsive image rendering

  • Flexible configuration for custom image sizes with srcset variants

  • Automatic image optimization using Spatie Image Optimizer

  • On-demand generation of missing image sizes

  • Optional AVIF conversion for modern image formats

  • WP-CLI command for batch optimization

  • Post type filtering to generate sizes only where needed

Image sizes are defined in config/sproutset-config.php:

'image_sizes' => [
    'hero_image' => [
        'width' => 1920,
        'height' => 1080,
        'crop' => true,
        'srcset' => [0.5, 2],              // 0.5x and 2x variants
        'show_in_ui' => 'Hero Image',
        'post_types' => ['post', 'page'],
    ],
],

Once configured, rendering responsive images is straightforward:

<x-sproutset::image 
  :id="$attachment_id" 
  size="hero_image" 
  alt="Hero banner"
  class="w-full h-auto"
/>

This will generate an tag like this:
html

<img 
  src="https://example.com/wp-content/uploads/image-1920x1080.jpg"
  srcset="https://example.com/wp-content/uploads/image-960x540.jpg 960w,
          https://example.com/wp-content/uploads/image-1920x1080.jpg 1920w,
          https://example.com/wp-content/uploads/image-3840x2160.jpg 3840w"
  sizes="auto, (max-width: 1920px) 100vw, 1920px"
  alt="Hero banner"
  width="1920"
  height="1080"
  class="w-full h-auto"
  loading="lazy"
  decoding="async"
/>

We’re currently at v0.1.0-beta.1. While it’s still a work in progress, we wanted to share it with the community and get feedback. Since this is our first open source project, we’re still learning and would really appreciate any feedback, suggestions, or contributions. Whether it’s bug reports, feature ideas, documentation improvements, or code contributions.

GitHub: https://github.com/webkinder/sproutset
Packagist: https://packagist.org/packages/webkinder/sproutset

7 Likes