# Using Image Sprites, the right way

By Andrew Kordampalos · Originally posted on Tumblr on April 16, 2011: <https://blog.andrewckor.com/post/4642747382>

In this article, I will not taught you how to use image Sprites but how to use them correct!

As you already know the right way to create a lightweight and fast sprite image is to put all small images and graphic parts in one image. A lot of designers (including me) stuff the sprite image a lot and they didn’t leave whitespace between images, this is good if you see your website from a pc.

But have you ever see your (extra stuffed sprite image) website from a mobile device like iPad or iPhone? If you don’t, then in the following images you will realize that the method mentioned above is completely wrong!

## Let’s see some famous websites from my iPad:

### [www.mediatemple.net](http://www.mediatemple.net)

[

![](https://andrewckor.com/writing/using-image-sprites-the-right-way/1.webp)

](https://andrewckor.com/uploads/media_temple.jpg)

### [www.dmdthebook.com](http://www.dmdthebook.com)

[

![](https://andrewckor.com/writing/using-image-sprites-the-right-way/2.webp)

](https://andrewckor.com/uploads/ideabook.jpg)

### [www.fancybox.net](http://www.fancybox.net)

[

![](https://andrewckor.com/writing/using-image-sprites-the-right-way/3.webp)

](https://andrewckor.com/uploads/fancybox.jpg)

So, can you see those “1 pixel” lines? That’s the problem! Mobile devices, because of scaling effect that doing to achieve the best presentation of a web page, they can’t render the absolute dimensions of an element. If your images inside the sprite image are too close you will have that ugly “1 pixel” line.

## The solution

Yes of course there is a really easy solution; place your images in such a way that the minimum distance between them are 1-2 pixels, like the sprite image below:

![](https://andrewckor.com/writing/using-image-sprites-the-right-way/4.webp)

That’s it, hope you guys enjoyed this article!