Elements of Web page image processing

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The production of Web pages is inseparable from a large number of image processing operations. Web page image processing and for printing, video image processing has a great difference, the website designer should have a targeted grasp of the Web page image processing methods and techniques. In general, consider the following elements.

1. Format

Simple images (such as logos, icons) that are generated by the computer are preferred in PNG format, while color-rich photographs must be JPEG. If there are few colors and no gradients, you should use the GIF format.

GIF is the most used Web page image format. GIF holds up to 256 colors, and is almost ideal for all images except photos. It also has the ability to generate simple animations and transparent images.

The PNG format is relatively new and is a recommended format for the consortium. PNG-8 can contain up to 256 colors, comparable to GIF; PNG-24 support RGB mode, that can display any color, high quality; PNG-32 adds an alpha channel on the basis of PNG-24, which allows transparency to be set.

JPEG can save about 16.7 million colors and is often used to save photos. But in addition, JPEG is hardly used. If the image color is less than 256, or contains a large solid color, the JPEG effect is not good--for high-quality images, the file size may increase exponentially.

Select the image format should take into account the scope of its use, such as the following detailed expansion of color, transparency, animation and so on. You can compare parameters by using the Export Wizard for Photoshop or fireworks. The standard of choice is to ensure acceptable image quality on the premise that the file should be as small as possible.

2. Color

The image should be created using RGB mode, not CMYK mode for printing. You do not have to consider the browser security color, because almost no one uses a 8-bit display. Color selection should refer to the unified standard, such as visual identification (VI) system. The number and effect of colors is an important factor in determining the format of the image, such as a color gradient often produces a large number of colors, if saved as GIF will produce distortion, the file size also increased significantly, you should consider using the PNG-24, PNG-32 or JPEG format.

3. Size

Images made using vector authoring tools are often suitable for saving in PNG format, and their dimensions should be determined in the vector drawing tool, and will no longer be easily scaled after they become bitmaps (in particular, they should not be magnified). It is noteworthy that the PNG file created in fireworks contains editable information such as layers, where the lines, shapes, and text are vector graphs. Applying such an image to a Web page should be preceded by an output operation to compress the file size, and the exported PNG image will be converted to a bitmap because it loses editable information. Therefore, the image size adjustment should be completed before the output operation. Bitmaps are not scaled to ensure that the contours and gradients of the image are clear enough.

For existing bitmaps and photos, you should first use Photoshop and other software to adjust the size and then insert into the Web page, instead of using the width and Height properties in the HTML language to change the image size. Controlling the image size directly using HTML language may cause the image to be distorted seriously.

In general, a picture placed in a Web page should be controlled to a smaller size. If mixed with the text, the width of the best in the px around. Even if it appears alone, the width is best below the px. As to height, to no more than a screen is advisable.

4. Transparent

Both GIF and PNG support transparency, but not in the same way. GIF simply sets one or several colors to be completely transparent, regardless of the opacity of the gradient that is adjacent to it. This means that if there is a significant change in the background color (or if there are already several contrasting colors), there will be no smooth transition to the place where the transparency is, and there is an obvious dividing line. If you want to create a transparent GIF, it is necessary to set the canvas background color to be the same (or close to) the background color of the target effect. PNG does not have this problem and can also be set to semitransparent.

However, by default, IE6 does not display transparent PNG correctly, and you need to take appropriate action.

5. Animation

Animations on Web pages typically include two of flash and animated GIFs. Flash features a powerful, rich effect, high image quality, and has a strong authoring software, is the most preferred form of Web page animation. The problem with an animated GIF is that it can only use no more than 256 colors and it is difficult to make complex animations, but it has the advantage of small files and can be played in any old-fashioned or modern browser without plug-in support.