Site Skin image Compressions

Utopie

Utopie

Inactive User
Joined
Nov 16, 2004
Messages
2,955
Reaction score
84
Compressed the images off the main forum view for both skins. You can slice off more than half of an image size if you revert them to png's...

There was quite large saving over all on the Dark skin but was healthy saving on the Blue skin also.

Obviously some of the images will be on both the blue and dark skins.

It goes:
Image file name
Compressed size
Saving size
Saving percentage

If an image cannot be compressed further then No Saving is indicated.

Blue Skin
-----------------------

passive_tweets.png
534 bytes
410 bytes
43.43%

passive_tab.png
1.25 KB
257 bytes
16.70%

head_back.gif.png
1.70 KB
290 bytes
14.29%

gradient_thead.gif.png
2.64 KB
304 bytes
10.12%

tableft1.gif
No savings

tabright1.gif.png
230 bytes
263 bytes
53.35%

gradient_tcat.gif.png
3.24 KB
407 bytes
10.92%

ajax-loader.gif
Error writing the optimized file
dw_header.jpg
No savings

navbits_start.gif
No savings

FaceBook-icon.png
2.77 KB
535 bytes
15.88%

Twitter-icon.png
3.14 KB
525 bytes
14.05%

Youtube-icon.png
3.35 KB
474 bytes
12.14%

MySpace-icon.png
3.03 KB
373 bytes
10.74%

menu_open.gif
No savings

collapse_tcat.gif
No savings

smilie.gif
No savings

separator.gif
No savings

clap.gif
702 bytes
1023 bytes
59.30%

banana.gif
1.69 KB
69 bytes
3.82%

new_bluegrab.gif
6.98 KB
2.56 KB
26.83%

proud.gif
No savings

fishy.gif
10.74 KB
239 bytes
2.13%

cheers.gif
1.40 KB
827 bytes
36.51%

doc.bmp.png
937 bytes
381 bytes
28.91%

chainsaw.gif
447 bytes
35 bytes
7.26%

angelwings.gif
1.15 KB
19 bytes
1.59%

mad2.gif
No savings

post_new.gif
No savings

001_smile.gif
No savings

forum_old.png
1.83 KB
2.65 KB
59.17%

lastpost.gif
No savings

forum_new.png
2.12 KB
2.59 KB
55.06%

clear.gif
No savings

forum_new_chat.png
2.30 KB
2.63 KB
53.34%

icon5.gif
No savings

forum_old_chat.png
2.17 KB
2.65 KB
55.06%

forum_new_bargains.png
3.04 KB
2.65 KB
46.62%

icon14.gif
No savings

forum_old_bargains.png
2.72 KB
2.65 KB
49.36%

forum_new_car.png
2.95 KB
2.65 KB
47.33%

forum_old_car.png
2.70 KB
2.65 KB
49.56%

forum_new_sport.png
3.41 KB
2.65 KB
43.77%

forum_old_sport.png
2.93 KB
2.65 KB
47.55%

collapse_thead.gif
No savings

whos_online.gif
No savings

stats.gif
No savings

Dark Skin
-----------------------

background.gif.png
439 bytes
1.52 KB
77.99%

passive_tweets.png
534 bytes
410 bytes
43.43%

passive_tab.png
1.25 KB
257 bytes
16.70%

thead_g.gif.png
263 bytes
199 bytes
43.07%

tableft1.gif
No savings

tabright1.gif.png
230 bytes
263 bytes
53.35%

ajax-loader.gif
No saving

darklogo.gif.png
20.49 KB
2.99 KB
12.73%

navbits_start.gif
No savings

facebook-top-shorter.gif.png
3.02 KB
1.56 KB
33.98%

menu_open.gif
No savings

collapse_tcat.gif
No savings

smilie.gif
No savings

separator.gif
No savings

clap.gif
702 bytes
1023 bytes
59.30%

banana.gif
1.69 KB
69 bytes
3.82%

new_bluegrab.gif
6.98 KB
2.56 KB
26.83%

proud.gif
No savings

fishy.gif
10.74 KB
239 bytes
2.13%

cheers.gif
1.40 KB
827 bytes
36.51%

doc.bmp.png
937 bytes
381 bytes
28.91%

chainsaw.gif
447 bytes
35 bytes
7.26%

angelwings.gif
1.15 KB
19 bytes
1.59%

mad2.gif
No savings

post_new.gif
No savings

001_smile.gif
No savings

forum_old.png
1.83 KB
2.65 KB
59.17%

lastpost.gif
No savings

forum_new.png
2.12 KB
2.59 KB
55.06%

forum_new_chat.png
2.30 KB
2.63 KB
53.34%

forum_old_chat.png
2.17 KB
2.65 KB
55.06%

forum_new_bargains.png
3.04 KB
2.65 KB
46.62%

icon14.gif
No savings

forum_old_bargains.png
2.72 KB
2.65 KB
49.36%

forum_new_car.png
2.95 KB
2.65 KB
47.33%

forum_old_car.png
2.70 KB
2.65 KB
49.56%

forum_new_sport.png
3.41 KB
2.65 KB
43.77%

forum_old_sport.png
2.93 KB
2.65 KB
47.55%

collapse_thead.gif
No savings

whos_online.gif.png
1.57 KB
8 bytes
0.49%

stats.gif.png
1.51 KB
35 bytes
2.21%

forum_new.gif.png
1.69 KB
86 bytes
4.72%

forum_old.gif.png
1.66 KB
140 bytes
7.62%
 
your a top man mate I really appreciate that allot... uploading now.

Absolutely brilliant!!!

Mickie
 
No worries. Notice how some of them are called imagename.gif.png? That means that they will need to be changed where they are referenced in the HTML and CSS files from .gif to .png etc, and also best to name imagename.gif.png to imagename.png etc etc... You probably know but just though I would mention to be sure to be sure... It's quite easy to do with something like Dreamweaver which has search and replace function...

Even if you only copy and the replace the ones on the server which haven't flipped from gif to png, you will still be saving on kbs across the the board...
 
Let me know how you got on Micky when you get chance. Cheers...
 
I used quite a few of them mate :)

To change over the others to png I must edit the templates, and a little lazy at the moment + allot of things on.

If anyone has any ideas to reduce the status icons more that would be great they are really annoying me at 5K each nearly and the twitter, myspace, etc are all 3k and would be nice to drop them down to a 1k if poss or even other images that are smaller we could try.

Again thanks very much madeinbeats for your time pal.

Regards
Mickie
 
Last edited:
Social icons compression

I compressed those social icons with ease mate. They are 48x48 pixles, but you are are only displaying them at 30x30, so there is a big saving right there.

There are 2 sets in the zip; 64 and 32 colours. 64 colour at about 900 bytes each, and the 32's are about 600 bytes/icon.

There are more artifacts showing on the 32 colour set but not that noticable at all on most appart from the Myspace icon; you might want to opt to use 64 bit version for that one.

The only other way to reduce them even more would be to use more vector like icons with less colours and pixles in them, but they wouldn't look as nice and glossy as the ones you are using.
 
Re: Social icons compression

On my HTC desire at the mo will get these up tomorrow, and thanks again. Did you get any luck with the status icons ?

Thanks
Mickie
 
White Skin

Right so. I've compressed the forum status icons here for the white skin. For maxium results I had to drop them to png-8's, so the transparency is more like a gif, but, I sampled the bg colour of the skin for the matte so they will look totally transparent.

Again, there are more artifacts now but you only notice them if you really stare at them.

If they are good enough then I can do the same to the dark skin status icons, so just let me know what you think when you have tested them out.
 
Re: White Skin

Thanks very much, will check them out tomorrow. You sir are a star.

Regards
Mickie
 
Re: White Skin

Thanks very much madeinbeats.

Sorry I forgot to update the images.

If you ever get the chance there is some new ones that zippy made not so long ago matey.

Not worried about the dark skin as that is a users choice but more about the guests that visit they should get a minimized viewing as much as possible.

Thanks again
Mick
 
Re: White Skin

Mick said:
Thanks very much madeinbeats.

Sorry I forgot to update the images.

If you ever get the chance there is some new ones that zippy made not so long ago matey.

Not worried about the dark skin as that is a users choice but more about the guests that visit they should get a minimized viewing as much as possible.

Thanks again
Mick
Click to expand...

About a 50% saving overall.
 
Scratch that last one for a sec mate... Just going to try and get them lower... be 10 mins...
 
do you record and then process them as a batch ?

Also is that photoshop I tried and could get them lower but they had nothing on your ones.

You managed to get some down to 0.9k without even noticing any difference ?

Mick
 
Mick said:
do you record and then process them as a batch ?

Also is that photoshop I tried and could get them lower but they had nothing on your ones.

You managed to get some down to 0.9k without even noticing any difference ?

Mick
Click to expand...

There's about a 75%'sh compression on the original ones in this batch. Yes, in Photoshop, save them for need's be. The originals are saved as fully transparent png's I saved them as 8 bit with a Matte of the background colour they are sitting on. Fully transparent png's can be quite big, but are somtimes needed + a little more advanced giggery-me-pokery ;)

Could have batch processed them if there was say 50+, but I just use all the keyboard shortcuts to optimise my own work rate, lol...
 
Last edited:
The giggery pokery is much appreciated.

Thank you very much that will be a massive saving on the site we get 20,000 unique visitors a day where the images are not cached.

It will save about 39k per page (on the main pages) x 20,000 = 780000K a day and probably reduce the load times by half a second per page call.

Very grateful
Mick
 
Like the idiot I am I missed some,

When you get a spare min could you also work your magic on these ?

Regards
Mick
 
Mick said:
The giggery pokery is much appreciated.

Thank you very much that will be a massive saving on the site we get 20,000 unique visitors a day where the images are not cached.

It will save about 39k per page (on the main pages) x 20,000 = 780000K a day and probably reduce the load times by half a second per page call.

Very grateful
Mick
Click to expand...

Alright mate. Next you could try and turn them into graphic sprites and save on some HTTP requests. Save that for next year though, lol...
 
Some large savings on a couple of files. The tiling bg image on the banner and the right side sprite for the main navigation tabs.
 
That is fantastic Mate.

So helpful for DW.

I read your sprites message lol... I actually wanted to css the images into sprites and call it as one call.. but the work would be massive to edit the php coding etc.

One thing mate you know the tab that you compressed can you reserve it for me so that the blue is on the top I would like to try it as all blue tabs and not orange. but on mouseover it goes orange.

Regards
Mick
 
You must log in or register to reply here.
Back
Top