PHPackages                             netresearch/nr-image-optimize - 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. netresearch/nr-image-optimize

ActiveTypo3-cms-extension[Image & Media](/categories/media)

netresearch/nr-image-optimize
=============================

On-demand image optimization for TYPO3 with processed delivery, WebP and AVIF variants, and responsive srcset ViewHelpers.

2.2.1(6mo ago)2570↓43.8%[2 PRs](https://github.com/netresearch/t3x-nr-image-optimize/pulls)GPL-3.0-or-laterPHPCI passing

Since Aug 21Pushed 2mo ago1 watchersCompare

[ Source](https://github.com/netresearch/t3x-nr-image-optimize)[ Packagist](https://packagist.org/packages/netresearch/nr-image-optimize)[ RSS](/packages/netresearch-nr-image-optimize/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (7)Dependencies (13)Versions (16)Used By (0)

[![php](https://camo.githubusercontent.com/8c92b16e968a5dc0114a85b95d5bb0bca106d23d32396edc3baf2f4aae0c4667/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532307c253230382e332532307c253230382e342d626c75652e737667)](https://camo.githubusercontent.com/8c92b16e968a5dc0114a85b95d5bb0bca106d23d32396edc3baf2f4aae0c4667/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532307c253230382e332532307c253230382e342d626c75652e737667) [![typo3](https://camo.githubusercontent.com/ff624ed071afbc7085dcd4f99f2358379f8284ba14ae6891eab075f69c55929f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332e342d6f72616e67652e737667)](https://camo.githubusercontent.com/ff624ed071afbc7085dcd4f99f2358379f8284ba14ae6891eab075f69c55929f/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332e342d6f72616e67652e737667) [![license](https://camo.githubusercontent.com/82dbc665347888bf88afcab2b3a48cfd53bb774d23325196509cd9919b4cecd2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6e657472657365617263682f7433782d6e722d696d6167652d6f7074696d697a65)](https://github.com/netresearch/t3x-nr-image-optimize/blob/main/LICENSE) [![ci](https://github.com/netresearch/t3x-nr-image-optimize/actions/workflows/ci.yml/badge.svg)](https://github.com/netresearch/t3x-nr-image-optimize/actions/workflows/ci.yml/badge.svg) [![release](https://camo.githubusercontent.com/da1e768764cee2187e6ce13fdc30cb68158af91c20e1ec7cd1c948f971252f66/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6e657472657365617263682f7433782d6e722d696d6167652d6f7074696d697a653f736f72743d73656d766572)](https://github.com/netresearch/t3x-nr-image-optimize/releases/latest)

🚀 TYPO3 Extension: nr\_image\_optimize
--------------------------------------

[](#-typo3-extension-nr_image_optimize)

The `nr_image_optimize` extension is an advanced TYPO3 extension for image optimization. It provides lazy image processing, modern formats, responsive images, and performance optimizations.

### 🎨 Features

[](#-features)

- 🚀 **Lazy Image Processing**: Images are processed only when requested.
- 🎨 **Modern Format Support**: WebP and AVIF with automatic fallback.
- 📱 **Responsive Images**: Built-in ViewHelper for srcset generation.
- ⚡ **Performance Optimized**: Middleware-based processing for efficiency.
- 🔧 **Intervention Image**: Powered by the Intervention Image library.
- 📊 **Core Web Vitals**: Improves LCP and overall page performance.
- 🧹 **Backend Cleanup**: Remove generated variants via "Remove Temporary Assets" in the TYPO3 Maintenance module.

### 🛠️ Requirements

[](#️-requirements)

- PHP 8.2, 8.3, or 8.4
- TYPO3 13.4
- Intervention Image library (installed via Composer automatically)

### 📌 Recommended Extensions

[](#-recommended-extensions)

-

### 💾 Installation

[](#-installation)

#### Via Composer (recommended)

[](#via-composer-recommended)

```
composer require netresearch/nr-image-optimize
```

#### Manual Installation

[](#manual-installation)

1. Download the extension from the TYPO3 Extension Repository
2. Upload to `typo3conf/ext/`
3. Activate the extension in the Extension Manager

### ⚙️ Configuration

[](#️-configuration)

The extension works out of the box with sensible defaults. Images are automatically optimized when accessed via the `/processed/` path.

#### ViewHelper Usage

[](#viewhelper-usage)

```
{namespace nr=Netresearch\NrImageOptimize\ViewHelpers}

```

#### Supported Parameters

[](#supported-parameters)

- `file`: Image file resource
- `width`: Target width in pixels
- `height`: Target height in pixels
- `quality`: JPEG/WebP quality (1-100)
- `sizes`: Responsive sizes attribute
- `format`: Output format (auto, webp, avif, jpg, png)

#### 📐 Source Set Configuration

[](#-source-set-configuration)

Different source sets can be defined for each media breakpoint via the `set` attribute:

```

```

#### 🖼️ Render Modes

[](#️-render-modes)

Two render modes are available for the `SourceSetViewHelper`:

- **cover**: Default mode, resizes images to fully cover the provided width and height.
- **fit**: Resizes images so they fit within the provided width and height.

```

```

### 📷 Responsive width-based srcset

[](#-responsive-width-based-srcset)

The extension provides a responsive, width-based `srcset` generation with a `sizes` attribute for improved responsive image handling. This feature is optional and can be enabled per usage.

#### New Parameters

[](#new-parameters)

`responsiveSrcset`- Type: `bool`
- Default: `false`
- Description: Enable width-based responsive `srcset` generation instead of density-based (`x2`) `srcset`.

`widthVariants`- Type: `string|array`
- Default: `'480, 576, 640, 768, 992, 1200, 1800'`
- Description: Width variants for responsive `srcset` (comma-separated string or array).

`sizes`- Type: `string`
- Default: `(max-width: 576px) 100vw, (max-width: 768px) 50vw, (max-width: 992px) 33vw, (max-width: 1200px) 25vw, 1250px`
- Description: `sizes` attribute for responsive images.

`fetchpriority`- Type: `string`
- Allowed values: `high`, `low`, `auto`
- Default: `''` (omitted)
- Description: Adds the native HTML attribute `fetchpriority` to the generated `` tag to hint the browser about resource prioritization. Any other value will be ignored.

#### Usage Examples

[](#usage-examples)

Enable responsive srcset with default values:

```

```

Custom width variants:

```

```

Custom sizes attribute:

```

```

#### Output Comparison

[](#output-comparison)

Legacy mode (`responsiveSrcset=false` or not set):

```

```

Responsive mode (`responsiveSrcset=true`):

```