PHPackages                             daun/processwire-image-placeholders - 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. daun/processwire-image-placeholders

ActiveProcesswire-module[Image & Media](/categories/media)

daun/processwire-image-placeholders
===================================

A ProcessWire module to generate low-quality image placeholders (LQIP) for smoother lazyloading

0.5.0(9mo ago)66841MITPHPPHP >=8.2

Since Oct 19Pushed 9mo ago1 watchersCompare

[ Source](https://github.com/daun/processwire-image-placeholders)[ Packagist](https://packagist.org/packages/daun/processwire-image-placeholders)[ Docs](https://github.com/daun/processwire-image-placeholders)[ RSS](/packages/daun-processwire-image-placeholders/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (8)Dependencies (4)Versions (10)Used By (0)

ProcessWire Image Placeholders
==============================

[](#processwire-image-placeholders)

**A ProcessWire module to generate image placeholders for smoother lazyloading.**

Supports [ThumbHash](https://evanw.github.io/thumbhash/), [BlurHash](https://blurha.sh/), and average color placeholders.

[![Example image placeholders](assets/example-placeholder.png)](assets/example-placeholder.png)

Why use image placeholders?
---------------------------

[](#why-use-image-placeholders)

Low-Quality Image Placeholders (LQIP) are used to improve the perceived performance of sites by displaying a **small, low-quality version of an image** while the high-quality version is being loaded. The LQIP technique is often used in combination with progressive lazyloading.

How it works
------------

[](#how-it-works)

This module will automatically generate a small blurry image placeholder for each image that is uploaded to fields configured to use them. In your frontend templates, you can access the image placeholder as a data URI string to display while the high-quality image is loading. See below for markup examples.

Placeholder types
-----------------

[](#placeholder-types)

The module supports generating various types of image placeholders. The recommended type is `ThumbHash` which encodes most detail and supports transparent images.

### ThumbHash

[](#thumbhash)

[ThumbHash](https://evanw.github.io/thumbhash/) is a newer image placeholder algorithm with improved color rendering and support for transparency.

### BlurHash

[](#blurhash)

[BlurHash](https://blurha.sh/) is the original placeholder algorithm, developed at Wolt. It currently has no support for alpha channels and will render transparency in black.

### Average color

[](#average-color)

Calculates the average color of the image.

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

[](#installation)

Install the module using composer from the root of your ProcessWire installation.

```
composer require daun/processwire-image-placeholders
```

Open the admin panel of your site and navigate to `Modules` → `Site` → `ImagePlaceholders` to finish installation.

Configuration
-------------

[](#configuration)

You'll need to configure your image fields to generate image placeholders.

`Setup` → `Fields` → `[images]` → `Details` → `Image placeholders`

There, you can choose the type of placeholder to generate. If you're installing the module on an existing site, you can also choose to batch-generate placeholders for any existing images.

[![Field settings dialog](assets/field-settings.png)](assets/field-settings.png)

Usage
-----

[](#usage)

Accessing an image's `lqip` property will return a data URI string of its placeholder.

```
$page->image->lqip; // data:image/png;base64,R0lGODlhEAAQAMQAA
```

Accessing it as a method allows setting a custom width and/or height of the placeholder.

```
$page->image->lqip(300, 200); // 300x200px
```

### Markup

[](#markup)

Using a lazyload library like [lazysizes](https://github.com/aFarkas/lazysizes) or [vanilla-lazyload](https://github.com/verlok/vanilla-lazyload), you can show a placeholder image by using its data URI as `src` of the image.

```