Images vs css sprites suck ?!
Posted: 05 Aug 2024 18:32
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...
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...