Introduction

A PHP script to automate the production, from a single source image, of a set of images that the HTML srcset attribute requires. I wrote srcset_factory to act as a component part of a srcset production workflow, but you can use it as a standalone script where appropriate.

Given a source image — of the types: GIF, JPEG or PNG — and, optionally, a destination directory, srcset_factory will generate different sized versions of the source image with widths that match breakpoints and/or ratios (@2x, @3x, etc.) specified in its $config array.

Given a source directory, srcset_factory will process each image file (GIF, JPEG or PNG) that it finds within.

It will optionally group the images it generates in sub-directories, by size.

The script handles translucency correctly with GIF and PNG images.

Aside from the images it produces, srcset_factory will also output a template-based snippet of HTML, that you can pipe to your system clipboard, for pasting directly into your markup or CMS.

The program is non-destructive (the source image is always preserved) although, in some circumstances, it will rename source images to avoid file-system conflicts.

Limitations

1. Performance: srcset_factory is a PHP script and uses the GD library to process images. It can be time-consuming to process a large volume of images;
2. While srcset_factory can process animated GIFs, the results will not be what you expect. 😃

Installation

1. Download srcset_factory/archive/master.zip from GitHub;
2. Extract srcset_factory.php from the archive and move it to a permanent location on your system. I run it from a folder named Helpers in my home directory;
3. Open srcset_factory.php in your text editor and adjust the $config variables to suit your use case. If you are unsure, the default configuration gives you a useable starting point. See: Configuration for further details;
4. You may need to adjust the shebang line to fit your system (eg: if which php returns /usr/bin/php then the shebang line should read #!/usr/bin/php). However, in most cases, this won't be necessary;
5. Make the srcset_factory.php script executable, eg.: chmod a+x ~/Helpers/srcset_factory.php.

Usage

/path/to/srcset_factory.php --source=/path/to/srcset_drop_folder [--destination=/path/to/destination_folder]

Where source is the path to an image or folder and (optionally) destination is the path to a folder. If you do not specify a destination folder then the script will save its output to the source folder.

Polyfill

I recommend that you use srcset_factory in conjunction with the Picturefill polyfill until browser support catches up with srcset.

See Also:

• Configuration.
• Automated "srcset" Image Factory (workflow).

Inspiration

• Matt Wilcox's Adaptive Images — (CC BY 3.0)
• Responsive Images Community Group
• Automation

Licence

The license for srcset_factory.php, by Jonathan Hollin, is the
Creative Commons Attribution-ShareAlike 4.0 International License.