I'm struggling to export a header image for multiple devices in Sketch.

I design mobile first and I will take a large image and scale it down for the mobile header. I do the same for tablet, and website. Each device type will get its own header image based on the device.

But, how do I export this image and ensure that it's suitable for retina displays? If I export the following header image it ends up losing its "sharpness" for any device in-between mobile and tablet. Also exporting all 3 manually seems like a pain is there a plugin or a way to do this in Sketch?

enter image description here

I'm still learning Sketch and I had a hard time Googling this so asking here.

1 Answer 1


Multiple export sizes for an artboard in Sketch

I think I know what you're trying to do. The closest thing that you could get would be to create multiple Export sizes — and even save them as a Slice Preset.

With the style you have with the angled accent, it would probably be easier on the development side to have the source image, and apply a mask or overlaying image to get the effect you'd like.

Sketch Layer Preferences - Flatten bitmap to @2x option selected

Along this same thread, having Flatten Bitmaps set to @2x will make any image you import at ½ the size, so if you export it at 2x, you won't have any quality loss.

For example, if you imported a 1000x600 image, its layer dimensions would be resized to 500x300 within Sketch.

I hope this answered your question (even though it might not be the answer you wanted to hear).

  • 1
    Actually this answer hits the nail on the head! Commented Jan 23, 2018 at 0:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.