Jump to content

 
Photo

Best image format for web

- - - - -

  • Please log in to reply
22 replies to this topic

#16
Dennis McClendon

Dennis McClendon

    Hall of Fame

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

One thing I never understood in these types of forums is when people slam someone else for what they believe is a stupid question.

I didn't think it was a stupid question to ask about optimizing graphics. And I certainly didn't intend to be rude. But I was puzzled—and continue to be puzzled—by how you would expect to create a website full of raster graphics without any sort of raster graphics editor. To me, it was like calling the Butterball hotline on Thanksgiving to ask how many minutes per pound to roast the turkey, then concluding the call with "I guess I'll have to get a stove."
Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#17
Derek Tonn

Derek Tonn

    Legendary Contributor

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

One thing I never understood in these types of forums is when people slam someone else for what they believe is a stupid question.

I didn't think it was a stupid question to ask about optimizing graphics. And I certainly didn't intend to be rude. But I was puzzled—and continue to be puzzled—by how you would expect to create a website full of raster graphics without any sort of raster graphics editor. To me, it was like calling the Butterball hotline on Thanksgiving to ask how many minutes per pound to roast the turkey, then concluding the call with "I guess I'll have to get a stove."


Yep...although using Adobe Photoshop to optimize imagery is kind of the equivalent of using an EZ-Bake Oven to cook that Butterball instead of using an actual stove... ;)

I didn't take your response as a "dig" or anything negative at all. Actually, for how listservs and forums go, I think CartoTalk is probably one of the most polite, civil places that I know of. Us cartographers....er, map designers....er, graphic designers....er, "map enthusiasts" gotta stick together, right?! :P
Derek Tonn
Founder and CEO
mapformation, LLC

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

#18
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

One thing I never understood in these types of forums is when people slam someone else for what they believe is a stupid question.

I didn't think it was a stupid question to ask about optimizing graphics. And I certainly didn't intend to be rude. But I was puzzled—and continue to be puzzled—by how you would expect to create a website full of raster graphics without any sort of raster graphics editor. To me, it was like calling the Butterball hotline on Thanksgiving to ask how many minutes per pound to roast the turkey, then concluding the call with "I guess I'll have to get a stove."


Yep...although using Adobe Photoshop to optimize imagery is kind of the equivalent of using an EZ-Bake Oven to cook that Butterball instead of using an actual stove... ;)

I didn't take your response as a "dig" or anything negative at all. Actually, for how listservs and forums go, I think CartoTalk is probably one of the most polite, civil places that I know of. Us cartographers....er, map designers....er, graphic designers....er, "map enthusiasts" gotta stick together, right?! :P


hey Derek,
If Photoshop is the equivalent of an EZ bake oven what do you suggest we use?



#19
Derek Tonn

Derek Tonn

    Legendary Contributor

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

hey Derek,
If Photoshop is the equivalent of an EZ bake oven what do you suggest we use?


It depends upon the image and intended output, but Fireworks and ImageMagick are probably better canned solutions related to image optimization performance than Photoshop. If folks REALLY want to save bits and bytes though and not just pay it lip-service, check out:

.jpg - http://www.graphicso...letypes/jpg.htm
.gif - http://www.graphicso...letypes/gif.htm
animated .gif - http://www.graphicso...animatedgif.htm
.pdf - http://www.graphicso...letypes/pdf.htm
8-bit .png - http://www.graphicso...etypes/png8.htm
24-bit .png imagery - http://www.graphicso...types/png24.htm
.ppt - http://www.graphicso...letypes/ppt.htm
.svg - http://www.graphicso...letypes/svg.htm
.ico - http://www.graphicso...letypes/ico.htm

I need to scrub that content just a bit, as most of my time has gone into our site blog versus those static pages this Summer! However, that site/blog is basically my "diary" and clearinghouse for anything and everything I have learned about optimization...and as soon as new/better tools come out, that content is introduced in one/both of those sites.

Not "tooting my own horn" either...as the more I have learned about image optimization, the more I realize I have to learn! My only point is that people who think that Adobe products are the end-all, be-all related to creating output for the web have a lot (a LOT!) of additional learning to do...as Save As or Export to Web functionality in their products tends to be lacking....to put it nicely.
Derek Tonn
Founder and CEO
mapformation, LLC

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

#20
DrJill

DrJill

    Contributor

  • Validated Member
  • PipPip
  • 43 posts
  • United States

After reading through this post (admittedly quite a bit later!) I didn't see if the initial question got answered, so my 2-cents...

GIF: Graphic Information Format
  • GIF files are best for graphics with fewer, flatter colors, used for "presentation graphics” (e.g., maps)
  • GIF files can be "interlaced" so they appear to fade in, from lower to higher quality, while loading
  • GIF files can be transparent you can select one color to "not show" causing your browser's background color to show through
  • GIF files are "lossless” the image quality is not degraded by the compression process
  • GIF files are not good for photographs—you lose quality and the files won't be compact. Use JPG files for photos.

JPG: Joint Photographic Experts Group
  • JPG files are best for images with many colors, such as photographs or scanned artwork
  • JPG compression is variable - JPG is a "lossey" system
  • While file sizes can be made quite small with this system, you often have to compromise between file size and picture quality
  • JPG files are not good for graphics with only a few colors, such as text or graphics with areas of flat colors. If you use JPG for these graphics, the files will be larger than necessary, and look "mottled."

PNG: Progressive Network Graphics
  • PNG is a newer graphics file format for the Web, but it's only supported by relatively newer browsers (but increasing)
  • PNG files are compact and versatile and can combine the best features of GIF and JPG, such as the ability to have transparent backgrounds or the ability to contain images with millions of colors
  • Despite this, the PNG format is still not as widely used, mostly because it's not supported by (quite) older browsers

SVG (Scalable Vector Graphics)
  • SVG may be used to draw images as geometric shapes that are filled and outlined. This makes file size much smaller
  • SVG vector files are compact and the images can be viewed at any scale without loss of clarity

EPS and TIFF for Print Publishing
  • EPS – Top choice for high resolution printing of illustrations to PostScript printers/Imagesetters
  • TIF - Top choice for high resolution printing of images to PostScript printers

When to use which? If a graphic has few colors, choose GIF. If an image/graphic has a lot of colors (such as a photo), choose JPG. Always turn anti-aliasing “On.”
Jill Saligoe-Simmel
Ortelius™ – map illustration software for Mac OS X
www.mapdiva.com

#21
Dennis McClendon

Dennis McClendon

    Hall of Fame

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

Seems a bit odd to suggest thatPNG is not widely supported (in 2009) but not mention that as an issue for SVG.
Dennis McClendon, Chicago CartoGraphics
chicagocarto.com

#22
woneil

woneil

    Will O'Neil

  • Validated Member
  • PipPipPipPip
  • 115 posts
  • Gender:Male
  • Location:Falls Church, Virginia
  • United States

While I really need and make use of most of Photshop's many features, it is tremendous overkill for most people. There are many much simpler and cheaper photo editors out there that can do a perfectly respectable job of preparing images for the Web. Some of the them are free, like Picasa.

I'm a great believer in the principle that you should use tools that are as powerful as necessary, and no more so. You could spend a great deal of time learning to make Photoshop do what you need. Among other options, Adobe Photoshop Elements is a good deal cheaper and easier to master than the full thing, and plenty powerful enough for most uses.
Will O'Neil
Author and amateur cartographer

http://analysis.williamdoneil.com/w.d.oneil@pobox.com

#23
Derek Tonn

Derek Tonn

    Legendary Contributor

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

PNG: Progressive Network Graphics

  • Despite this, the PNG format is still not as widely used, mostly because it's not supported by (quite) older browsers
When to use which? If a graphic has few colors, choose GIF. If an image/graphic has a lot of colors (such as a photo), choose JPG. Always turn anti-aliasing “On.”


Hi Jill!

Three items I bolded from portions of your previous quote need a quick response.

1. PNG Support. This is the argument web developers have been using for YEARS as a reason not to use .png. That's just it though...they've been using that argument for YEARS. Meaning that years have passed since certain browsers have not supported at least 8-bit PNG, and unless people are still using their Windows 95/98 OS or iMac G3s and haven't updated their browser software that whole time, it's really a moot argument. Either that, or people with compatibility issues on OLD browsers are also going to have a tough time with all the CSS, JavaScript and Flash that is found in MANY sites out there. 24-32 bit PNG still has more browser support issues, and animated .png isn't supported hardly at all yet! 8-bit .png though (the true .gif equivalent) should be as safe to use as anything you put into your web pages from a compatibility standpoint. Really, it is practically a non-issue in 2009.

2. Few colors = GIF. Again, based upon what I mentioned in my first response, I think this is poor advice. PNG (8-bit .png, in particular) is THE format to select for images with few colors about 98-99% of the time, in my experience. The occasional tiny iconography will sometimes be smaller as a .gif, but it's a rare exception. 8-bit .png is the way to go.

3. Anti-aliasing. Just curious here. Why do you say that people should ALWAYS turn anti-aliasing on? If there's one thing I've learned in the 7-8 years I've been optimizing electronic imagery, it is that there is no single magic bullet out there that always produces the best results. I see words like ALWAYS and NEVER and wonder a bit...as that just hasn't been my own experience.

It makes a BIG difference too what you do with files once they are in their various formats too. For example, there is a .png image on your web site home page:

http://www.mapdiva.c...rtl_screen1.png

...that is 203 KB in size. Simply "defragging" that image and combining/removing unnecessary chunks using automated batch solutions such as PNGSlim will take that file and reduce it down to roughly 29.58 KB in size after approximately 30 seconds of effort.

Posted Image
Current .png image before optimization - 203 KB

Now I'll attach the "optimized" version of that same image. Same dimensions, should look the same on-screen. The only difference is that the new image is 15% the original file's size...saving your site 1 MB in bandwidth for every 6 visitors to your home page. .gif couldn't come CLOSE to those results on that "image with few colors"...as an example.

Sorry for the long post! I just want to make sure and dispel a few of what I believe to be bits of potentially bad or incomplete advice when it comes to formatting images for the web. No offense! Most people make the same mistakes...which is why I'm doing my darnedest to set the story straight. B)

Attached Files


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

-->