| T O P I C R E V I E W |
| radiodelicate |
Posted - 13 July 2008 : 07:29:19
The Ark is one of Sweden's most famous rock bands at the moment, and I've had the fortune to work at their forum.
When I took over, the forum was suffering terribly from spam, and it was still stuck at a 3.3.03
No MODs or customizations had been done what so ever.
basically, it looked like this
What I wanted to do was not only to bring it up to date, but also to make it feel like it was truly a part of the rest of their website.
I was rather experienced with HTML and CSS, but had never ever touched anything that had anything to do with databases before, so it was a true challenge. It was all trial and error, and these forums have been a great help!
this is what it looks like today
http://thearkworld.com/forum/default.asp
user/password is demo/demo is you wanna have a look.
For comparison, this is what the main site looks like
http://thearkworld.com/main.asp< |
| 15 L A T E S T R E P L I E S (Newest First) |
| AnonJr |
Posted - 23 July 2008 : 11:00:30
Here's one that's worth looking at: http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/< |
| AnonJr |
Posted - 23 July 2008 : 10:22:04
Not off the top of my head. Most of the articles I've been reading I came across through some random browsing one sleepless night. Like an idiot I didn't bookmark the good ones...  < |
| radiodelicate |
Posted - 23 July 2008 : 08:59:21
oh, I wasn't aware of that there were different kinds of transparencies for png.
any articles you can recommend?< |
| AnonJr |
Posted - 23 July 2008 : 08:49:10
Only Alpha transparency is borked. Single-color transparency works fine - and that's the same as you would get with a GIF, but with more colors at your disposal.
(interesting this topic would come up as I've been reading a few articles on the subject lately)< |
| radiodelicate |
Posted - 23 July 2008 : 08:31:32
yes, I know. I suppose it's a question about vanity, because I like how you can have smooth edges with pngs. Oh well, since I'll only use them on light backgrounds, I suppose there's no harm in optimizing them for light backgrounds and save them as gifs..< |
| HuwR |
Posted - 23 July 2008 : 08:15:46
you could still shave a significant amount of Kb from your images, if you save your new_logo using 95% compression it will be only 84Kb without any appreciable loss of detail
and your topic icons would be half their size (and work in ALL browsers) if you saved them as transparent gif rather than as png< |
| radiodelicate |
Posted - 23 July 2008 : 07:52:37
Thanks :D
it's actually quite amazing how much of a difference the change of a few graphics can make. I immediately got positive feedback when I had made the change.
It makes you realize that it's not just the overall look and functionality that's important, but also in the details. I just wish older versions of IE had better support for png. Even though I have the javascript png solution, there will still be problems when using pngs with transparency as backgrounds. And the solution doesn't work at all in older versions of IE than 5.5
oh well. I'll live ;D< |
| AnonJr |
Posted - 23 July 2008 : 06:56:51
Sweet. 
Now I really need to update the guitars over at www.jesusjoshua2415.com ...< |
| radiodelicate |
Posted - 23 July 2008 : 05:43:12
hehe yeah that's true. Well I'm quite content with the solution I have right now, I think 138kb in total is pretty alright for a header :)
If anyone wanna have a look again, I've changed the folder icons into peacock feathers instead, to make it fit the theme even more.
New posts
No new posts
Hot topics
 
First I tried to find a good stock graphic of a peacock feather, but then realized it would probably be better if I just made it myself in order to get exactly what I wanted.< |
| AnonJr |
Posted - 22 July 2008 : 14:30:46
I'd try with PNGOUT (PNGGauntlet is simply a .NET GUI for PNGOUT) as some have gotten better results with PNGOUT than with the other options. I've got a few other articles from different people that essentially echo the results that Jeff Atwood had gotten.
Either way, even a small reduction is significant - especially when you get that bandwidth bill.  < |
| phy1729 |
Posted - 22 July 2008 : 14:13:37
I ran the original PNG through PNGcrush and it did not make a significant difference.< |
| AnonJr |
Posted - 22 July 2008 : 13:48:27
When you ran it through PNGGauntlet, did you start with a PNG as outputted by your graphics program or did you convert the existing image? I ask only because it does make a difference.< |
| radiodelicate |
Posted - 22 July 2008 : 07:07:25
I gave PNGGauntlet a try, but the output still was about 345kb, so it seems like slicing the image still is the better option.< |
| AnonJr |
Posted - 22 July 2008 : 06:23:46
You could also use a PNG and shrink down the size with PNGOUT/PNGGauntlet or OptiPNG. You'd have all your colors, and it would probably be smaller. I'd make the PNG from your original though. (assuming that you have an original Photoshop file, or something)< |
| radiodelicate |
Posted - 22 July 2008 : 05:23:32
quote:
Originally posted by leatherlips
One suggestion I would have it for you to decrease the file size of the header image. It is 364kb. That's pretty big for a header graphic in my opinion. If you saved it as a gif you could get it down to about 80kb or so and it would like exactly the same.
thanks for the input!
I really didn't like the way how the colours in the feathers compressed in gif though, but what you said made me realize there might be other ways of decreasing the file size. I chopped the image into two pieces. The top with the text and the beige bars are now a png with a size of 5kb, and the actual image is a 133kb jpg.< |
