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.
- 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;
- While srcset_factory can process animated GIFs, the results will not be what you expect. 😃
- Download
srcset_factory/archive/master.zip
from GitHub; - Extract
srcset_factory.php
from the archive and move it to a permanent location on your system. I run it from a folder namedHelpers
in my home directory; - 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; - 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; - Make the
srcset_factory.php
script executable, eg.:chmod a+x ~/Helpers/srcset_factory.php
.
/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.
I recommend that you use srcset_factory in conjunction with the Picturefill polyfill until browser support catches up with srcset
.
- Configuration.
- Automated "srcset" Image Factory (workflow).
- Matt Wilcox's Adaptive Images — (CC BY 3.0)
- Responsive Images Community Group
- Automation
The license for srcset_factory.php, by Jonathan Hollin, is the
Creative Commons Attribution-ShareAlike 4.0 International License.