CSS Sprites Browser Rendering

CSS Sprites browser rendering

on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states.

You have to moderate your temptation towards pushing all your sprites to one huge image - think about which elements are part of the website/webapp UI and put them into one sprite file (those will be displayed all the time, while browsing). Then try to group rest of the sprites into website section-specific images, and use them as needed. Downside is slightly extended load time (additional HTTP requests), but user experience while viewing/scrolling page will be much higher.

CSS Sprites - Cross-Browser Rendering

It is supposed to work in all browsers, including IE6. Although a while back I've experienced problems with it in IE6 in a very specific circumstance which I unfortunately don't recall in detail anymore. The symptom was that the sprite was wrongly positioned, but I at least recall that it was an easy fix. So whenever you run into problems, just ask a question here and we'll help. I can recommend IETester to test the IE6 behaviour.

For the case you're still interested, I'd recommend you this article.

CSS Sprite does not render correct in browser

The problem is your nav is only 700px wide.
You have 10 nav items that are each 64px (width) + 22px (margin) wide, this totals to 860px wide, 160px too large.
I'd recommend decreasing the right-margin of nav > div elements, or increasing the width of your nav.
Lastly, your last div in the nav probably doesn't need a right-margin, so use something like this:
nav > div:last-child {
margin-right: 0;
}

Using CSS Sprites: Does replicating one large image many times burden the client?

Regarding the memory use, please see this post and this post

So the challenge is to chop up that long image into 114 small images
on the client.

What is the need to chop the long image. I would keep it as a single image and use as CSS sprite and show all images.

If your images has fixed dimension a JavaScript loop could render all images in the page. Or you could use a tool like this to get animal position and have it in a css file. But I would prefer the JS loop method.

The code would be something like this

var imageItem = "";
var x = 0;
for (var i = 0; i < 144, i++) {

  imageItem += "<li style='background-position: "+ x + " 0'></li>";
  x = x + 100; // this is the width of the each image
}

someElement.innerHtml = "<ul class='img-container'>" + imageItem + "</ul>";

In CSS

.img-container li {
  width: 100px;
  height: 70px;
  background-image : url('../your-long-image.jpg');
  background-repeat: no-repeat;
}

See this example, I am using only a single image, I am changing the offset position to show different locations from the same image.

var imageItem = "";var x = 0;for (var i = 0; i < 3; i++) {            imageItem += "<li style='background-position: "+ x + "px  0'>ss</li>";      x = x - 125; // this is the width of the each image}
    document.getElementById("container").innerHTML = "<ul class='img-container'>" + imageItem + "</ul>";

.img-container li {      width: 125px;      height: 200px;      border: 1px solid green;      background-image : url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/intermediary/f/c9702304-c06d-4500-90b7-b6b6168093f8/db9n9km-ee485eb1-1ecc-4cd8-b845-f16900bde9e0.png');      background-repeat: no-repeat;      float:left;      list-style: none;    }

<div id="container"></div>

CSS sprite - showing part of another image when zooming

Different browsers may use different algorithms for rounding numbers and rendering images in certain cases. You could read some articles about it, for example — this and this.

So, when your zoom is 150% and you have 29x29px image, your browser is need to render 43.5x43.5px image. How each version of each browser will round it? We don't know, maybe 43x43px, maybe 44x44px. There is article about sprites and zoom.

I create new code snippet with two pairs of images. The first pair uses your image sprite and the second — my. I increased the Facebook image size from 29x29px to 30x30px. Try to zoom it. You can see they have problems on different zoom ratio (the first — on 150%, the second — on 110%—125%).

JSFiddle

.fb29 {    width: 29px;    height: 29px;    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;    background-size: 29px;}
.sun29 {    margin-top: 10px;    width: 16px;    height: 16px;    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;    background-size: 29px;}
.fb30 {    margin-top: 10px;    width: 30px;    height: 30px;    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;    background-size: 30px;}
.sun30 {    margin-top: 10px;    width: 16px;    height: 16px;    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;    background-size: 30px;}

<div class="fb29"></div><div class="sun29"></div>
<div class="fb30"></div><div class="sun30"></div>

CSS sprite not appearing in Firefox, but displaying in Chrome

You're using img tags with background-image. I honestly don't know what browser support is for that, but it's a bad idea. Instead use divs. You'll also need to make the styles forcing it to inline block. Alternatively, you could go with something like font awesome/glyphicon's strategy of ::before styling, usually used with spans.

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
.outdoor {
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -14px -110px;
    width: 20px;
    height: 20px;
    display:inline-block;
}
.parking{
    background-image: url(sprites.png);
    background-repeat: no-repeat;
    background-position: -15px -60px ;
    width: 20px;
    height: 20px;
    display:inline-block;
}
</style>
</head>

<body>
    <h1>Hello Sprites.. Why are you appearing in Chrome, but not in Firefox? Please appear</h1>
    <div class="outdoor" ></div>
    <div class="parking" ></div>

</body>

</html>

Sprite Fallback

Little confused. The sprite is not rendering but is displaying the whole image? Do you see all the sprites at once, or none at all?

You might use browser detection for opera mini (and any other mobile browsers where the rendering is not working as expected).

Add the desired text to the sprite element, and use a large negative text-indent to hide the contents.

Disable the indent and background images for unsupported browsers.

allbrowsers.css

div.sprite {
  width:20px;
  height:20px;
  background:transparent url(img/mysprites.gif) no-repeat scroll top left;
  overflow:hidden;
  text-indent:-5000px;
}
#first_sprite {
  background-position:20px 40px;
}

mobilebrowsers.css

div.sprite {
  background-image:none;
  text-indent:0;
}

page

<div id="first_sprite" class="sprite">Alternate text</div>

sprites vs image slicing

Pros:

• It's far easier on the server to serve a single large image than many small ones.
• It's (slightly) faster for a web browser to load such an image.
• Browsers only load images as they needs them - if you are using multiple images in a rollover, the browser would "pause" the first time you roll over the element. This can be solved using sprites, because there is only one image to load.

Cons:

• It's kind of a pain to code (more so than using multiple images at least)

using SVG sprites in Opera is rendering badly

Opera is known to cause issues with svg as background images, especialy for sprites. Since you are using fallback png, do that also for opera with opera specific css like this.

doesnotexist:-o-prefocus, .sprites {
  background: url('/images/sprites.png') no-repeat 0px 0px;
    }

If you find a solution to fix opera issue with svg sprite please post it here.

Some CSS sprites not showing on Firefox, Chrome and IE?

The problem is with the images themselves. Since they have .jpg extensions, the browsers try to treat them as JPEG files, which they are not. They are PNG files.

Solution: rename them to .png, or convert them to actual JPEG files.

---

Related Topics