15 replies to this topic

[frax]

dear administrators -- may I suggest a bullet for guidelines for the map gallery: I would really appreciate if we could recommend people to post the map that they want comment on in some format that is easy to view on the web: not to big (in pixel size and file size) and in a common format (jpg preferably). This doesn't exclude any pdf's or giant jpegs, but just as an option.

My attention span (adn time) is limited, and I have skipped those that posted pdf's lately...

[Hans van der Maarel]

Hugo,

Good point. I'll get on it right away.

[LenHoffman]

I hate to seem a bit dim witted on the subject but when you can't get your AI doc to export to jpg what is the other best process I had to create a work around maybe you might have a better solution -- this is a bit new to me ( AI and web posting)

thanks,

Len


Hugo For my part I'm sorry the file was so large I'll try to improve next time.

[Martin Gamache]

Open your ai or Illy generated PDF in Photoshop and do a save for web...lets you create Jpeg or GIF or PNG document very easily.

[EcoGraphic]

Len,

Optimizing for Web from Illustrator:

JPeg Optimization

Illustrator lets you do a 'Save for Web' straight out of illustrator. This is not the same as 'Export to JPeg' as it produces a JPeg which is 'optimized' for web viewing, meaning it has removed enough information to make the file smaller, but still keep it legible. Once you are in 'Save to Web' mode also be sure to look on the right and change the values in your output to anything from 30% to %100 quality to knock down the file size even more.

GIF Optimization

You can also reduce your file size by optimizing as a GIF if you are dealing with a graphic that is just solid colours. By optimizing this way, you can choose the number of colours in your pallette from 2 to 256 (rather than choosing a quality % like a Jpeg does) and thus decrease file size again. The advantage of a GIF, is also that it keeps line work looking sharper. Jpegs are made to show milliions of colours, so they aren't that great for optimizing line work or text, and as you decrease the quality for optimization the linework and text can get quite 'fuzzy' or 'smudgy' looking. Another trick if you are optimizing as a GIF , and want to reduce your pallette size while retaining a certain colour in your image, is to lock in your colours in the pallette. Just set your pallette to a larger number of colours, click on the colour you need to retain or use the eyedropper to choose it from your image, and hit the lock icon. This way when you reduce your pallette size to 4 colours or whatever, it won't arbitrarily eliminate that colour from the pallette.

Using Slices to reduce file size

Just looking at the Jpeg you posted for your road map, there is a lot of blank white space included in the Jpeg image. This means you have a bunch of artwork outside your artboard that it is including, even though you can't see it. Probably due to the fact that Illustrator uses Clipping Masks instead of cropping. Before you go to optimize it, use the slice tool (looks like an Exacto knife) to 'slice' your image. Just create one large slice around the whole artboard, and when you go to optimize your image through 'Save for Web' be sure to use the icon that shows the slice tool with the little black arrow beside it to select the artboard slice. When you optimize it, then save it and be sure to choose the option for 'selected slice only' at the bottom of the screen, so that it will only save that portion of the image as optimized. Slices are also useful if you are ever optimizing an image where you need to optimize one part of the image as a GIF, and the other as a Jpeg. By slicing the image, you can optimize different parts of the image as needed.

2-Up and 4-Up

When you optimize images, remember also to make use of the 2-Up and 4-Up options on the optimization page. This allows you to view 2 or 4 different versions of your optimized image and choose the one that works the best, JPeg or GIF. It also allows you to compare it with the original to see how much the quality has degraded.

This should help with your file size.

As Martin was saying you can also open your Illustrator file in Photoshop, reduce the size of the file dimension-wise in 'Image size' and then optimize it in the same way I just described by doing a 'Save for Web'.

Hope this helps. This stuff really has its own language........

Cheers,

Gillian

[Martin Gamache]

Thanks Gillian

I always wondered what the slice tool was for.

mg

[LenHoffman]

Thanks Gillian

We'll see how it works when I update the Posting ..

You provided a very in depth explanation for me and maybe others.... I think it should be added to the pinned Map Guidlines so that it whould be helpful for all of us "AI in Learning" users out here. What do you think Hans?

Thanks again,

Len

[frax]

for a very quick and dirty trick to get a bitmap (jpeg) out of any software is to take a screenshoot (prtsc) and paste in into your favorite image viewer.

[EcoGraphic]

for a very quick and dirty trick to get a bitmap (jpeg) out of any software is to take a screenshoot (prtsc) and paste in into your favorite image viewer.

<{POST_SNAPBACK}>

Ah yes......... screen shots..........I am all about screen shots these days.......

This software is awesome. It even lets you record a video of you using your software if you need to create an educational clip for a specific software procedure:

Snag It Screen Capture

Tutorials anyone?


Gillian

[Derek Tonn]

Please, please, PLEASE consider the use of 8-bit .png instead of .jpg or .gif when posting those map graphics. .jpg format should really only be used on the web for two purposes:

1. Photographic images, and
2. Drawn images that need to be dynamically introduced within Flash/XML.

Any map graphics saved in .jpg format that have text in them will become noticably "Blurry" around the characters of text. That, not to mention that they are typically as much as 30% larger than .gif files and 60+ percent larger than 8-bit .png!

Unless you are dynamically introducing map graphics as a part of Flash files, there is really no good reason not to be using the 8-bit .png format in your presentation of graphics on the Web. The quality is equal/superior to .jpg, and will load on a browser in less than half the time!

I'll get down off my soapbox now......

[EcoGraphic]

Please, please, PLEASE consider the use of 8-bit .png instead of .jpg or .gif when posting those map graphics.  .jpg format should really only be used on the web for two purposes:

1. Photographic images, and
2. Drawn images that need to be dynamically introduced within Flash/XML.

Any map graphics saved in .jpg format that have text in them will become noticably "Blurry" around the characters of text.  That, not to mention that they are typically as much as 30% larger than .gif files and 60+ percent larger than 8-bit .png! 

Unless you are dynamically introducing map graphics as a part of Flash files, there is really no good reason not to be using the 8-bit .png format in your presentation of graphics on the Web.  The quality is equal/superior to .jpg, and will load on a browser in less than half the time!

I'll get down off my soapbox now......

<{POST_SNAPBACK}>

Are 8-bit .png files now recognized by all browsers? Last time I checked they weren't even though it was an available format. They are certainly superior for colour as well as they will show up the same on both a Mac and PC. I guess this is probably irrelevant here as everyone should be up to speed with their browser upgrades, and using something better than Internet Explorer.......

You can read more about this issue here:

PNG Support in Browsers

Note: Bear in mind that if you are designing for the web, you need to keep W3C compliance in mind. Otherwise your site will not be compatible in older browsers and therefore inaccessible to many. For more info on designing properly for the web check out courses by WestCiv:

WestCiv CSS Courses online

You just got it all figured out and then they told you, you needed to be W3C compliant...............Ahhhhhhhhhhhhhhhhhh

Cheers,

Gillian

[Derek Tonn]

Are 8-bit .png files now recognized by all browsers? Last time I checked they weren't even though it was an available format. They are certainly superior for colour as well as they will show up the same on both a Mac and PC. I guess this is probably irrelevant here as everyone should be up to speed with their browser upgrades.

You can read more about this issue here:

PNG Support in Browsers

Note: Bear in mind that if you are designing for the web, you need to keep W3C compliance in mind. Otherwise your site will not be compatible in older browsers and therefore inaccessible to many. For more info on designing properly for the web check out courses by WestCiv:

WestCiv CSS Courses online

Cheers,

Gillian

Gillian,

I think the confusion comes in from the fact that there are actually two types of .png files: 8-bit and 24-bit. 8-bit is recognized by 99+ percent of all browsers out there, and is meant to replace .gif files (or mis-used .jpg-formatted files). 24-bit is NOT universally supported by browsers yet, and is designed to eventually replace .jpg on the web.

8-bit = DRAWN images = .gif or .png (.png is best, with the smallest file sizes)
24-bit = PHOTOS = .jpg or .png (.jpg is best for now, until most/all browsers will recognize 24-bit .png)

Most people hear that PNG is not universally supported, which is essentially only HALF true (24-bit). Related to 8-bit, I think you should generally feel as safe using those files as you do using XML, javascript, Flash, etc. For a somewhat-dated list of browsers that are compatible with 8-bit .png files, you can visit: http://www.libpng.or...ng/pngapbr.html

I hope that helps! You have to bear with me a bit....as I "preach" bandwidth conservation in my other life.

[Nick Springer]

IE does support both 8-bit and 24-bit PNGs, but it only supports 1-bit transparency in PNGs, not the full 8-bit alpha channel. So, posting of PNGs is fine as long as you don't need a transparent background.

A side note: there are ways of making full PNG alpha layers work in IE using CSS and Javascript - Google Maps uses it for the drop shadows on their push pins and popup ballons. A List Apart has a great tutorial on making this work.

[EcoGraphic]

I hope that helps!  You have to bear with me a bit....as I "preach" bandwidth conservation in my other life.

<{POST_SNAPBACK}>

Funny that that is now a form of conservation............ along with trees......

Thanks for the update......... still wondering about the W3C backwards compatability issue though.........

Gillian

[Derek Tonn]

Funny that that is now a form of conservation............  along with trees...... 

Thanks for the update......... still wondering about the W3C backwards compatability issue though.........

Gillian

Actually, saving bandwidth does eventually, indirectly save the environment....as computers are not exactly the most "environmentally friendly" products on the planet! If you're a true "tree-hugger", you gotta care about all of the chemicals and acids that are used to build computers and servers as well.....

I don't think W3C compatability is of any concern. I couldn't make it through the entire link in one sitting, but if you've got an hour or two to kill: http://www.w3.org/TR...C-PNG-20031110/

One of the highlights though:

The PNG specification enjoys a good level of implementation with good interoperability. At the time of this publication more than 180 image viewers could display PNG images and over 100 image editors could read and write valid PNG files. Full support of PNG is required for conforming SVG viewers; at the time of publication all eighteen SVG viewers had PNG support. HTML has no required image formats, but over 60 HTML browsers had at least basic support of PNG images.

Public comments on this W3C Recommendation are welcome. Please send them to the archived list png-group@w3.org .

Hope that helps!

Derek