To give you illustrator software users to share a detailed 5 aspects to help you thoroughly grasp the storage in the Web format.
A dialog box saved as a web
Entering the file > Save as Web format will pop up the dialog box, which can be said to be almost an independent application, so the dialog window occupies the entire screen.
You can browse through your work in three different ways. The leftmost "manuscript" can simply show the original effect, but because you want to preview the effect after being optimized, this option has little effect. You can also come to the "optimize" option, where you can preview the effect after the optimization, or you can choose "Double", which will allow you to preview the original and the optimized works in contrast. In the following illustration, the left side is the original, and the right-hand side is the optimized effect (in this case, it is optimized as a GIF format).
In the lower left corner of the Drop-down box option to select the zoom value of the preview, you can enter a scale to scale the preview of the picture, you can also use the shortcut keys to adjust and scale the picture.
Click on the lower left corner of the "Preview" button, you can immediately in your own default browser to see the display of this image, if you also want to know the effect of other browsers, you need to click on the button on the right side of the earth icon to add more.
The most important part of the interface saved as Web format is the size of the picture, and the file type and size of the picture appear below each preview. As you can see in the image below, our left manuscript is the AI format, the file size is 1.85M, and the right side is optimized for GIF format, and the file size becomes 14.53K. Since it's about finding the best balance between file size and quality, you need to keep a focus on file size.
GIF (Graphics Interchange Format) is the oldest and most frequently used picture format on the Web side. Especially when the color of the picture is more flat (as shown in this example), this format is ideal for pictures.
We should know that the color pattern used in GIF is indexed color mode, the indexed color pattern is the color used in selected RGB images, and then the new palette is built, which reduces the size of the image without reducing the quality of the image.
A dialog box saved as a Web format has many GIF presets, and you need to look at the quality of the pictures and the size of the 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 adjust the value of the color lower, set the color value to 8, then you will see the size of the picture changed to 8.702K, but the picture lost quality. The edges begin to appear jagged because there is not enough color to support a smooth transition between colors. Although we use only a small amount of color in the AI, the AI's anti-aliasing will use more colors to smooth the edge of the jagged edges.
The color of the GIF is limited to those filtered "Web page security colors." It's no longer necessary to worry about it today. At the moment, the monitors we use are good for thousands of colors, but in the past there were only 216 colors available under the old Apple system and windows, so the UI designers were careful to pick colors.
So, if you want to make sure that your images are consistent across each platform, you can limit your color to the gamut. In this example, we use the "Gipf Web Palette" Preset, and you'll see that the colors in the picture have changed a lot.
A GIF image can also be black and white, where you can choose black and white and then choose Diffusion to make the color transition more natural. You can choose a different diffusion effect by debugging The Imitation Color slider. But the overall effect of the picture is definitely the 60 's look!
The GIF format can support a dimension's transparency. What does that mean? The picture in this format can be shown as completely invisible or completely visible, without intermediate transitions. So, if you have a transparent gradient or soft dim shadow In your picture, it's best to give up the format.
Immediately to the right of the check transparency option is a color selection parameter called "Miscellaneous Edge." This adds a thin edge around the edited object in the picture, somewhat like a stroke in PS. If you want to place this GIF image in a colored background, you can choose the same colored edges as the background. This makes the picture and the background blend more naturally.
You can also check "cut to artboard", when you check this option, the size of your picture will be consistent with the size of your artboard, and when you remove the check, the software will be trimmed according to the size of the object you are drawing, and those parts that are not on the artboard will be cut off. This setting is likely to be used often, because sometimes the part of the object we are drawing does not have much need to keep, and the final picture size can be smaller.
Let's look at the image size of this parameter group, which you can reduce or enlarge the optimized picture. The size of the picture is not the size of the picture, but the size of the picture, expressed here as wide and high. This is where the AI is superior to pixel based image processing software, if you want to enlarge your picture from the part of the optimized output, the AI can enlarge it, and the output also retains its quality, which is the benefit of the vector graph. And if you're using PS then when you zoom in on the pixel, the work will look blurry.
Under the wide and high setting parameters, there is a dropdown box option, you can choose different options for your optimization, if your work is a large proportion of text, then you can choose to "optimize the text", where the text refers to the text tool can be edited text, which has been converted text is considered as a picture.
Or if I choose "optimized artwork" below, you can see the changes in the artwork before and after the optimization. The edges have become smoother.
Let's continue to look at the lower-right color table, which contains each color in the optimized picture. In fact, you can simply double-click to modify a color. As I have changed green to purple in this example, and when you mouse over the color block, there will be a line of small print to indicate what color you want to replace what color. This way you can save a work as a variety of colors without changing the original image.
There is a row of icons at the bottom right of the color table, and this row of icons allows you to make more adjustments to the colors. You first need to select a color swatch, and then you can further set it as a Web page security color, or lock or delete it. An asterisk in the Swatch indicates that it has turned into a safe color for the Web page, and when the mouse is over, it prompts for the color value of the replaced page's security color.
There are other parameter settings about GIF, for example, you can see a staggered check box, which is the choice of past technology, and it is no longer necessary for technology to progress now.
The PNG format is often more popular than GIF, and is also preferred. Among them, PNG-8 is similar to a color of 256, check transparency and support imitation color gif. The "8" here means the 8-bit picture. So the difference between GIF is that the image is compressed in a different way. GIF uses a "lossy" approach, which uses the loss of some of the data to achieve the goal of making the file smaller. PNG is lossless because it uses a compression algorithm that makes the final file size significantly smaller than GIF. So the question is, why use GIF when you can use PNG? Because, unfortunately, not all browsers support the PNG format (for example, IE6 does not support it!). ie Ah ... Pain all the time). But as more people upgrade their browsers, the problem will not exist. So, the next time to decisively replace GIF with PNG-8, their settings are almost a little different. You're already familiar with it, aren't you?
The JPEG format was originally used to compress photos, and can now be used in vector graphs with color transitions. The JPEG format is 24-bit, so it means it can support 16 million colors. JEPG compression is lossy, and if you try to compress too much, the quality of the image will drop.
You can select the "continuous" option to do multi-line Chengga pictures, but also by adding fuzzy to the picture to reduce the quality of the image of the flaw, but these two methods are neither very ideal, nor practical necessity. They are all used in the old days of dial-up surfing.
Like GIF and PNG-8, you can choose the image optimization or whether to cut the picture to the artboard, you can also set the size of the picture. But JEPG does not have a color table, because JEPG is used in RGB color mode, not indexed color mode.
JPEG is suitable for color transition pictures, but if the color is a more planar color block, it is not very good performance.
The PNG-24 format, as the name implies, refers to the 24-bit picture. In some ways, it blends the benefits 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 a blur or gradient transition shadow. But these will increase the size of the picture, causing difficulties in loading.
But at the same time you have to consider the PNG format of the picture is transparent background, although the use of JEPG format quality is not lost and relatively high quality, but the PNG format image allows you to put the work on any background, weighing this flexibility, you may have to choose PNG. As shown in the following figure, you can put it on any texture background after you export it with PNG-24.
Well, the information above is a detailed 5 aspects of the software that the illustrator has brought to you to help you get a thorough grasp of all the content that is shared in the format used for the Web, you see the users here, small knitting believe that everyone is very clear now, Hope that the small series of information to share above can bring useful help to everyone.
