Illustrator contains various tools for designing web page layouts as well as creating and optimizing web graphics. For example, use safe web colors, look for a balance between quality and file size, and choose the best file format for your graphics. Web graphics have the advantage of snippets and link maps, and you can choose from a variety of optimization options to make sure your files display properly on the Web.
About Web Graphics
When designing graphics for the Web, you have to deal with problems that don’t occur with graphics for print.
To make informed web graphics decisions, keep the following three guidelines in mind:
Use safe web colors
Color is often a key aspect of an object. However, the colors in the mounting area are not always the colors that will appear in another system’s web browser. You can prevent dithering (a method of imitating unavailable colors) and other color problems by taking two precautions when creating web graphics. First, always work in RGB color mode. Second, use safe Web colors.
Look for a compromise between quality and file size.
It is important to create small files to distribute images on the Web. Web servers store and distribute smaller images more efficiently. Viewing tools download such images faster. The size and estimated download time of web graphics are displayed in the Save for Web and Devices dialog box.
Choose the best file format for your graphics
For quality display and creation of small files for the web, you need to save different types of graphics in different file formats. For more information about formats, see Optimize Web Graphics Options.
Many Illustrator templates are created specifically for the web, including web pages and banners. To select a template, choose File > New from Template.
About Pixel View
For web developers to create accurate pixel patterns, you must add the pixel-alignment property to Illustrator. When the pixel-alignment property is enabled for an object, all of its horizontal and vertical segments are aligned to the pixel grid, which provides a clear outline. As long as this property is set for the object during any transformations, it is re-aligned to the pixel grid according to the new coordinates. To enable this property, you must select the Align to Pixel Grid check box in the Transform palette. In Illustrator, the Align New Objects to Pixel Grid check box is also available at document level, which is the default for web documents. If this property is turned on, the pixel-align property is set by default for any drawn object.
By saving the object in a bitmap format (such as a JPEG, GIF, or PNG file), Illustrator rasterizes the object at 72 pixels per inch. Choose View > Pixel Preview to see what the objects will look like after being rasterized. This is very useful if you want to control the exact position, size, and smoothing of objects in a rasterized graphic.
To understand how Illustrator divides objects into pixels, open a vector object file, choose View > Pixel Preview, and zoom in on the object so that you can see each pixel. The location of the pixels is determined by a pixel grid that divides the editing area in one-point (1/72″) increments. You can see the pixel grid if you select the 600% scale. When you move, add or transform an object, it is snapped to the pixel grid. As a result, any smoothing along the “anchored” edges of the object (usually the top left edge) disappears. Now deselect “Preview” > “Pixel Preview” and move the object. You can now position the object between the grid lines. See how this affects the smoothing of the object. You can see that even minor adjustments can affect the rasterization of the object.
The pixel grid depends on the origin of ruler coordinates (0,0). Moving the ruler origin will change the rasterization of the Illustrator object.
Tips for creating Illustrator images for mobile devices
To optimize graphic content for mobile devices, save graphic objects created in Illustrator in any SVG format, including SVG-t, which is designed specifically for mobile devices.
Create content according to the SVG standard. When you publish vector images to mobile devices, SVG creates files that are small in size, independent of screen size, provides superior color management, is scalable, and makes text editable (as part of the source code). In addition, the format of SVG is based on XML, so it allows you to include such interactive features as highlighting, tool tips, special effects, sounds and animation.
We recommend that you organize your work around the finite dimensions of your target mobile devices from the start. Although the SVG format supports scaling, working in a set size can ensure that the final images are optimized for the target device in quality and size.
Set the color mode of Illustrator to RGB. The SVG format can be viewed on devices with RGB bitmap displays, such as monitors.
To reduce the file size, try reducing the number of objects (including groups) or making them less complex (containing fewer points). Using fewer points greatly reduces the amount of text information needed to describe the graphical objects in the SVG file. To reduce the number of points, choose Object > Path > Simplify and experiment with different combinations of settings until you find a balance that achieves the quality you want with as few points as possible.
If possible, use symbols. Symbols define vectors that describe an object only once. This is useful if the composition contains objects such as background images of buttons applied repeatedly.
When performing image animation, limit the number of objects you use and, if possible, try to reuse objects to reduce file size. Apply animation transformations to groups of objects rather than to individual objects. This avoids code repetition.
Try to use the SVGZ version, i.e. the gzip compressed version of SVG. Compression, depending on the content can significantly reduce the file size. Text is best compressed while binary coded content like embedded bitmaps (JPEG, PNG or GIF files) is only slightly compressed. SVGZ files can be decompressed using any application that opens gzip packed files. To use SVGZ successfully, you must verify that the target device supports decompressing gzip files.
