PHPackages                             pktharindu/statamic-flexipics - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. pktharindu/statamic-flexipics

ActiveLibrary

pktharindu/statamic-flexipics
=============================

v0.1.2(12mo ago)0552[2 PRs](https://github.com/pktharindu/statamic-flexipics/pulls)PHPCI passing

Since May 31Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/pktharindu/statamic-flexipics)[ Packagist](https://packagist.org/packages/pktharindu/statamic-flexipics)[ GitHub Sponsors](https://github.com/pktharindu)[ RSS](/packages/pktharindu-statamic-flexipics/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (3)Dependencies (8)Versions (7)Used By (0)

Statamic Flexipics
==================

[](#statamic-flexipics)

> Statamic Flexipics is a powerful Statamic addon that generates responsive images using the HTML5 `` element with advanced breakpoint support, multiple image formats, and flexible configuration options.

[![Statamic 4.0+](https://camo.githubusercontent.com/2cc64d3b07e997a278a3800cc454b8e9382ec21957956193dd1d6cfc7f0fa078/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d342e302b2d4646323639453f7374796c653d666f722d7468652d6261646765266c696e6b3d68747470733a2f2f73746174616d69632e636f6d)](https://camo.githubusercontent.com/2cc64d3b07e997a278a3800cc454b8e9382ec21957956193dd1d6cfc7f0fa078/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f53746174616d69632d342e302b2d4646323639453f7374796c653d666f722d7468652d6261646765266c696e6b3d68747470733a2f2f73746174616d69632e636f6d)[![Packagist](https://camo.githubusercontent.com/0128fba0cf3cfda569984bae11520d663c15b61d3edafad0d31a4d0c278154dd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f706b74686172696e64752f73746174616d69632d666c657869706963732e7376673f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/0128fba0cf3cfda569984bae11520d663c15b61d3edafad0d31a4d0c278154dd/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f706b74686172696e64752f73746174616d69632d666c657869706963732e7376673f7374796c653d666f722d7468652d6261646765)[![Packagist](https://camo.githubusercontent.com/8630faecf43f14ff8132a1448bd7880ed47cdfaa70fd51afcec295153dec7ab4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f706b74686172696e64752f73746174616d69632d666c657869706963732e7376673f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/8630faecf43f14ff8132a1448bd7880ed47cdfaa70fd51afcec295153dec7ab4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f706b74686172696e64752f73746174616d69632d666c657869706963732e7376673f7374796c653d666f722d7468652d6261646765)[![GitHub](https://camo.githubusercontent.com/5c5a46aaf571266c67b6504eda7e0131d7d610917c5f2e0e29020aade9bed029/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f706b74686172696e64752f73746174616d69632d666c657869706963732e7376673f7374796c653d666f722d7468652d6261646765)](https://camo.githubusercontent.com/5c5a46aaf571266c67b6504eda7e0131d7d610917c5f2e0e29020aade9bed029/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f706b74686172696e64752f73746174616d69632d666c657869706963732e7376673f7374796c653d666f722d7468652d6261646765)

Features
--------

[](#features)

Statamic Flexipics provides a comprehensive solution for responsive images in your Statamic projects:

- **Advanced Breakpoint Support**: Define custom breakpoints for different screen sizes with precise control over image dimensions
- **Multiple Output Formats**: Generate images in WebP and other formats with automatic format selection based on browser support
- **Flexible Configuration**: Extensive configuration options for breakpoints, image sizes, and more
- **Lazy Loading**: Built-in support for lazy loading images to improve page performance
- **Multiple Output Modes**: Generate HTML or JSON output for different use cases
- **Orientation Control**: Support for both landscape and portrait orientations
- **Automatic Alt Text**: Intelligent handling of alt text with configurable formatting
- **Device Pixel Ratio Support**: Generate images for different device pixel ratios (1x, 2x, etc.)
- **Size Multipliers**: Create multiple image sizes based on configurable multipliers
- **Caption Support**: Add captions to your images with ease
- **Minimal Changes Required**: Drop-in replacement for existing image tags with minimal template changes

How to Install
--------------

[](#how-to-install)

You can search for this addon in the `Tools > Addons` section of the Statamic control panel and click **install**, or run the following command from your project root:

```
composer require pktharindu/statamic-flexipics
```

How to Use
----------

[](#how-to-use)

### Basic Usage

[](#basic-usage)

The simplest way to use Flexipics is with the `picture` tag:

```
{{ picture:featured_image }}
```

This will generate a responsive `` element with default settings, where `featured_image` is a field handle containing the image.

### Advanced Usage

[](#advanced-usage)

You can customize the output with various parameters:

```
{{ picture:featured_image
    class="my-custom-class"
    alt="{featured_image:alt ?? 'Custom alt text'}"
    lazy="true"
    sm="640"
    md="768|auto"
    lg="1024|16:9"
    xl="1280|4:3|100vw"
    default="320|16:9|100vw"
    output="html"
}}
```

### Parameters

[](#parameters)

The image is specified using the field handle in the tag name (e.g., `picture:featured_image`).

ParameterDescriptionRequiredDefault`src`URL or an image field handleYesNone`class`CSS class to add to the imageNoNone`alt`Custom alt text (falls back to asset's alt text)NoAsset's alt text`caption`HTML caption to display with the imageNoNone`lazy`Enable/disable lazy loading (true/false)No`true``orientation`Image orientation (landscape/portrait)No`landscape``default`Default size for the image (format: `width|ratio|sizes`)NoNoneBreakpoint parameters (`sm`, `md`, `lg`, `xl`, `2xl`)Configure sizes for specific breakpointsNoNone`output`Output format (html, json)No`html`Configuration
-------------

[](#configuration)

Flexipics comes with a comprehensive configuration file that you can publish and customize:

```
php artisan vendor:publish --tag=statamic-flexipics-config
```

This will create a `config/statamic/flexipics.php` file with the following options:

### Breakpoints

[](#breakpoints)

Define the screen sizes at which your responsive images should change:

```
'breakpoints' => [
    'default' => 0,
    'sm' => 640,
    'md' => 768,
    'lg' => 1024,
    'xl' => 1280,
    '2xl' => 1536,
],
```

### Size Multipliers

[](#size-multipliers)

Define the multipliers for generating different image sizes:

```
'size_multipliers' => [1, 1.5, 2],
```

When using the default multipliers and requesting an image in 300px, the tag generates sizes in 300px, 450px, and 600px.

### Device Pixel Ratios

[](#device-pixel-ratios)

Define for which device pixel ratios (DPR) sources should be generated when not using the `sizes` attribute:

```
'dpr' => [1, 2],
```

### Default Filetype

[](#default-filetype)

Set the default image format for generating sources:

```
'default_filetype' => 'webp',
```

### Minimum Image Width

[](#minimum-image-width)

Define the smallest width to use for image processing:

```
'min_width' => 300,
```

### Lazy Loading Default

[](#lazy-loading-default)

Enable or disable lazy loading by default:

```
'lazy_loading' => true,
```

### Original Format Fallback

[](#original-format-fallback)

Enable or disable using the original format as a fallback when the desired format is not available:

```
'use_original_format_as_fallback' => false,
```

### Alt Text Formatting

[](#alt-text-formatting)

Ensure alt text always ends with a period:

```
'alt_fullstop' => true,
```

Performance Benefits
--------------------

[](#performance-benefits)

Flexipics is designed with performance in mind:

- **Optimized Image Loading**: By generating responsive images with appropriate sizes for each device, Flexipics reduces bandwidth usage and improves page load times.
- **WebP Support**: Default WebP format provides better compression than JPEG or PNG while maintaining high quality.
- **Lazy Loading**: Built-in lazy loading ensures images are only loaded when they enter the viewport, improving initial page load performance.
- **Efficient Caching**: Generated images are cached for optimal performance.
- **Minimal Overhead**: The package is designed to be lightweight and efficient, with minimal impact on your site's performance.

Why Choose Flexipics?
---------------------

[](#why-choose-flexipics)

- **Complete Control**: Fine-grained control over image sizes, formats, and breakpoints.
- **Developer-Friendly**: Simple API with sensible defaults that can be easily customized.
- **Modern Standards**: Uses modern HTML5 `` element for maximum browser compatibility.
- **Statamic Integration**: Seamlessly integrates with Statamic's asset system.
- **Flexible Output**: Multiple output formats (HTML, JSON) for different use cases.
- **Extensively Tested**: Comprehensive test suite ensures reliability.

Contributing
------------

[](#contributing)

Contributions are welcome! Please see [CONTRIBUTING.md](CONTRIBUTING.md) for details.

License
-------

[](#license)

Statamic Flexipics is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.

###  Health Score

34

—

LowBetter than 77% of packages

Maintenance69

Regular maintenance activity

Popularity17

Limited adoption so far

Community9

Small or concentrated contributor base

Maturity35

Early-stage or recently created project

 Bus Factor1

Top contributor holds 88.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~178 days

Total

3

Last Release

361d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/51d2bb584a1f3efc43ac90fb55096e933aae31a63deb72c33f65a5dfd7807cad?d=identicon)[pktharindu](/maintainers/pktharindu)

---

Top Contributors

[![pktharindu](https://avatars.githubusercontent.com/u/23132672?v=4)](https://github.com/pktharindu "pktharindu (8 commits)")[![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)](https://github.com/dependabot[bot] "dependabot[bot] (1 commits)")

###  Code Quality

TestsPest

Static AnalysisPHPStan

### Embed Badge

![Health badge](/badges/pktharindu-statamic-flexipics/health.svg)

```
[![Health](https://phpackages.com/badges/pktharindu-statamic-flexipics/health.svg)](https://phpackages.com/packages/pktharindu-statamic-flexipics)
```

###  Alternatives

[statamic/statamic

Statamic

824170.4k](/packages/statamic-statamic)[statamic-rad-pack/runway

Eloquently manage your database models in Statamic.

135192.6k5](/packages/statamic-rad-pack-runway)[statamic/ssg

Generate static sites with Statamic.

254302.4k](/packages/statamic-ssg)[statamic/eloquent-driver

Allows you to store Statamic data in a database.

125598.8k7](/packages/statamic-eloquent-driver)[statamic/seo-pro

65440.7k](/packages/statamic-seo-pro)[laravel-lang/locales

Basic functionality for working with localizations

134.5M12](/packages/laravel-lang-locales)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)