Quick Tip: How to optimize an image for the web on Illustrator

Oct 26th/2010     8

• illustrator

Comments and suggestions in here

Thanks for leaving us your comments and suggestions

• 
• 
• 
• 
• 
• 

Icon by Iconshock.

Optimizing for the web is something that every good web designer needs to know. You can have the brightest idea but when it comes to exporting the file weight goes beyond 2 mb, while another guy made a regular design but it weights only 15 K. the website with the poor design will load faster and it’s probably that the standard person will not wait until the good 2 mb design loads. That’s why we want to show you on this tip how to easily prepare your file to be web optimized.

By default, most of the Illustrator files do not reach high file weights due to the fact that they’re made primarily in vector, using reduced amounts of space. But for those cases when you have embedded bitmaps or excessive amounts of vectors, you will need to optimize using File>Save for Web and Devices.

This panel helps you to prepare your files for the web, let’s see how it looks like:

1. Display options: Switch between the different previewing modes, which are display only the original file, only the optimized, both of them of the original and 3 different optimized versions.
2. Preview area: Watch the different previews along with an estimated size, format and quality.
3. Toolbox: Here you can navigate across the preview, zoom in and zoom out and most important, work with the slices in case that you’re working with them.
4. Preset Selector: Here you can select your desired output format, which includes PNG, JPEG and GIF files, also determined the transparency and interlaced values.
5. Optimize Menu: Watch the color table that’s going to be implemented with every select optimization, manage the size of the file and define either if export or not the layers.
6. Take a look at how your design is going to be seen by the others by having a quick browser preview.

Some key facts to determine if a file is properly optimized is that the color mode has been set to RGB, the color information is displayed well and the size does not exceed the 200 K. From now on you should use this panel to save all your web files, it’s the best way to keep a well design that everybody will enjoy and access quickly.

 

 

WebDesignShock Editorial

Author: Juan Pablo Sarmiento Founder and curator of:
iconshock
themeshock
boxofbundles
wpthemegenerator
webdesignshock

   

8 Responses to “Quick Tip: How to optimize an image for the web on Illustrator”

1. Andrea ospin
   October 26th

   Thanks for the tip, it will be handy :)

   Reply
2. takezo316
   October 27th

   Nice tip.. every day I learn something new

   Reply
   • TS Editorial
     October 27th

     Thank you takezo, we are happy of being helpful to our visitors…
3. Childmonster
   October 28th

   Great ! i alway love your tips :)

   Reply
4. juan
   October 28th

   thanks good tip

   Reply
5. Internet Buff
   October 3rd

   Um… never really used the browser preview option. Won’t that be the same as the optimized view? Must try it in future to check. Thanks for the post.

   Reply
   • Designer
     January 21st

     Thank you for your comment. At least this browser preview could help to detect transparency incompatibilities.
6. My Favorites On Week #2 | Childmonster says:

   October 30, 2010 at 6:22 pm

   [...] VHS Style Read More Quick Tip: How To Optimize An Image For The Web On Illustrator Read More Create A Mummy Text Effect Read More How To Create A Modern CV/Resumé With InDesign [...]

   Reply