Jump to content

 
Photo

Best image format for web

- - - - -

  • Please log in to reply
22 replies to this topic

#1
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography & Bouldering!
  • United States

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.

#2
GISRox

GISRox

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 104 posts
  • Gender:Male
  • Interests:Outdoors, maps, travel.
  • United States

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



#3
mike

mike

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 320 posts
  • Gender:Male
  • Location:Toronto, ON
  • Canada

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

#4
frax

frax

    Hall of Fame

  • Associate Admin
  • PipPipPipPipPipPipPip
  • 2,299 posts
  • Gender:Male
  • Location:Stockholm, Sweden
  • Interests:music, hiking, friends, nature, photography, traveling. and maps!
  • Sweden

Where is Derek when you need him?
Hugo Ahlenius
Nordpil - custom maps and GIS
http://nordpil.com/
Twitter

#5
mdsumner

mdsumner

    Key Contributor

  • Validated Member
  • PipPipPip
  • 96 posts
  • Australia

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.

#6
Claude

Claude

    Master Contributor

  • Validated Member
  • PipPipPipPip
  • 107 posts
  • Location:Denver, CO
  • United States

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?
Platts, a div. of McGraw-Hill
www.maps.platts.com


#7
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography & Bouldering!
  • United States

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).

#8
natcase

natcase

    Ultimate Contributor

  • Validated Member
  • PipPipPipPipPipPip
  • 569 posts
  • Gender:Male
  • Location:Minneapolis, Minnesota
  • Interests:cartography
    aeshetics
    cartographic design
    John Bartholomew
    road maps
    large-scale mapping
  • United States

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

Nat Case
INCase, LLC

Minneapolis, Minnesota USA
maphead.blogspot.com



#9
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography & Bouldering!
  • United States

I wish I had Photoshop.

#10
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,078 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

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.
Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#11
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

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


....."Ni!" :P

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. :P 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...
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com

#12
Dennis McClendon

Dennis McClendon

    Hall of Fame

  • Validated Member
  • PipPipPipPipPipPipPip
  • 1,078 posts
  • Gender:Male
  • Location:Chicago
  • Interests:map design, large-scale maps of cities
  • United States

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!
Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#13
kpearson

kpearson

    Contributor

  • Validated Member
  • PipPip
  • 26 posts
  • Gender:Male
  • Location:North Carolina
  • Interests:Cartography & Bouldering!
  • United States

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.

#14
ELeFevre

ELeFevre

    Hall of Fame

  • Associate Admin
  • PipPipPipPipPipPipPip
  • 1,049 posts
  • Gender:Male
  • Location:Louisville, Colorado USA
  • Interests:Cartography, musical instruments, reading, hiking, craft beer
  • United States

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.



#15
Derek Tonn

Derek Tonn

    Legendary Contributor

  • Validated Member
  • PipPipPipPipPip
  • 455 posts
  • Gender:Male
  • Location:Springfield, Minnesota, USA
  • United States

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........ <_<

;)
Derek Tonn
Founder and CEO
mapformation, LLC

datonn@mapformation.com
http://www.mapformation.com




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

-->