Windows 8 icons set: Get more than 15000 icons FREE!

You accept to be included in our newsletter (We only send amazing freebies like this, no ads or crap, promise! )

Tweet about us and say thanks in comments ;)

Amazing freebies every week in your e-mail, don't miss the next ones with our newsletter, Sign up now.

Tweet about us and say thanks in comments ;)

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

Comments and suggestions in here
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.

10 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 :)

  2. takezo316
    October 27th

    Nice tip.. every day I learn something new

    • TS Editorial
      October 27th

      Thank you takezo, we are happy of being helpful to our visitors…

  3. Great ! i alway love your tips :)

  4. thanks good tip

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

    • Designer
      January 21st

      Thank you for your comment. At least this browser preview could help to detect transparency incompatibilities.

  6. Very straight forward introduction. I was looking for something like this, thanks!

  7. [...] 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 [...]

Leave a Reply