PHPackages                             joassanon/image-optimizer - 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. [Image & Media](/categories/media)
4. /
5. joassanon/image-optimizer

ActiveLibrary[Image & Media](/categories/media)

joassanon/image-optimizer
=========================

On-demand image optimization endpoint for Laravel

1.2.0(2d ago)00MITPHPPHP >=8.0CI passing

Since Jun 7Pushed 2d agoCompare

[ Source](https://github.com/joassanon/image-optimizer)[ Packagist](https://packagist.org/packages/joassanon/image-optimizer)[ RSS](/packages/joassanon-image-optimizer/feed)WikiDiscussions main Synced 2d ago

READMEChangelog (2)Dependencies (7)Versions (1)Used By (0)

Image Optimizer / Optimized Image
=================================

[](#image-optimizer--optimized-image)

This repository contains two related packages:

- `@joassanon/optimized-image` — a React component for responsive optimized image delivery
- `joassanon/image-optimizer` — a Laravel image optimization endpoint that serves `/img`

The React component is built to work with the Laravel backend in the same repository. It generates responsive `srcset`/`sizes` markup and calls `/img` with query parameters.

What is included
----------------

[](#what-is-included)

- `src/OptimizedImage.tsx` — React component
- `src/index.ts` — package exports
- `src/OptimizedImage.test.tsx` — Vitest-powered test suite
- `composer.json` + Laravel service provider + controller — backend endpoint implementation

Installation
------------

[](#installation)

### React package

[](#react-package)

```
npm install @joassanon/optimized-image
```

or

```
yarn add @joassanon/optimized-image
```

### Laravel backend

[](#laravel-backend)

Install the Laravel package as a dependency:

```
composer require joassanon/image-optimizer
```

If your Laravel app does not auto-discover providers, register it manually:

```
Vendor\\ImageOptimizer\\ImageOptimizerServiceProvider::class,
```

Publish config if required:

```
php artisan vendor:publish --provider="Vendor\\ImageOptimizer\\ImageOptimizerServiceProvider" --tag=config
```

Backend endpoint
----------------

[](#backend-endpoint)

The backend exposes a single route at `/img`.

Supported query params:

- `src` — local image path, e.g. `images/products/shoe.jpg`
- `w` — width in pixels
- `q` — quality (10–95)
- `fm` — optional output format (`webp`, `avif`, `png`, `jpeg`)
- `fit` — optional fit mode, defaults to `max`

> Important: the current Laravel endpoint only accepts `src` values beginning with `images/` and expects the file to exist on the configured filesystem disk.

React usage
-----------

[](#react-usage)

```
import { OptimizedImage } from '@joassanon/optimized-image';

export default function ProductImage() {
  return (

  );
}
```

### Notes

[](#notes)

- `src` should be a local storage path, not an external URL, when using the bundled Laravel backend.
- The component builds `/img?src=...&w=...&q=...` for each width.
- If `format` is omitted, the backend negotiates the format from the browser `Accept` header.

Props
-----

[](#props)

PropTypeDefaultDescription`src``string`requiredLocal image path passed to `/img`, e.g. `images/photo.jpg``alt``string``''`Alternative text for the image`widths``number[]``[320, 480, 768, 1024, 1366, 1600, 1920]`Widths used to generate `srcset``sizes``string``100vw`Value for the `sizes` attribute`quality``number``75`Optimizer quality setting`format``string``undefined`Optional output format sent as `fm``priority``boolean``false`When `true`, uses `loading="eager"``placeholder``stringnull``null``className``string``''`CSS class name for the rendered image`style``React.CSSProperties``{}`Inline styles for the rendered imageBuild & test
----------------

[](#build--test)

```
npm install
npm run build
npm test
```

Peer dependencies
-----------------

[](#peer-dependencies)

- `react@>=18`
- `react-dom@>=18`

License
-------

[](#license)

MIT

###  Health Score

37

—

LowBetter than 81% of packages

Maintenance100

Actively maintained with recent releases

Popularity0

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity36

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% 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

Unknown

Total

1

Last Release

2d ago

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/43215267?v=4)[Joas Sanon](/maintainers/joassanon)[@joassanon](https://github.com/joassanon)

---

Top Contributors

[![joassanon](https://avatars.githubusercontent.com/u/43215267?v=4)](https://github.com/joassanon "joassanon (19 commits)")

###  Code Quality

TestsPest

### Embed Badge

![Health badge](/badges/joassanon-image-optimizer/health.svg)

```
[![Health](https://phpackages.com/badges/joassanon-image-optimizer/health.svg)](https://phpackages.com/packages/joassanon-image-optimizer)
```

###  Alternatives

[intervention/image-laravel

Laravel Integration of Intervention Image

1558.1M158](/packages/intervention-image-laravel)[bkwld/croppa

Image thumbnail creation through specially formatted URLs for Laravel

506511.0k27](/packages/bkwld-croppa)[code16/sharp

Laravel Content Management Framework

78762.6k7](/packages/code16-sharp)[fleetbase/core-api

Core Framework and Resources for Fleetbase API

1232.2k16](/packages/fleetbase-core-api)

PHPackages © 2026

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