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...
Images vs css sprites suck ?!
-
exxos
- Site Admin

- Posts: 28344
- Joined: 16 Aug 2017 23:19
- Location: UK
-
exxos
- Site Admin

- Posts: 28344
- Joined: 16 Aug 2017 23:19
- Location: UK
Re: Images vs css sprites suck ?!
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:
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:
Who is online
Users browsing this forum: ClaudeBot and 4 guests