Sourcesetr logo

I hate wasting time. Recently I spent some time showing off HTML5's picture element to a new client. I also wrote some new presentation notes for one of Drexel's web authoring classes focused on the concept of responsive images. As I was working through examples, I was frustrated by the amount of time it was taking to build the various image files I needed. I was even more surprised by how most of the design software I am using does not include quick way to export a single image to an array of sizes/resolutions.

Sketch has some flexibility, allowing you to setup multiple exports of an artboard or element group at various sizes or image formats. It works if I'm working in Sketch, although it takes more time to setup the export rules than I like to spend.

For non vector images, I end up in Adobe Photoshop more often than not. Adobe has built in some tools for exporting layers to files, with slick naming conventions to save a layer to multiple file formats/sizes. To me, it's clunky at best. It works but the setup takes to long, and I've never been able to memorize the naming convention to a point that it becomes second nature. By the time I look it up, I've already wasted to much time.

I decided to built a utility to hopefully speed up my workflow in the case where I have a single image that I need made available at multiple sizes for the web. Enter Sourcesetr.

Let's say I have three images:

I want to have a copy of each graphic optimized for a minimum screen width of 56.25em (~900px) and at 18.75em (~300px). I also want 2x versions for retina support. So four total exports, for each of my three images. Twelve total image files.

Rather than go through the export process multiple times in Photoshop, I export one copy of each image at a high res. For this example I think I used 2000px wide for each.

Once I have my source file for each of the three images, I configure Sourcesetr to export image files for me @900px and @300px wide. The script takes each source file, does the scaling for 1x and 2x versions of each image at each size I've requested. In less than three seconds I have all twelve of the images I need to build my responsive picture element on my webpage. The script also generates some sample code to help with implementation.

  <picture>
    <source media="(min-width: 900px)"
        srcset="sourcesetr-001-900.jpg 1x, sourcesetr-001-900@2x.jpg 2x">
    <source media="(min-width: 300px)"
        srcset="sourcesetr-001-300.jpg 1x, sourcesetr-001-300@2x.jpg 2x">
    <img src="sourcesetr-001.jpg" alt="">
  </picture>

  <picture>
    <source media="(min-width: 900px)"
        srcset="sourcesetr-002-900.jpg 1x, sourcesetr-002-900@2x.jpg 2x">
    <source media="(min-width: 300px)"
        srcset="sourcesetr-002-300.jpg 1x, sourcesetr-002-300@2x.jpg 2x">
    <img src="sourcesetr-002.jpg" alt="">
  </picture>

  <picture>
    <source media="(min-width: 900px)"
        srcset="sourcesetr-003-900.jpg 1x, sourcesetr-003-900@2x.jpg 2x">
    <source media="(min-width: 300px)"
        srcset="sourcesetr-003-300.jpg 1x, sourcesetr-003-300@2x.jpg 2x">
    <img src="sourcesetr-003.jpg" alt="">
  </picture>

After adding my responsive images to my page and testing, I quickly realize that I need another copy of the image files at ~600px. Quick fix - I can update the config file of Sourcesetr to crank out another batch of image files at the size I need and quickly add them to my project. No fumbling with Photoshop layer names. No shoehorning another export into Sketch's list of files. The goal here is simple and fast.

Is it perfect? Of course not. This doesn't work in cases where you need art direction for the various versions. But in those cases you're probably setting up multiple artboards anyway so you're managing each set of exports separately. This tools is for cases where the image ratio and content is going to stay the same for all versions.

Sourcesetr works with .jpg and .png files, and will crank out 1x and 2x versions of each file. Other formats and sizes could easily be added as needed.

The script and full documentation is available on Github and the script has a Twitter account for quick support.