PHPackages                             firstinternet/wordpress-responsive-image - 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. [Utility & Helpers](/categories/utility)
4. /
5. firstinternet/wordpress-responsive-image

ActiveLibrary[Utility & Helpers](/categories/utility)

firstinternet/wordpress-responsive-image
========================================

Generate responsive Wordpress images. Supports .webp, lazyload, bootstrap.

v1.5.5(1y ago)011.9k—5.6%proprietaryPHPPHP >=5.3.2

Since Mar 6Pushed 1y ago1 watchersCompare

[ Source](https://github.com/firstinternet/Wordpress-Responsive-Image)[ Packagist](https://packagist.org/packages/firstinternet/wordpress-responsive-image)[ Docs](https://bitbucket.org/firstint/wordpress-responsive-image)[ RSS](/packages/firstinternet-wordpress-responsive-image/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)DependenciesVersions (16)Used By (0)

First Internet Responsive Image Class
=====================================

[](#first-internet-responsive-image-class)

Overview
--------

[](#overview)

The responsive image class was built by a team of developers at [First Internet](https://www.firstinternet.co.uk).

The `ResponsiveImage` class is a PHP utility designed to generate responsive images for WordPress. It supports multiple image sources, lazy loading, WebP format, and dynamic sizing based on Bootstrap-like breakpoints.

Features
--------

[](#features)

- **Responsive Image Handling**: Supports multiple image sizes for different breakpoints.
- **Lazy Loading**: Optionally enables lazy loading for performance optimization.
- **WebP Support**: Automatically replaces image formats with WebP versions if enabled.
- **Custom Attributes**: Allows adding custom attributes like classes, alt text, and inline styles.
- **Automatic Sizing**: Can determine image sizes dynamically based on Bootstrap column classes.
- **WordPress Integration**: Works with WordPress media library functions.

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

[](#installation)

Ensure that your WordPress theme or plugin includes this class and that you have the necessary WordPress functions available.

1. Copy the `ResponsiveImage.php` file into your theme or plugin.
2. Include it in your project:

```
require_once 'path/to/ResponsiveImage.php';
```

Usage
-----

[](#usage)

### Basic Example

[](#basic-example)

```
use FirstInternet\ResponsiveImage;

$image = new ResponsiveImage(123, 'medium');
$image->generate();
```

This outputs a responsive `` element for the image with ID `123`, using the `medium` size.

### Customizing Output

[](#customizing-output)

```
$image = new ResponsiveImage(123, 'large');
$image->setClass('custom-class')
      ->setAlt('An example image')
      ->lazyLoad()
      ->webp()
      ->generate();
```

### Using `get()` Instead of `generate()`

[](#using-get-instead-of-generate)

If you need to store the image markup in a variable:

```
$imageMarkup = (new ResponsiveImage(123, 'full'))->get();
echo $imageMarkup;
```

Methods
-------

[](#methods)

### `__construct(int $imageId, string $size = 'full')`

[](#__constructint-imageid-string-size--full)

- **$imageId** *(int)* - WordPress attachment ID.
- **$size** *(string, optional)* - Image size (default: `'full'`).

### `setSources(array $sources)`

[](#setsourcesarray-sources)

Sets different image sources for various breakpoints.

```
$image->setSources([
    'sm' => 'small-image',
    'md' => 'medium-image',
    'lg' => 'large-image'
]);
```

### `lazyLoad(string $lazyClass = 'lazy')`

[](#lazyloadstring-lazyclass--lazy)

Enables lazy loading by default with the `'lazy'` class.

```
$image->lazyLoad('custom-lazy-class');
```

### `webp()`

[](#webp)

Enables WebP format support.

```
$image->webp();
```

### `setClass(string $class)`

[](#setclassstring-class)

Adds custom classes to the `` element.

```
$image->setClass('img-fluid rounded');
```

### `setAlt(string $alt)`

[](#setaltstring-alt)

Sets the image alt text.

```
$image->setAlt('Descriptive alt text');
```

### `setAttributes(array $attributes)`

[](#setattributesarray-attributes)

Adds custom attributes to the `` element.

```
$image->setAttributes([
    ['data-example', 'value'],
    ['aria-hidden', 'true']
]);
```

### `setSizes(string $sizes)`

[](#setsizesstring-sizes)

Sets the `sizes` attribute manually.

```
$image->setSizes('(max-width: 600px) 100vw, 50vw');
```

### `autoSizes(string $classes)`

[](#autosizesstring-classes)

Automatically calculates image sizes based on Bootstrap grid classes.

```
$image->autoSizes('col-md-6 col-lg-4');
```

### `generate()`

[](#generate)

Outputs the `` element directly.

### `get()`

[](#get)

Returns the `` element as a string.

Example Output
--------------

[](#example-output)

```

```

License
-------

[](#license)

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

---

This class provides a flexible way to manage responsive images in WordPress, improving performance and user experience.

For more information, visit [First Internet](https://www.firstinternet.co.uk).

###  Health Score

36

—

LowBetter than 82% of packages

Maintenance38

Infrequent updates — may be unmaintained

Popularity25

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity59

Maturing project, gaining track record

 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 ~110 days

Recently: every ~185 days

Total

15

Last Release

719d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/d7dec914273d256fba643628af692aaf91c205e10ff65eca75521115322cc037?d=identicon)[First Internet](/maintainers/First%20Internet)

---

Top Contributors

[![firstinternet](https://avatars.githubusercontent.com/u/7521573?v=4)](https://github.com/firstinternet "firstinternet (2 commits)")

---

Tags

lazy-loadinglazyloadwordpresswordpressWebplazyload

### Embed Badge

![Health badge](/badges/firstinternet-wordpress-responsive-image/health.svg)

```
[![Health](https://phpackages.com/badges/firstinternet-wordpress-responsive-image/health.svg)](https://phpackages.com/packages/firstinternet-wordpress-responsive-image)
```

###  Alternatives

[tgmpa/tgm-plugin-activation

TGM Plugin Activation is a PHP library that allows you to easily require or recommend plugins for your WordPress themes (and plugins).

1.8k222.5k13](/packages/tgmpa-tgm-plugin-activation)[aristath/kirki

Extending the WordPress customizer

1.3k73.0k4](/packages/aristath-kirki)[afragen/git-updater

A plugin to automatically update GitHub, Bitbucket, GitLab, or Gitea hosted plugins, themes, and language packs.

3.3k1.6k](/packages/afragen-git-updater)[justintadlock/hybrid-carbon

God-like post featured image script.

202.5k](/packages/justintadlock-hybrid-carbon)

PHPackages © 2026

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