PHPackages                             sahtepetrucci/responsive-retina-css-sprites - 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. sahtepetrucci/responsive-retina-css-sprites

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

sahtepetrucci/responsive-retina-css-sprites
===========================================

Responsive and retina-ready CSS sprites generator

v0.6.2(5y ago)035MITPHPPHP >=7.2

Since Jun 16Pushed 5y ago1 watchersCompare

[ Source](https://github.com/serdarcevher/responsive-retina-css-sprites)[ Packagist](https://packagist.org/packages/sahtepetrucci/responsive-retina-css-sprites)[ Docs](https://github.com/serdarcevher/responsive-retina-css-sprites)[ RSS](/packages/sahtepetrucci-responsive-retina-css-sprites/feed)WikiDiscussions master Synced 2d ago

READMEChangelogDependencies (1)Versions (14)Used By (0)

PHP Responsive Retina CSS Sprites Generator
===========================================

[](#php-responsive-retina-css-sprites-generator)

A responsive and retina ready CSS sprites generator. Built to be used with Laravel models, but can be used separately as well.

This tool:

- generates a single sprite image based on a (database) collection entries by using **ImageMagick** library,
- prepares a CSS file (including one unique class per icon),
- \[optionally\] creates a sample HTML file to demonstrate usage.

> 🙋 Generated sprites will be downscaled to look good on retina displays. So make sure using twice the size for iconWidth and iconHeight (use 64x64 if you want to display them as 32x32 icons).

Saying that, it is still possible to change CSS width/height values of the icons on the fly while keeping the background image obtained from the sprite.

Thus, you can define your own @media rules to use same sprites in different sizes if needed.

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

[](#installation)

```
composer require sahtepetrucci/responsive-retina-css-sprites
```

Usage
-----

[](#usage)

In order this to work, you'll need to provide a collection of objects including id and *icon* fields.

```
use Sahtepetrucci\SpritesGenerator\SpritesHandler;
$handler = new SpritesHandler();
$handler->generate($collection);
```

Example 1
---------

[](#example-1)

```
$collection = [
    (object)[
        'id' => 1,
        'name' => 'Item',
        'icon' => 'icons8-airport-100.png'
    ],
    (object)[
        'id' => 2,
        'name' => 'Another Item',
        'icon' => 'icons8-bus-100.png'
    ],
];

$handler->generate($collection);
$handler->createSampleHtml($collection); //optional
```

Output
------

[](#output)

**CSS**

```
/* Normal Resolution CSS /*/
.items-spr {
    display:inline-block;vertical-align:middle;
    background-image:url('../images/items-1x.png?t=1592435357');
    background-repeat:no-repeat;
    background-size:200% 100%;
    width:50px;height:50px;
    line-height:50px;
}

/* HD/Retina CSS /*/
@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
    .items-spr {
        background-image:url('../images/items-2x.png?t=1592435357');
    }
}

.items-spr-1{background-position:0% 0%}
.items-spr-2{background-position:100% 0%}

/* A total of 2 images are combined here. */
```

**HTML** (Optional)

```

```

Example 2 (Generating sprites in Laravel)
-----------------------------------------

[](#example-2-generating-sprites-in-laravel)

```
use Sahtepetrucci\SpritesGenerator\SpritesHandler;
...

$categories = Category::select('id','icon')->get();

$handler = new SpritesHandler();
$handler->name = 'categories';
$handler->inputDir = storage_path('app/public/images/categories');
$handler->outputDir = storage_path('app/public/sprites/categories');
$handler->iconWidth = 64;
$handler->iconHeight = 64;
$handler->generate($categories);

```

### Using sprites in Blade

[](#using-sprites-in-blade)

```

@foreach ($categories as $category)

    {{ $category->name }}

@endforeach
```

Sample icons are from [icons8.com](https://icons8.com).

###  Health Score

22

—

LowBetter than 22% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity7

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity47

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

Total

13

Last Release

2129d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/62bc9b620c214cd80256271769771e1bdcb9d2fa9229d13741133a2680b37608?d=identicon)[serdarcevher](/maintainers/serdarcevher)

---

Top Contributors

[![serdarcevher](https://avatars.githubusercontent.com/u/824239?v=4)](https://github.com/serdarcevher "serdarcevher (31 commits)")

---

Tags

cssgeneratorpngresponsiveiconspriteretina

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/sahtepetrucci-responsive-retina-css-sprites/health.svg)

```
[![Health](https://phpackages.com/badges/sahtepetrucci-responsive-retina-css-sprites/health.svg)](https://phpackages.com/packages/sahtepetrucci-responsive-retina-css-sprites)
```

###  Alternatives

[jkphl/iconizr

A PHP command line tool for converting SVG images to a set of CSS icons (SVG & PNG, single icons and / or CSS sprites) with support for image optimization and Sass output

4869.0k](/packages/jkphl-iconizr)[symfony/maker-bundle

Symfony Maker helps you create empty commands, controllers, form classes, tests and more so you can forget about writing boilerplate code.

3.4k111.1M568](/packages/symfony-maker-bundle)[matthiasmullie/minify

CSS & JavaScript minifier, in PHP. Removes whitespace, strips comments, combines files (incl. @import statements and small assets in CSS files), and optimizes/shortens a few common programming patterns.

2.0k30.5M336](/packages/matthiasmullie-minify)[sciactive/pnotify

Beautiful JavaScript notifications.

3.6k6.4k](/packages/sciactive-pnotify)[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)