PHPackages                             otago/silverstripe-retinaimages - 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. otago/silverstripe-retinaimages

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

otago/silverstripe-retinaimages
===============================

An add-on for adaptive images.

v6.0(3mo ago)65.6k4BSD-3-ClausePHP

Since Jan 21Pushed 3mo ago3 watchersCompare

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

READMEChangelog (10)Dependencies (1)Versions (13)Used By (0)

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

[](#retina-images)

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

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

Makes your images look crisp and sexy on high DPI devices.

Usage
-----

[](#usage)

- run `composer require otago/silverstripe-retinaimages`
- run ?flush=1 on your page

All images used in your WYSIWYG editor should now be retina upscaled images using srcset. you can check this by inspecting your ![]() tags

Using retina in the template
----------------------------

[](#using-retina-in-the-template)

If you want retina images in your template, you specify this with prefixing all image functions with retina.

For example, **$Image.Fill(50,50)** becomes **$Image.RetinaFill(50,50)**

```
// Scaling functions
$Image.RetinaScaleWidth(150) // Returns a 150x75px image
$Image.RetinaScaleMaxWidth(100) // Returns a 100x50px image (like ScaleWidth but prevents up-sampling)
$Image.RetinaScaleHeight(150) // Returns a 300x150px image (up-sampled. Try to avoid doing this)
$Image.RetinaScaleMaxHeight(150) // Returns a 200x100px image (like ScaleHeight but prevents up-sampling)
$Image.RetinaFit(300,300) // Returns an image that fits within a 300x300px boundary, resulting in a 300x150px image (up-sampled)
$Image.RetinaFitMax(300,300) // Returns a 200x100px image (like Fit but prevents up-sampling)

// Warning: This method can distort images that are not the correct aspect ratio
$Image.RetinaResizedImage(200, 300) // Forces dimensions of this image to the given values.

// Cropping functions
$Image.RetinaFill(150,150) // Returns a 150x150px image resized and cropped to fill specified dimensions (up-sampled)
$Image.RetinaFillMax(150,150) // Returns a 100x100px image (like Fill but prevents up-sampling)
$Image.RetinaCropWidth(150) // Returns a 150x100px image (trims excess pixels off the x axis from the center)
$Image.RetinaCropHeight(50) // Returns a 200x50px image (trims excess pixels off the y axis from the center)

// Padding functions (add space around an image)
$Image.RetinaPad(100,100) // Returns a 100x100px padded image, with white bars added at the top and bottom
$Image.RetinaPad(100, 100, CCCCCC) // Same as above but with a grey background

```

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

[](#how-it-works)

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

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.

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

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

[](#srcset-polyfills)

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

###  Health Score

52

—

FairBetter than 96% of packages

Maintenance80

Actively maintained with recent releases

Popularity30

Limited adoption so far

Community13

Small or concentrated contributor base

Maturity70

Established project with proven stability

 Bus Factor1

Top contributor holds 96.3% 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 ~332 days

Recently: every ~626 days

Total

12

Last Release

107d ago

Major Versions

1.0.3 → v4.02018-09-28

v4.10.1 → v5.02024-08-06

v5.0 → v6.02026-01-26

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/67215?v=4)[torleif](/maintainers/torleif)[@torleif](https://github.com/torleif)

---

Top Contributors

[![torleif](https://avatars.githubusercontent.com/u/67215?v=4)](https://github.com/torleif "torleif (26 commits)")[![jeffrey-nz](https://avatars.githubusercontent.com/u/6498155?v=4)](https://github.com/jeffrey-nz "jeffrey-nz (1 commits)")

---

Tags

silverstripeimagesretina

### Embed Badge

![Health badge](/badges/otago-silverstripe-retinaimages/health.svg)

```
[![Health](https://phpackages.com/badges/otago-silverstripe-retinaimages/health.svg)](https://phpackages.com/packages/otago-silverstripe-retinaimages)
```

###  Alternatives

[bigfork/htmleditorsrcset

Simple srcset integration with SilverStripe’s HTMLEditorField

1025.4k4](/packages/bigfork-htmleditorsrcset)

PHPackages © 2026

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