Please, how can I make my sprite in good quality on small screens? How can I make in 2x?

Example: i.imgur.com/6aUpvok.png and in 2x: i.imgur.com/aF739W3.png

My sprite: i.imgur.com/lo6JQ1d.png


  • You make a 1x version and a 2x version (and a 3x version if supporting iPhone 6). There's not really much more to it than that. – DA01 Jan 26 '15 at 20:36

It's not really something you can just do at the end. It's something you need to account for from the moment you edit the first graphic.

You need to know at the start how many resolutions you need to support. If that's impossible, as in it hasn't been decided but the show must go on, then you should simply work with the largest size that might be needed once it's decided.

You only need to make the sprite once. The important detail is that you should make it at the largest size you'll need. With that document already created at the largest sizes you'll need, you merely need to downscale to all the smaller sizes when you save, which is very easy.

The reason you don't want to create the graphics at the smallest size and scale up, is because when you scale up, it will stretch the graphic and approximate (guess) missing data, creating a more and more pixelated result the more that you increase the size. When scaling down, it doesn't have to guess to fill in data, it just has to discard excess data and retain what's necessary for that size.

The solution is to create the sprite at the largest size (highest resolution) you'll need, and then scale down when saving for all the smaller (lower resolution) sizes.

| improve this answer | |

Use an svg for a sprite. Then you don't have to worry about resolution. Especially if your artwork is simple enough to have a small file size.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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