Menu
Usually if I create CSS sprites, I line them all up next to each other with no spacing at all. For example if all the images are 10x10 pixels I would put them at the coordinates 0,10; 0,20; 10,10; 10,20.
But this seems to cause problems in certain circumstances. For example during page zooming and on mobile you can see the edge of the next sprite along.
Why does this problem occur, is it to do with rounding errors? Is simply adding spacing around the sprites the best way to avoid the problem? If so, is there a minimum or recommended amount of spacing we should have between the icons in the sprite image?
356
An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth.
CSS Sprites are a collection of images that are combined into a single file that an HTML document can access. These images are then called into use within the HTML code to be displayed on the website.
To create a sprite, we make use of CSS properties and set the combined image as the background of an element then we position it using the background-position property. Let us understand this with two different examples: Example 1: Let us use the GeeksforGeeks logo to understand sprites in this example.
Combining images using CSS sprites reduces the number of round-trip requests made, which can yield performance gains for your page. This method mostly refers to small images like icons, logos, and other graphical elements that can be combined into a single image and then positioned by CSS on the page.
Sprite Bleeding may occur on zoom due to rounding, especially in IE (the old versions simply round to the nearest integer, e.G. a calculated value of 20.343px would be rendered as 20px).
Since the rounding error is never bigger than 1px, with a padding of 1px on all sides you can already fix that problem.
Modern browsers use a method called sub pixel rendering to mitigate this problem.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
