PHPackages                             kyoushu/pufferfish.js - 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. kyoushu/pufferfish.js

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

kyoushu/pufferfish.js
=====================

Container size based responsive image loader

1.0.5(10y ago)3561MITJavaScript

Since May 27Pushed 10y ago1 watchersCompare

[ Source](https://github.com/Kyoushu/Pufferfish.js)[ Packagist](https://packagist.org/packages/kyoushu/pufferfish.js)[ RSS](/packages/kyoushu-pufferfishjs/feed)WikiDiscussions master Synced today

READMEChangelog (9)DependenciesVersions (11)Used By (0)

Pufferfish.js
=============

[](#pufferfishjs)

[![Build Status](https://camo.githubusercontent.com/e3aa9ac2911ef23c20bfd293950a827e69bdaa873a0ce26d7d21ca327dc7927b/68747470733a2f2f7472617669732d63692e6f72672f4b796f757368752f507566666572666973682e6a732e7376673f6272616e63683d6d6173746572)](https://travis-ci.org/Kyoushu/Pufferfish.js)

A responsive image loader which uses the size of an image's containing element to determine which image should be loaded.

Public Methods
--------------

[](#public-methods)

### $.pufferfish.init(context, settings)

[](#pufferfishinitcontext-settings)

Initialises images which have been added to a page asynchronously.

### $.pufferfish.reflow()

[](#pufferfishreflow)

Force Pufferfish to re-calculate image sources using current container dimensions.

Settings
--------

[](#settings)

### onChange

[](#onchange)

Type: function(event)

Called before the src attribute of an image is changed

### afterChange

[](#afterchange)

Type: function(event)

Called after the src atribute of an image is changed. Does not run if event.preventDefault() is called in onChange()

Objects
-------

[](#objects)

### PufferfishImageChangeEvent

[](#pufferfishimagechangeevent)

#### Properties

[](#properties)

##### element

[](#element)

Type: object | jQuery element

##### newImageSrc

[](#newimagesrc)

Type: string

##### oldImageSrc

[](#oldimagesrc)

Type: string

#### Methods

[](#methods)

##### preventDefault()

[](#preventdefault)

Stops Pufferfish from setting the image src attribute

Usage Example
-------------

[](#usage-example)

Pufferfish is initialised for an entire page in the following way

```
$(document).pufferfish();

```

Specific elements can also be initialised

```
$('.image-container').pufferfish();

```

Settings can also be passed

```
$(document).pufferfish({
    'onChange': function(event){
        // Do something here
    }
});

```

The data-pufferfish attribute contains definitions of images to be de displayed for a range of container widths. The first matching definition is always used.

A single definition uses the following syntax

```
[image/url/goes/here.jpg, (min-width: 100, max-width: 200)]

```

You can use the dimension constraints "min-width" and "max-width" to define break points. One or both of these must be used in each definition.

Multiple definitions are separated with commas

```
[image1.jpg, (min-width: 100, max-width: 199)], [image2.jpg, (min-width: 200)]

```

When used with an ![]() element, it looks like this.

```

```

The image loader can be used to change different element attributes by using data-pufferfish-src-attr.

In the following example, the image URL is applied to the poster attribute in a

```

```

You can also override the default behaviour of Pufferfish by using the onChange callback. For example, you could have elements with the class responsive-background change their background images.

```

    Title

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer egestas tincidunt ipsum eu porta.
        Nam pretium scelerisque urna et porttitor. Suspendisse commodo, magna id iaculis luctus, quam enim
        bibendum felis, vel volutpat lacus ante eget lectus.

    $(document).pufferfish({
        'onChange': function(event){

            if(event.element.is('.responsive-background')){
                event.preventDefault();
                event.element.css({
                    'background-image': 'url(' + event.newImageSrc + ')'
                })
            }

        }
    })

```

###  Health Score

31

—

LowBetter than 68% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity13

Limited adoption so far

Community8

Small or concentrated contributor base

Maturity69

Established project with proven stability

 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

Every ~78 days

Recently: every ~99 days

Total

10

Last Release

3657d ago

Major Versions

0.0.4 → 1.0.02014-11-28

### Community

Maintainers

![](https://www.gravatar.com/avatar/9a3b4f2acc5f46d8ce4639b0f5a3548d75a6de9f12643869c284175a64cc0cc2?d=identicon)[Kyoushu](/maintainers/Kyoushu)

---

Top Contributors

[![Kyoushu](https://avatars.githubusercontent.com/u/535916?v=4)](https://github.com/Kyoushu "Kyoushu (28 commits)")

---

Tags

loaderresponsive

### Embed Badge

![Health badge](/badges/kyoushu-pufferfishjs/health.svg)

```
[![Health](https://phpackages.com/badges/kyoushu-pufferfishjs/health.svg)](https://phpackages.com/packages/kyoushu-pufferfishjs)
```

###  Alternatives

[nicolafranchini/venobox

Responsive JavaScript modal window plugin, touch swipe gallery

7106.8k](/packages/nicolafranchini-venobox)[mindkomm/timmy

Advanced image manipulation for Timber.

17735.6k](/packages/mindkomm-timmy)[spacecatninja/imager-x

Ninja powered image transforms.

29390.0k23](/packages/spacecatninja-imager-x)[heyday/silverstripe-responsive-images

Configure and send a series of image size options to the client without loading any resources until a media query can be executed.

5387.7k6](/packages/heyday-silverstripe-responsive-images)[urlbox/screenshots

Use urlbox to easily generate website thumbnail screenshots from a URL

14250.4k](/packages/urlbox-screenshots)[schnitzler/fluid-styled-responsive-images

Enables creation of responsive images for fluid styled content elements.

279.7k1](/packages/schnitzler-fluid-styled-responsive-images)

PHPackages © 2026

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