Author Topic: Total site PNG optimization status  (Read 22619 times)

0 Members and 1 Guest are viewing this topic.

Offline JonLeung

  • Administrator
  • *****
  • Posts: 3695
Total site PNG optimization status
« on: October 02, 2006, 05:45:03 pm »
Since last month, or maybe earlier, I've been recompressing all the .PNGs using PNGGauntlet's "brute force optimization" option, shrinking the images which make up the bulk of the site to reduce bandwidth usage.  As you know, the site has funked out near the end of each month because of bandwidth issues, and though I've asked for an increase from 50 GB to 75 GB, I thought it really couldn't hurt to be able to deliver the same maps, unaltered in visual quality, using less bandwidth on my end and less time loading on your end.



All sections except for the top five sections (NES, Super NES, GB/GBC, GBA, and PC) take up only 10% of the site (based on numbers of maps), so I didn't record the differences in them.  But you might be interested in the size reductions of the major sections.



NES:

83.6 MB to 55.0 MB

-difference of 28.6 MB, or reduction of 34.21%

-biggest change (in bytes, not percentage) in a single map: EarthBound Zero's whole world map, from 7.00 MB to 3.42 MB



PC:

120 MB to 113 MB

-difference of 7 MB, or reduction of 5.83%



GB/GBC:

52.1 MB to 39.8 MB

-difference of 12.3 MB, or reduction of 23.61%

-new sizes not noted on file listing yet



GBA:

92.4 MB to 65.0 MB

-difference of 27.4 MB, or reduction of 29.65%

-new sizes not noted on file listing yet



Super NES

188 MB to 124 MB

-difference of 64 MB, or reduction of 34.04%

-new sizes not noted on file listing yet

-biggest change in a single game I've seen so far: The 7th Saga maps by KingKuros alone took up 36 MB (30.5% of all of the Super NES atlas's size!), but shrunk to 16 MB (a difference of 20 MB, a size comparable to the total change of the other major sections!)



Neat stuff, huh?



Other things:



-greyscale images can actually be visually altered by PNGGauntlet if "preserve gamma information" isn't checked.  Greys can be darkened or lightened, and I didn't want that.  However, they don't seem to be altered if they've already been run through PNGGauntlet once before.  So I did a double pass with the Game Boy maps...once with that option checked, and then a second time with it unchecked.  The second time most images didn't shrink at all, but some still managed to shrink some more.  Overall, though, I'm kind of surprised that they didn't shrink a lot, the maps with colour shrank more.



-unanimated .GIFs on this site have been or will be replaced by .PNGs.  I will have to change all title images which are currently all .GIFs for whatever reason.  The only .GIFs that should remain are the animated ones.



-currently, all maps in the DS section are all less than 1 kB each.  Of course, they're all Mario Kart DS in-game maps as transcribed by osrevad and Revned, but it's still worth noting as having some of the smallest maps.



-I think the smallest map used to be "ResidentEvil(PC)-Laboratory-B2.png" in the PC section.  Now the honour goes to "ResidentEvil-Survivor(PC)-Arcade-1F.png", which compressed better, and is now at 170 B.



-one of the smallest NES maps is an anomaly.  "Bonk'sAdventure-Round4-Area5.png" has less than 16 colours, but PNGGauntlet only reduced it to a 256-colour palette.  (I love PNGGauntlet's ability to reduce images to a palette to only as small as it has to be (except in this case), shrinking many maps to a 16- or 256-colour palette, and some even to 4 colours!)  When using other programs to reduce the palette to 16 colours and using PNGGauntlet on that, the image comes out to being larger than when sticking to a 256-colour palette.  So I left it, but I don't get why.



- >_> don't take this the wrong way, but the most inefficient images (largest before compression) seem to come from KingKuros.  Also, Revned and TerraEsperZ have had some pretty overly large maps.  (If I haven't changed the file listing yet, compare the sizes of their GBC Legend Of Zelda: Oracle maps' listed size and actual size.)  Unless you have trouble sending maps to me, there's really no point to encourage people to use PNGGauntlet 'cause I'm going to do it anyway.  Plus, I hear that some people can't for whatever reason.  To put a more positive spin on it, that means their maps are the most compressible, and based on what I know about colour pattern recognition in .PNGs, it probably means their maps are accurate with everything all lined up.



-despite my love of PNGGauntlet and the incredible amount of space it's saving me, I fear it may not be the most efficient method of saving .PNGs.  When it's unable to compress a .PNG smaller than its original size, it makes a copy of the original.  Which is fine, because then I'm guaranteed that files won't get larger.  Only thing is, what if some maps (like the GBA Banjo-Kazooie maps) are MUCH smaller than PNGGauntlet can attempt to compress them?  There must be some secret to that!  Maps can never be, say, 1 byte each, but it seems like I haven't yet hit the minimum size possible yet.  I want to squeeze every unnecessary byte out of them if I can do it without altering the images!



-first maps compressed: Mega Man III

-last maps compressed: Mega Man X 3

-last maps compressed including April Fools' maps: Mega Man Solid X: Guns Of The Mavericks

Offline DarkWolf

  • Hero Member
  • *****
  • Posts: 640
RE: Total site PNG optimization status
« Reply #1 on: October 02, 2006, 06:03:09 pm »
Using CSS and getting rid of all those nasty font tags and such would reduce some of the HTML bloat.  Although it would probably only reduce the big pages by a few K, it would be a few less K per visitor and you get the added benefit of being able to change the site's style easier.



Anyway, the drop in image size is cool, it means faster loading for us too.

Offline JonLeung

  • Administrator
  • *****
  • Posts: 3695
RE: Total site PNG optimization status
« Reply #2 on: October 02, 2006, 06:10:54 pm »
The HTMLs were originally written in Microsoft Word, as this is my first real web site and I've been learning as I go along.  At some point I switched to Microsoft FrontPage, which comes with an "optimize HTML" function, which is handy, but not before it totally bloated up all of them.  The Super NES index.htm is over 1 MB, and that's the most popular one!  I may have to break them up.  Or I may have to learn some database stuff to be able to efficiently have everything on its own page.  But I'm learning as I go so that may be a while.

Offline TerraEsperZ

  • Hero Member
  • *****
  • Posts: 2326
RE: Total site PNG optimization status
« Reply #3 on: October 02, 2006, 06:32:21 pm »
Well, I can't use PNGGauntlet not for "whatever reason" but because it requires VB.net which requires a legal copy of WinXP which I do not have at the moment. So I'd call it a "couple hundred bucks reason"





---

"With the first link, the chain is forged. The first speech censored, the first thought forbidden, the first freedom denied, chains us all irrevocably." [...] The first time any man's freedom is trodden on, we're all damaged. - Captain Jean-Luc Picard



B*tch, meet reality. Reality, meet b*tch. - Me
Current project:
Mega Man: Powered Up (PSP)

Offline DarkWolf

  • Hero Member
  • *****
  • Posts: 640
RE: Total site PNG optimization status
« Reply #4 on: October 02, 2006, 06:41:04 pm »
I was able to take nes.html from about 808k to 518k just by stripping the font tags.



I'd love to help you build a dynamic site, but soon I'm going to be busy with working on contract work in conjunction with my internship. =/

Offline JonLeung

  • Administrator
  • *****
  • Posts: 3695
RE: Total site PNG optimization status
« Reply #5 on: October 02, 2006, 07:14:15 pm »
Don't worry, I didn't ask.  :P



I tried removing the font tags, but eventually they all came back.  I feel I should only have to define the Arial font once, but for whatever reason Microsoft FrontPage seems to like Times New Roman, and I seem to have trouble changing that.  Sometimes I'll insert new text and it comes out as Times New Roman, and so I go Ctrl+A to select everything and change the font to Arial.  But instead of simply having one Arial tag for the whole thing it creates several.  Don't ask me.  Maybe a separate HTML optimizing program would be helpful.

Offline DarkWolf

  • Hero Member
  • *****
  • Posts: 640
RE: Total site PNG optimization status
« Reply #6 on: October 03, 2006, 12:25:38 pm »
<font> is a span element, that's why you can't enclose everything in it and be done with it.  So for each block element (<p>, <h1>, etc) you'll need a <font> tag.  That's why the XHTML and CSS combination is superior.



With CSS you'd just say



body

{

     font-size:10px;

     font-family:"Arial", sans-serif;

}



And that pretty much takes care of it.

Offline JonLeung

  • Administrator
  • *****
  • Posts: 3695
RE: Total site PNG optimization status
« Reply #7 on: October 03, 2006, 04:23:28 pm »
Sorry if I sounded mean, TerraEsperZ, that was never my intent.  :/

Offline TerraEsperZ

  • Hero Member
  • *****
  • Posts: 2326
RE: Total site PNG optimization status
« Reply #8 on: October 03, 2006, 06:04:27 pm »
No problem. I read that in a moment of anger from something else and just read it wrong.



---

"With the first link, the chain is forged. The first speech censored, the first thought forbidden, the first freedom denied, chains us all irrevocably." [...] The first time any man's freedom is trodden on, we're all damaged. - Captain Jean-Luc Picard



B*tch, meet reality. Reality, meet b*tch. - Me
Current project:
Mega Man: Powered Up (PSP)

Offline JonLeung

  • Administrator
  • *****
  • Posts: 3695
RE: Total site PNG optimization status
« Reply #9 on: October 07, 2006, 11:48:33 am »
I finished uploading the compressed Super NES maps (and edited the first post above if you care).  Phew!  That should be all of them now...