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!
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.
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:
That’s it, hope you guys enjoyed this article!
