22 replies to this topic

[kpearson]

I searched this topic and I couldn't find anything on this forum. Which image format(png, tif, giff) is the clearest in detail for web pages? I am currently using png and it is fuzzy.
Thanks.

[GISRox]

It isn't the format that creates the fuzziness, it's the resampling algorithm that creates the fuzziness.

[mike]

What kind of image are you trying to post up on the web? (map? photograph? illustration?)

[frax]

Where is Derek when you need him?

[mdsumner]

Well, it can be the format - JPEG uses lossy compression for example.

PNG is the best image format for the web if it is non-photo data (IMO) - but as stated above it's about the process you use to create the image.

[Claude]

it might be more a matter of how your are sizing the image and whether it's of an adequate resolution. maybe you could post it?

[kpearson]

My original map is a .pdf that I converted to .PNG. I am creating a website in Microsoft Publisher 2007, which will not accept a pdf file. SO I went back in Illustrator and exported the pdf to a png. I also tried tif, but in publisher when you preview the web page it looks bad(fuzzy).

[natcase]

My original map is a .pdf that I converted to .PNG. I am creating a website in Microsoft Publisher 2007, which will not accept a pdf file. SO I went back in Illustrator and exported the pdf to a png. I also tried tif, but in publisher when you preview the web page it looks bad(fuzzy).

Resolution resolution resolution.

Illustrator's export to PNG is pretty inflexible, options are only 72, 150 and 300 dpi. Much better to bring the PDF into Photoshop, where you can make it exactly the resolution you need to maintain crispness. 300 dpi should suffice for most purposes, but for very fine linework it may not. Then convert from RGB format to indexed color and choose the lowest number of colors in an exponent of 2 (2, 4, 8, 16, 32, 64, 128 or 256) that doesn't lose image difference. then save as PNG.

And see Derek's site for more ideas:

www.graphicsoptimization.com

[kpearson]

I wish I had Photoshop.

[Dennis McClendon]

Who tries to create web pages without Photoshop (or a similar image editor)? Seems like trying to cut down trees with a herring.

Anyway, there should be no difference in clarity among the various run-length-encoding formats: GIF, TIFF with LZW, and PNG. JPEG, which uses a pattern algorithm rather than one based on "runs" of same-color pixel, works better for photos but will introduce artifacts and look fuzzy for flat-color images.

A trick I use a lot is to display my image the size I want it onscreen and then just do a screen capture. That way I'm seeing actual pixels and can tell whether the type will be readable. Various OS utilities (such as Grab and Preview on the Mac) may allow you to save that in the format you want.

[Derek Tonn]

Who tries to create web pages without Photoshop (or a similar image editor)? Seems like trying to cut down trees with a herring.

....."Ni!"

Seriously though, web development is no different than non-cartographers trying to make maps, non-mechanics trying to repair their cars, etc, etc. People who are GOOD at "it" (whatever 'it' is) cringe at watching "amateurs" or hobby-jobbers trying to do it themselves...and/or get left to clean up the messes after a few "cartastrophies" or broken-down cars sitting along the highway. I think most of it is just the result of people trying to save a buck or two and/or having a mild to moderate interest in "it"....so you/we get a TON of inferior work posted out there as a result.

With imagery though, it's pretty simple. Keep the number of colors used when exporting your graphics to the minimum needed to do the job without creating a noticeable difference/degradation on-screen, size the image to the dimensions being displayed in your web page(s), use .jpg for photos, use 8-bit .png for most "drawn" imagery, don't using tiling/splicing or interlacing/progressive downloads unless you have to, etc. There are dozens of different methods for creating .pdf, .jpg, .gif, .png, .swf, etc., and each method will achieve a bit different/better/worse results depending upon the image or file that you are working with.

Just whatever you do, for the love of all things pure and holy, DON'T settle for "save as" or "export to web" out of Adobe, Corel or ??? products and think you are done. The only exception to that rule might be Fireworks (or Image Magick)...and even then, 5-10+ percent "extra" bits and bytes can generally be removed with a minute or two of extra effort if one goes looking...

[Dennis McClendon]

Oh, what sad times are these, when passing ruffians can say “GIF!” at will to innocent website developers! There is a pestilence in this land! Nothing is sacred!

[kpearson]

Who tries to create web pages without Photoshop (or a similar image editor)? Seems like trying to cut down trees with a herring.

One thing I never understood in these types of forums is when people slam someone else for what they believe is a stupid question. Well if I don't know how am I going to find out?? If I knew the answer to my question I wouldn't need this forum.
Thanks for the information though. Now that I know I can't get a good image strait out of Illustrator I won't be wasting anymore of my time. I need to get Photoshop.

[ELeFevre]

Who tries to create web pages without Photoshop (or a similar image editor)? Seems like trying to cut down trees with a herring.

Now that I know I can't get a good image strait out of Illustrator I won't be wasting anymore of my time. I need to get Photoshop.

IMO you can get a perfectly-fine image for the web out of Illustrator if you have an understanding of filetypes and optimization techniques. It won't be perfect, but what is? It's a learning process.

Keep in mind that Photoshop isn't the be-all end-all of raster software. If you're an average user, doing light production work at best, then your probably only using a sliver of the available tools in Photoshop. I certainly wouldn't buy it if you're catalyst for doing so is to try and create perfect web images. Paint Shop Pro is a solid raster application for a fraction of the cost of Photoshop. You may not get all of the high-end production tools, but that might be a good thing. Adobe Elements is another good option. My personal favorite is Adobe Fireworks....although I'm still using my Macromedia MX version at home! It's great.

[Derek Tonn]

Adobe Photoshop is a GREAT piece of software! However, when it comes to prepping imagery for the web, it falls way, WAY short in its performance. Some of it is "operator error" (people not knowing what they are doing with the tool or with prepping imagery for the web). However, a good portion of it is simply because Adobe hasn't caught-on to (or cared about) the idea that smaller = better when it comes to file size. If you can get the same job done (size of image, richness of appearance on-screen, etc.) using less bits and bytes, I challenge anyone to explain to me how the smaller file size is not preferable. I even talked with developers at Adobe about this in the past...and they say "not a big deal....computers and Internet connection speeds are getting faster all the time..."

Grr........