5 aspects to help you thoroughly master the storage WEB format in AI

The purpose of “storage as the format used by WEB” in AI is to optimizepictureDisplay effect on website or other screen, such as tablet or mobile phone. The term “optimization” refers to the optimal combination of image size and quality. We hope that images can be loaded in the web page as soon as possible, so the images must be small, but we do not want to damage the quality of the images. The command “Save as WEB Format” allows us to preview the optimized vector graph, so that we can debug to the best effect.

In this article, we will take you to review the format of images saved as WEB, and then show you which typeworksWhich format is suitable for saving. UIDesignTeachers, learn quickly!

1、 Dialog box for saving as WEB

进入【文件>存储为WEB所用格式】就会弹出对话框，可以说这个命令几乎就是一个独立的应用，所以这个对话框窗口占据了整个屏幕。

You can browse your works in three ways. The “Original” on the left can simply show the effect of the original, but because you want to preview the optimized effect, this option has little effect. You can also go to the “Optimization” option, where you can preview the optimized effect, or you can select the “Duplex” option, which allows you to preview the original and the optimized work by comparing the left and right sides. In the figure below, the original is on the left and the optimized effect is on the right (in this case, it is optimized as GIF format).

Select the preview scale value in the drop-down box at the lower left corner. You can enter a scale to scale the preview picture, or you can adjust and scale the picture by using shortcut keys.

Click the “Preview” button at the bottom left corner, you can immediately see the display effect of this picture in your default browser. If you want to know the effect of other browsers, you need to click the earth on the right side of the buttonIconTo add more.

The most important part of the interface saved in WEB format is the image size. The file type and size of this image will appear below each preview. As can be seen in the figure below, the original on the left is in ai format, with a file size of 1.85M, while the optimized version on the right is in GIF format, with a file size of 14.53K. Since it’s about finding the best balance between file size and quality, you need to keep an eye on file size at all times.

2、 GIF file format

GIF (Graphics Interchange Format) is the oldest and most frequently used image format on the Web side. Especially when the color of the image is flat (as shown in this example), this format is ideal for the image.

We should know that the color mode used by GIF is the index color mode, and the index color mode is to select the colors used in RGB images, and then build new onesTintingBoard, thereby reducing the capacity of the image without reducing the image quality.

There are many GIF presets in the dialog box saved in WEB format. You need to carefully check the quality and size of pictures under different options. You can see my settings in the following figure. I chose the GIF color of 128. At this time, the effect of the picture is good, and the size of the picture is only 13.71K.

Next, let’s try to lower the color value and set the color value to 8. At this time, you will see that the size of the image becomes 8.702K, but the image loses its quality. The edges begin to appear jagged, because there is not enough color to support a smooth transition between colors. Although we only use a few colors in AI, the anti aliasing processing of AI itself will use more colors to smooth the edge aliasing.

GIF colors will be limited to those filtered “web security colors”. Today, we don’t need to worry about this. At present, the monitors we use can display thousands of colors. But in the past, only 216 colors can be used under the old Apple system and Windows system, so UI designers at that time would choose colors very carefully.

Therefore, if you want to ensure that the color of your pictures is consistent on each platform, you can limit your color matching to this color gamut. In this example, we use the “GIPF Web Palette” preset, and you will see that the colors in the image have changed greatly.

A GIF image can also be black and white. You can select black and white and then choose diffusion to make the color transition more natural. You can select different diffusion effects by debugging the color imitating slider. But the overall effect of the picture is definitely the LOOK of the 1960s!

The GIF format can support the transparency of a dimension. What does that mean? This means that images in this format can be displayed as completely invisible or completely visible without intermediate transitions. Therefore, if you have transparent gradients or soft hazy shadows in your pictures, you’d better give up this format.

On the right side of the checked transparency option is a color selection parameter called “stray edges”. This will add a thin edge around the object edited in the picture, which is similar to the stroke in PS. If you want to place this GIF image in a colored background, you can select the edges with the same color as the background here. This will make the picture and background blend more naturally.

You can also check “Cut to the drawing board”. When you check this option, the size of your picture will be consistent with the size of your drawing board. When you remove the check, the software will cut according to the size of the objects you draw. The parts on the drawing board that have no artwork will be cut. You will probably use this setting frequently, because sometimes, there is no need to keep the part outside the object we are drawing, and finally the size of the image can become smaller.

Now let’s take a look at the parameter group of image size, in which you can reduce or enlarge the optimized image. The image size refers not to the file size of the image, but to the size of the image, which is represented here as width and height. This is where AI is superior to pixel based image processing software. If you want to enlarge your image from the optimized output part, AI can enlarge it, while maintaining the quality of the output results. This is the advantage of vector graphics. If you use PS, when you zoom in on the pixel image, the work will look blurry.

Under the setting parameters of width and height, there is a drop-down box option. You can select different options for your optimization scheme. If the proportion of text in your work is large, you can select “optimized text”. The text here refers to the text that can be edited with the text tool. The text that has been converted is regarded as a picture.

Or, if I select “Optimization Draft” below, you can see the changes before and after optimization. The edges become smoother.

Let’s continue to look at the color table at the bottom right, which contains each color in the optimized image. In fact, you can change a color by double clicking. Just like I changed green to purple in this example, when you mouse over the color block, there will be a line of small words to remind you what color to replace. This way you can save a work as a multi color version without changing the original image.

There is a row of icons at the bottom right of the color table, which allows you to adjust the color more. You need to select a color palette first, and then you can further set it as the web page security color, or lock or delete it. The asterisk in the color palette indicates that it has been converted to the web page security color. When the mouse is over, it will prompt the color value of the replaced web page security color.

There are other GIF parameter settings here. For example, you can see that there is a staggered check box, which is an option required by previous technologies, but now it is no longer required by technological progress.

3、 PNG-8 file format

PNG format is usually more common and popular than GIF. Among them, PNG-8 is similar to the GIF with 256 colors. Check the transparency and support color copying. The “8” here means an 8-digit picture. The difference between GIF and GIF is the way to compress images. GIF uses the “lossy” method, which is to lose part of the data to achieve the goal of making the file smaller. PNG is lossless. Because of the compression algorithm it uses, the final file size is significantly smaller than GIF. Then the question arises, why use GIF when PNG can be used? Because, unfortunately, not all browsers support the PNG format (for example, IE6 does not support it! IE ah… always hurts). However, as more people upgrade their browsers, this problem will gradually disappear. Therefore, the next time GIF is decisively replaced with PNG-8, their settings are almost the same. You already know it, don’t you?

4、 JPEG file format

JPEG format was originally used to compress photos, but now it can also be used in vector images with color transitions. JPEG format is 24 bit, which means it can support 16 million colors. The JEPG compression method is lossy. If you try to compress too much, the quality of the image will also decline.

You can check the “Continuous” option to load images in multiple threads, or you can reduce the defects in image quality by adding blurring to images. However, these two methods are neither ideal nor practical. They were all used in the old days of dial-up Internet access.

Like GIF and PNG-8, you can choose the optimization method of the image or whether to cut the image to the canvas. You can also set the size of the image. But JEPG has no color table, because JEPG uses RGB color mode instead of index color mode.

JPEG is applicable to color transition images, but if the color is a flat color block, its performance is not very good.

5、 PNG-24 file format

The PNG-24 format, as its name implies, refers to a 24 bit image. In some ways, it combines the advantages of GIF and JPEG, and is a better format. Like JPEG, it can support tens of millions of colors, and PNG-24 can be used for some shadows that have been blurred or gradient blended. But these will increase the size of the image, causing difficulties in loading.

But at the same time, you should consider that PNG images are transparent backgrounds. Although JEPG images will not lose quality and have high quality, PNG images can allow you to put your work on any background. Considering this flexibility, you may have to choose PNG. As shown in the following figure, after exporting with PNG-24, it can be placed on any texture background.

Postscript

Do you remember those kids who still worry about outputting pictures? In fact, each format has its advantages and disadvantages. You should try more in actual projects to find the best solution. Save as WEB format has always been at the end of the design process, so it has not attracted everyone’s consideration and attention. I hope this article can help.

Enter the forum and hand in homework: http://www.missyuan.com/thread-758764-1-1.html