Shrink-a-Thon: The PNGs

Obscure? Perhaps... Definitely effective.

[mivox]

One major factor to note: the 5 color PNGs are size-equivalent to the 4 color GIFs. If you're really serious about maximum image quality for minimum size, PNG looks like the way to go... but I'm not terribly familiar with the image format, so I'll let the entries speak for themselves:

THE FOUR COLOR ENTRIES: Compression die-hards. They not only chose a superior but obscure file format, they decided black was optional...

DaveN [mivox.com]
PNG - 7150 bytes
Fireworks - 4 color
I hear Dave actually reduced the height of the image by two pixels...

EX_S [mivox.com]
PNG - 7214 bytes
Paint Shop Pro
convert the black borders to blue
Ulead SmartSaver Pro with the following settings:
Color: Indexed
Palette: Optimised
Colors: 4
Dither: 0
Filter: None
Soft: None
Compression Method: Median cut
Weight: Even
Web Snap: 0

4eyes [mivox.com]
PNG - 7431 bytes
ULead PhotoImpact
reduced image depth to 4 colours
saved as 4 colur PNG

kapow [mivox.com]
PNG - 7551K
Fireworks 4
Start at 8 colour gif.
Snapped all colours to websafe.
Select 'remove unused colours'.
delete non major colours (leaves 5).
Changed the black colour (borders on countries) to the same blue as labels

bird [mivox.com]
PNG - 7584 bytes
The Gimp
Convert to image->mode->indexed. No rastering, optimal palette with 5 entries.
Open dialog "indexed palette". You see that we now have the following colors:
*light blue for the ocean
*red for some text
*dark blue for the remaining text
*green for land
*dark green for land boundaries
Click on the dark blue field, then select the Hex Triplet value (#02027c), copy this value with <ctrl-c>.
Click on the dark green field, select its Hex Triplet, and paste the blue value there with <ctrl-v>, then hit <return>. The previously dark green field is now dark blue as well.
Close the palette dialog.
Convert back to image->mode->RGB.
Convert again to image->mode->indexed. Still no rastering, but this time with an optimal palette of size of 4.
Save as PNG. Deactivate all options in the PNG settings dialog, use highest compression (9)

oilman [mivox.com]
PNG - 7638 bytes
PhotoImpact/Ulead SmartSaver
set it to about 15 colors
filtered by hand down to 4 colors

sean [mivox.com]
PNG - 7770 bytes
Macromedia Fireworks
(1) menu > export > png
(2) drop to 5 colors
(3) replace black w/ dark blue, leaving four colors
(country borders are still visible, just not as dark)
(4) export

ggrot [mivox.com]
PNG - 7847 bytes
Paint Shop Pro
reduced the image painstakingly to only 4 distinct colors
changed some pixels to create longer 'lines' of a single color & removed dark blue border
exported in png

THE FIVE COLOR ENTRIES: Staying true to the original... Black lines intact.

sugarkane [mivox.com]
PNG - 8089 bytes
The Gimp
converted to indexed image with 5 colours
saved as PNG with level 9 compression
no interlacing, no transparency / gamma etc

pageoneresults [mivox.com]
PNG - 8747 bytes
Fireworks 4
Saved as png8 with 5 colors

[4eyes]

DaveN - right size on the PNG

D**n - no excuse now

[mivox]

OK, I want an explanation! Out with it Dave! What'd you do??

[sean]

He did what I did originally -- got rid of the country borders.

...and I thought webmasters were attuned to catching pixel-level oddities.

(edit: I am the typo king)

(edited by: sean at 2:01 am (gmt) on Oct. 12, 2001

[mivox]

Heh... I've been looking at so many copies of that map, my eyes are going buggy! But I did notice that bit when I looked at it a third time.

I only stare *that* hard at my *own* graphics most of the time. ;)

[evinrude]

Just a curiosity question... I tried the PNG route as well, only using Photoshop 6. This seemed to increase the file size.... Some trick I'm missin'?

[Macguru]

I am really impressed by the quality/size ratio of PNG. Do someone have more info on browser support?

[mivox]

Some trick I'm missin'?
I've had the same problem with Photoshop... I think their PNG compression support is sub-standard. (Oooh... I can't believe I'm publicly knocking Photoshop!)

more info on browser support?
In IE 5/Mac, I had to specifically conifure my "file helpers" preferences to tell it which plug-in to use to view the files.... :(

Time to start an email campaign to the browser programmers to offer proper PNG support. It seems to be a quite superior file format compared to GIF...

This thread [webmasterworld.com] has some links to good PNG info.