Page 1 of 1

Images vs css sprites suck ?!

Posted: 05 Aug 2024 18:32
by exxos
I tried this concept before and I remember it did not work well.

Basically because there is something like 250 images loading in the store, thats 250 connections.

So theoretically, it would just be a whole lot less connections just to download one single image... However things are not that simple..

Basically I benchmarked the current store opening for the images as a separate file / connection, the store basically took somewhere around 6-7 seconds to load fully.

So with using a single "sprite" image (A single image which holds ALL the store graphics) , it is only one single connection in the file should download a lot faster..

BUT, now the store actually takes somewhere around 25-45 seconds to load!!!! :roll:

All the graphics end up somewhere around 18MB and I even reduced the file using a bit of JPG compression to about 6MB, made no difference.

It is pretty bizarre, because when I look at the graphics in the store, you can actually see them "loading" one by one. So I can only assume that while "the Internet" claims CSS sprites are great, they are certainly are not, because the graphic rendering overhead seems to take a few orders of magnitude longer than just letting it open up hundreds of connections instead..

I think the page does technically load faster in about 3 seconds, but it really does not matter if it's going to take a further 20 seconds to "load" the images in the store :roll:

I think this was likely the same result as I had previously where using CSS sprites took a LOT longer to load and I gave up with them. I thought I would just revisit that notion in case I did something wrong before but I really cannot see what..

So I don't know if anyone else has got any ideas for this, but it looks like separate images seems overall fastest...

Re: Images vs css sprites suck ?!

Posted: 05 Aug 2024 19:18
by exxos
I think I just figured out what the problem is :crazy: :pullhair:

I was using a png image (thought I was using a jpg :roll: ) I just converted it over to a jpg sprite sheet, and now the whole thing loads super quick, in under 8 seconds!

So PNG images must take a LOT longer to render than JPG for some reason. I think I read somewhere it might be something to do with the transparency.. But I would imagine with sprites it would not be copying that information over anyway :shrug:

It's hard to say, but I still think the downloading images separately may still be faster :roll:

:dizzy: