PHPackages                             chitosystems/silverstripe-retina-images - 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. chitosystems/silverstripe-retina-images

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

chitosystems/silverstripe-retina-images
=======================================

An add-on for adaptive images.

01811[4 PRs](https://github.com/chitosystems/silverstripe-retina-images/pulls)PHP

Since Jun 3Pushed 4y ago1 watchersCompare

[ Source](https://github.com/chitosystems/silverstripe-retina-images)[ Packagist](https://packagist.org/packages/chitosystems/silverstripe-retina-images)[ RSS](/packages/chitosystems-silverstripe-retina-images/feed)WikiDiscussions master Synced 1mo ago

READMEChangelogDependenciesVersions (1)Used By (0)

Retina images
=============

[](#retina-images)

An add-on for adaptive images
-----------------------------

[](#an-add-on-for-adaptive-images)

Allows support for high-resolution displays by automatically creating different assets representing the same image. It specifies bitmapped images by adding a srcset attribute to the img element, as specified by the W3C draft

It does it out the box on through the template, WYSIWYG requires a modification to your getCMSFields() method.

Older browsers require a polyfill. [All modern browsers support the tag](http://caniuse.com/#feat=srcset)

**Only resized images** will be have adaptive images generated, for example `$Image.paddedImage(50)`. There's no point in upscaling native images, but you can force halving images changing the boolean on `$forceretina` in `RetinaImage.php`. Note this will half the size of every non resized image.

Usage
-----

[](#usage)

- Install the add-on
- run ?flush=1 on your page
- done! time for a beer

WYSIWYG support
---------------

[](#wysiwyg-support)

You'll need to modify your `getCMSFields()` function. `create()` a \\HtmlEditorField isntead of using `new`, there's a custom class that will modify its behaviour. In most cases you'll only need to do this once in your Page.php file:

```
$fields->removeFieldFromTab('Root.Main', 'Content');
$fields->addFieldToTab('Root.Main',
	HtmlEditorField::create('Content', _t('SiteTree.HTMLEDITORTITLE', 'Content', 'HTML editor title')),
	'Metadata'
);

```

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

[](#how-it-works)

When creating a generated image it creates three different images, scaled up to the following factors: 1.0x, 1.5x, and 2.0x. The default generated image is also created, which is used as the src attribute. These image urls are then placed into the srcset tag.

Tweaking the variables
----------------------

[](#tweaking-the-variables)

The yml config has two variables, qualityDegrade and qualityCap. qualityDegrade is the percentage per ratio to degrade by as the images get bigger. A qualityDegrade of 30 will degrade a 2x image by 30% (with a default quality of 75% it will be 45%). qualityCap is there to make sure you don’t go too low.

There are plenty of online resources that describe why lowering the quality is a good idea as the images get larger.

srcset Polyfills
----------------

[](#srcset-polyfills)

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community11

Small or concentrated contributor base

Maturity29

Early-stage or recently created project

 Bus Factor1

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

### Community

Maintainers

![](https://www.gravatar.com/avatar/ba299e8dab149af3724d210cac955daefb129bb61829cbe5f05a8ad64626e873?d=identicon)[patjnr](/maintainers/patjnr)

---

Top Contributors

[![torleif](https://avatars.githubusercontent.com/u/67215?v=4)](https://github.com/torleif "torleif (10 commits)")[![patjnr](https://avatars.githubusercontent.com/u/435055?v=4)](https://github.com/patjnr "patjnr (8 commits)")[![camfindlay](https://avatars.githubusercontent.com/u/367847?v=4)](https://github.com/camfindlay "camfindlay (1 commits)")

### Embed Badge

![Health badge](/badges/chitosystems-silverstripe-retina-images/health.svg)

```
[![Health](https://phpackages.com/badges/chitosystems-silverstripe-retina-images/health.svg)](https://phpackages.com/packages/chitosystems-silverstripe-retina-images)
```

###  Alternatives

[milon/barcode

Barcode generator like Qr Code, PDF417, C39, C39+, C39E, C39E+, C93, S25, S25+, I25, I25+, C128, C128A, C128B, C128C, 2-Digits UPC-Based Extention, 5-Digits UPC-Based Extention, EAN 8, EAN 13, UPC-A, UPC-E, MSI (Variation of Plessey code)

1.5k13.3M39](/packages/milon-barcode)[bkwld/croppa

Image thumbnail creation through specially formatted URLs for Laravel

510496.0k23](/packages/bkwld-croppa)[goat1000/svggraph

Generates SVG graphs

132849.6k3](/packages/goat1000-svggraph)[cohensive/embed

Media Embed (for Laravel or as a standalone).

120370.4k](/packages/cohensive-embed)[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[humanmade/tachyon-plugin

Rewrites WordPress image URLs to use Tachyon

87338.5k2](/packages/humanmade-tachyon-plugin)

PHPackages © 2026

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