I need help with Adobe Fireworks and how to save a PNG file as a GIF and minimize its size.

mu2pilot
mu2pilot used Ask the Experts™
on
I am changing some buttons on my website.  The graphic designer used Adobe Fireworks to design the layout of my site as well as my buttons.  He sent me the PNG file of one of my buttons.  The .png file is 50-55k in size.  The designer converted or saved the buttons as gif images and their size is very small, less than 1k.  When I modify the .png file and save it as a .gif image, the size is 20 times larger than the .gif images the designer created (14k vs .7k).  Why can't I create a .gif image that small, when my designer can, using the same software?

I am attaching an example of the a a PNG file and a large and a small gif as an example.

Thanks in advance!

Thanks!
5old.gif
5.png
5.gif
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi mu2pilot

First off, I don't know anything about Adobe Fireworks because I can neither afford nor justify $300 for my needs.  I will, however, explain to you WHY the 13KB *.gif image you saved has a larger file size than the 711 Byte one created previously by the web designer.

The main difference is with the number of colours in the image.  Yours was saved with a colour depth of 256 colours, whereas the smaller one was saved with a colour depth of only 16 colours.  Your image actually contains 22 unique colours, whereas the smaller one contains 16 unique colours.

I have attached a screenshot of each of the file's properties side by side.

Colours are commonly expressed by the amount of Red, Green, and Blue they contain - RGB - and each value is given as a hexadecimal value or as a decimal value.  In both cases, the aqua coloured background of both buttons is solid and has a value of (hex) R:B3, G:C7, B:CE or (decimal) R:179, G:199, B:206.  I'll refer to them by decimal numbers which is easier to think of, even though HTML coding should really be in Hex.

When you use tools to create text in an image, it usually ends up blocky when you zoom in on the image.  At its original size, the different shadings of the pixels around the solid part of the text (which make it look blocky when enlarged) blend in and can't usually be seen.  There are different ways to create text in images.  Some create new layers containing the text while others insert the text right into the current layer.  When saved, however, the layers are all generally blended into one.

Unfortunately, because of the curved nature of letters, it would leave quite jagged edges on those curved bits.  Think of drawing a straight line slightly off horizontal or vertical in MS Paint and you'll know what I am referring to.  The jagged "stepped" results.  Well, to reduce those effects, most image editing programs use "antialiasing" for text.  This is the cheat method of diffusing the hard edges using shaded pixels around the edges.  This is what creates the "blockiness" in text when zoomed in.

That blockiness contains quite a number of different shades of the basic colour of the text.  In your *.GIF image the main dark blue of the text is R:57, G:82, B:104.  In the smaller GIF file, the Blue value is 105.  Your eye is not going to be able to even detect that tiny difference in shade, but this is the kind of slight adjustment that happens in images with a lower colour depth.  In the smaller GIF file the blockiness of the text contains less unique colours.

What you really need to look for is the user option to show additional options when Saving As a *.GIF file.  Often image editors have an optimization wizard that lets you choose a file size and preview the results so you can achieve the smallest file size without degrading the image too much.  You should also see what happens when you decrease the colour depth to 16 colours before saving.

Hopefully you will get the results you need.

Bill
GIF-Properties.jpg

Author

Commented:
The solution was partly correct.  I have now learned that the main reason for the larger file size is that Fireworks saves meta data if you do a "File-Save As".  if you "Export" it to a GIF, the file size is 1/10th the size.  So, the answer was correct with regard to the # of colors, but didn't address the unique issue with Fireworks.
Thank you mu2pilot.

Yes, the sometimes useful but mostly superfluous and bloating metadata.  Never having used Adobe Fireworks, I wasn't aware of just how much data it writes into files as it encodes them, and didn't specifically check out that aspect.  I regularly use a tiny freeware program named Jpeg Slimmer (JStrip) by David Crowell (http://davidcrowell.com/jstrip/) to remove unwanted metadata from *.JPG images, and I tend to use "Optimization" options when resaving *.GIF images from other image editors, so I've never had cause to concern myself with oversized images.

I've extracted the text based metadata tags and have pasted them in the code snippet for the information of others finding this question.

The code is Adobe's XMP - Extensible Metadata Platform - explained here:
http://www.adobe.com/products/xmp/

Bill  
Metadata in 5.PNG created by Adobe Fireworks:
=============================================

TXtXML:com.adobe.xmp<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/"
   x:xmptk="Adobe XMP Core 4.2.2-c063 53.351735, 2008/07/22-18:11:12">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""
            xmlns:xmp="http://ns.adobe.com/xap/1.0/">
         <xmp:CreatorTool>Adobe Fireworks CS4</xmp:CreatorTool>
         <xmp:CreateDate>2010-02-19T22:44:49Z</xmp:CreateDate>
         <xmp:ModifyDate>2010-02-19T22:48:10Z</xmp:ModifyDate>
      </rdf:Description>
      <rdf:Description rdf:about=""
            xmlns:dc="http://purl.org/dc/elements/1.1/">
         <dc:format>image/png</dc:format>
      </rdf:Description>
   </rdf:RDF>
</x:xmpmeta>

Metadata in GIF89a encoded 5.GIF created by Adobe Fireworks:
============================================================

XMP DataXMP<?xpacket begin="" id="W5M0MpCehiHzreSzNTczkc9d"?>
<x:xmpmeta xmlns:x="adobe:ns:meta/"
   x:xmptk="Adobe XMP Core 4.2.2-c063 53.351735, 2008/07/22-18:11:12">
   <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
      <rdf:Description rdf:about=""
            xmlns:xmp="http://ns.adobe.com/xap/1.0/">
         <xmp:CreatorTool>Adobe Fireworks CS4</xmp:CreatorTool>
         <xmp:CreateDate>2010-02-19T22:44:49Z</xmp:CreateDate>
         <xmp:ModifyDate>2010-02-19T22:45:47Z</xmp:ModifyDate>
      </rdf:Description>
      <rdf:Description rdf:about=""
            xmlns:dc="http://purl.org/dc/elements/1.1/">
         <dc:format>image/gif</dc:format>
      </rdf:Description>
   </rdf:RDF>
</x:xmpmeta>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial