A great approach but there is Some improvement opportunities

[Jitu]

SmartSprites is awesome :)
I used it in my personal web www.ashrafuzzaman.com
But I face only 2 issues for now
1) Using SmartSprites has decreased performance when the browser do
not hit cache.
I used sprite in a lot of places, so my sprite png has become 24K.
As I have used images in many css, the sprite image is also loaded
from them. So when I see the net statistics from firebug, I see that
the large sprite is called from the server more than one time and
every time the browser downloads it(as it is called parallelly), which
makes it slower to load.

2) I can allign the generated sprite vertically or horizontally. But
there are empty spaces that could be filled out intelligently. Is
there any way to do that?


Thanking,
A.K.M. Ashrafuzzaman
Software Engineer, Code71.
http://www.ashrafuzzaman.com/
Blog:http://jitu-blog.blogspot.com/

[Stanislaw Osinski]

Hi there,

SmartSprites is awesome :)
I used it in my personal web www.ashrafuzzaman.com

Glad you found the tool useful!
 

But I face only 2 issues for now
1) Using SmartSprites has decreased performance when the browser do
not hit cache.
   I used sprite in a lot of places, so my sprite png has become 24K.
As I have used images in many css, the sprite image is also loaded
from them. So when I see the net statistics from firebug, I see that
the large sprite is called from the server more than one time and
every time the browser downloads it(as it is called parallelly), which
makes it slower to load.

How are you testing the cache vs no-cache condition? If it's by disabling cache through e.g. Web Developer addon or Firebug or pressing Ctrl+F5, I've observed that the same image is indeed requested many times, which slows things down. I don't think the same is happening when the cache is enabled, but the image is simply not in cache. For some more real-world testing of your website performance, you may want to check http://www.webpagetest.org/

2) I can allign the generated sprite vertically or horizontally. But
there are empty spaces that could be filled out intelligently. Is
there any way to do that?

I'm not planning such a feature at the moment. It will be complicated coding-wise (thus time-consuming, error-prone etc.), while the gain is likely to be minimal in most designs. I've not done any experiments on this, but my rough guess is that the size of a PNG file wouldn't drop drastically if you rearrange some images to fill the empty spaces. If you have time to verify this, I'd be curious to know the result.

A more likely gain is in decreasing the browser's memory usage when rendering the sprite (empty spaces don't take up much in file size, but they do take space on the bitmap the browser allocates in the memory to display the image). In that case though, it's probably better to simply split one sprite into two or three sprites to eliminate the majority of empty spaces.

Cheers,

S.

[Jitu]

Thanks Stanislaw for your reply.
This is good point you noticed is the empty spaces for the browser.

Currently smartsprite generates code like these,

.white_corner .top_left {
background-image:url(images/structure.png);
background-position:0 top;
}
.white_corner .top_right {
background-image:url(images/structure.png);
background-position:-15px top;
}


I think it would load a lot faster if the image load was defined once,
like,

.white_corner .top_left, .white_corner .top_right{
background-image:url(images/structure.png);
}

.white_corner .top_left {
background-position:0 top;
}
.white_corner .top_right {
background-position:-15px top;

}




On Aug 15, 5:17 pm, Stanislaw Osinski <stac...@gmail.com> wrote:
> Hi there,
>
> SmartSprites is awesome :)
>
> > I used it in my personal webwww.ashrafuzzaman.com
>
> Glad you found the tool useful!
>
> > But I face only 2 issues for now
> > 1) Using SmartSprites has decreased performance when the browser do
> > not hit cache.
> >    I used sprite in a lot of places, so my sprite png has become 24K.
> > As I have used images in many css, the sprite image is also loaded
> > from them. So when I see the net statistics from firebug, I see that
> > the large sprite is called from the server more than one time and
> > every time the browser downloads it(as it is called parallelly), which
> > makes it slower to load.
>
> How are you testing the cache vs no-cache condition? If it's by disabling
> cache through e.g. Web Developer addon or Firebug or pressing Ctrl+F5, I've
> observed that the same image is indeed requested many times, which slows
> things down. I don't think the same is happening when the cache is enabled,
> but the image is simply not in cache. For some more real-world testing of

> your website performance, you may want to checkhttp://www.webpagetest.org/

[Stanislaw Osinski]

Hi there,

Currently smartsprite generates code like these,

.white_corner .top_left {
       background-image:url(images/structure.png);
       background-position:0 top;
}
.white_corner .top_right {
       background-image:url(images/structure.png);
       background-position:-15px top;
}


I think it would load a lot faster if the image load was defined once,
like,

.white_corner .top_left, .white_corner .top_right{
       background-image:url(images/structure.png);
}

.white_corner .top_left {
       background-position:0 top;
}
.white_corner .top_right {
       background-position:-15px top;

}

I've had this feature in mind for quite a while, but was waiting for someone to mention it :-) I've created a JIRA issue for it with some brief spec: http://issues.carrot2.org/browse/SMARTSPRITES-51.

One thing to stress here is that the main benefit of the above feature is decreasing the CSS file, not decreasing the number of requests. When browser caching is on, each sprite image will be loaded once, even if it's referenced multiple times in the CSS files. If you don't believe, check this out:

http://www.webpagetest.org/result/090816_2318/1/details/

Notice that on the waterfall view, each sprite image is loaded only once.

Cheers,

S.

[Jitu]

Thanks for adding that feature to the list. :)
I think it would make it greater.

But I think it depends on browser if it will call multiple request for
same image if defined more than once in css.
I tested that with Firefox 3.5 with firebug and it shows that same
image is being download more than once.
When I tested in chrome, I found that you are right :)

[Stanislaw Osinski]

Again, take a look at this branch: https://github.com/planetbeing/smartsprites, it does the optimized layout pretty well.

S.

On Thu, Aug 23, 2012 at 8:11 PM, marcomoscardini <ma...@evioo.com> wrote:

what about a simpler, but just as effective solution to add a pair of offset annotation(top-offset, left-offset) to allow for multiple columns/rows, one beside the other?

still plenty of white spaces, but the file might host multiple rows/cols of images in the same file, reducing after all the number of files to download (the boot anyway)

memory on Desktop browsers these days cost 0.001, but I guess from an accademical point of view... mobile devices have less horse power (not necessarely)

--

You received this message because you are subscribed to the Google Groups "SmartSprites CSS Sprite Generator Users and Developers" group.

To view this discussion on the web visit https://groups.google.com/d/msg/smartsprites-css-sprite-generator/-/XnsoC7_B80IJ.
To post to this group, send email to smartsprites-css...@googlegroups.com.
To unsubscribe from this group, send email to smartsprites-css-sprit...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/smartsprites-css-sprite-generator?hl=en.

[Marco Moscardini]

I am sorry, but I could not find any documentation or example of how to
get a map capable of exploiting sprites in more complex layouts

see attachment. (smart layout at the bottom of the page)
downloaded from
http://compass-style.org/help/tutorials/spriting/sprite-layouts/