Exporting Images in Multiple Resolutions Simultaneously

It’s always nice to see design tooling evolve to accommodate modern needs. Let’s look at an example of that: image exporting. Designers and developers spend loads of time exporting images. The design work often happens in software designed for designing, and assets from that design are exported for use when building out that design elsewhere.

High density displays have complicated this process a bit. Mobile and web developers now need to produce image assets in multiple resolutions to accommodate different types of screens. On the web, that’s a particularly important task that is vital for web performance.

Graphics such as this one (via imgix) do a good job of driving that concept home:

url.png

We don’t need to go into all the HTML syntax possibilities of responsive images here. The picturefill homepage does a good job of that. Instead, let’s assume we’re going to do the bare minimum in using responsive images by providing just a 1x and 2x version via srcset.

<img src="example.png" 
     srcset="example@2x.png 2x"
     alt="example" >

The same kind of thing is possible in CSS.

Now the question is: how do we get those two different versions of our image? In the past, we might have had to manually resize things in the design software and export one at a time to get what we need.

This is what I mean: It’s nice to see design software evolve so we don’t have to do that anymore! Let’s look at a few examples.

Exporting from Adobe Photoshop

Say we’ve designed a thing we need in those two sizes:

iwannaberesponsive1

If we go to File > Export As… this is what we’ll see (in the Creative Cloud 2017 version):

iwannaberesponsive2

This gives us the opportunity to adjust the export format and size and whatnot before actually saving. This is also where we can take the opportunity to tell Photoshop to export multiple versions. We can ask for a 2x version by clicking the “+” and choosing the options we want.

Screen Shot 2016-12-15 at 1.18.57 PM.png

Remember that Photoshop is often for working with raster/bitmap graphics, so scaling up might not be a great idea (loss of quality). Instead your design documents might start out at 2x, and you’d export at 1x (for “2x”) and 0.5x (for “1x”).

Photoshop will export them together when you click Export All…

Screen Shot 2016-12-15 at 1.22.17 PM.png

It’s not always that you want to export the entire document in Photoshop. If you’re interested in only exporting a particular layer, just know that all these same options apply to that, so you get to the exporting screen via the Layers palette.

Screen Shot 2016-12-15 at 1.24.31 PM.png

Exporting from Adobe Illustrator

Illustrator’s export is understandably similar, but also a bit more sophisticated. In a good way! The equivalent here is File > Export > Export for Screens… This gives us the opportunity to export the entire document and have all the same multiple-file-export options as we saw in Photoshop.

Screen Shot 2016-12-15 at 3.31.47 PM.png

But also note the Assets tab. This allows us to export any bit of the document we’d like to export. Could be anything. An individual object or any grouping of objects. You define these in the new Asset Export panel.

asset-panel.gif

You can export right from that panel (convenient!) or, next time you go to File > Export > Export for Screens…, everything you’ve set up there will be available.

Screen Shot 2016-12-15 at 3.37.02 PM.png

Adobe has a fun little demonstration GIF as well:

smart-export.gif

Exporting from Sketch

Sketch has always had a very nice system for exporting. It’s similar to what we just looked at in Illustrator, in that any given element or group can be exportable. You select what you’d like to be exportable in the sidebar and click Make Exportable in the bottom right.

sketch-exportable.gif

There, you’ll have all the options for exporting into multiple files at multiple resolutions.

Exporting from Affinity Designer

Affinity Designer has perhaps the most robust exporting abilities. First, it has this concept of “personas” when using the app. They have to do with how you’re using the app at the moment. If you’re designing, you likely have it in the Draw Persona. When you’re exporting, you switch over to the Export Persona.

export-persona.gif

Exporting happens from Slices, which can be anything. You can make an object or group of object a slices. Or you can draw a totally arbitrary box to be a slice.

Once you have it set up how you like, you can export individual slices as needed or export them all at once.

Screen Shot 2016-12-15 at 4.04.06 PM.png

If a video is your thing, it’s all explained pretty well here:

Affinity Designer 1.5 – Exporting: Multiple Outputs from a Single Slice from MacAffinity on Vimeo.

Comments

  • chestyle

    This can be really simple with a service like sirv.com

  • Nice tutorial Chris!

    You can even go one step further and avoid exporting images altogether. Upload the original image to an image transformation service like Sirv and it’ll be automatically served at the right size for the device.


    The resizing is done on demand and images are delivered in WebP (if the browser supports it), so file-size is smaller. For retina devices, images are automatically delivered in hi-res.

    If needed, images can also be cropped and canvas increased, allowing an image to be delivered in any size or aspect ratio required by the users device.

    I’m one of the developers of Sirv.

Related Articles