close ✖
bypeople

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

12
Created by Admin on Oct 30 2014
aicanvas00
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.

aicanvas01

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

aicanvas02

  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.

aicanvas03

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.

Our Curators Become curator

Top

This a test message in global notification
Your download will start shortly.
bypeople
bypeople

Done!

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Browse
Done

Thank You!

Your post has been received, and will be reviewed by a curator

bypeople