1. Format: PNG format is preferred for images with simple forms generated by computers (such as logos and icons), while photos with rich colors must be JPEG. If there are few colors and no gradients, the GIF format should be used.
GIF is the most commonly used web image format. GIF holds up to 256 colors and works with almost all images except photos. It also has the ability to generate simple animations and transparent images.
The PNG format is relatively new and is also a format recommended by the W3C. PNG-8 can contain up to 256 colors, comparable to GIF; PNG-24 supports RGB mode, which can express any color with higher quality; PNG-32 adds an alpha channel based on PNG-24, which can be set transparent.
JPEG can save about 16.7 million colors and is often used to save photos. But other than that, JPEG is almost never used. If the image has fewer than 256 colors, or contains large areas of solid colors, JPEG will not perform well - the file size may be doubled to obtain a high-quality image.
When choosing an image format, you should comprehensively consider its scope of use, such as color, transparency, animation, etc., as detailed below. Various parameters can be compared through the export wizard of Photoshop or Fireworks. The selection criterion is that the file size should be as small as possible while maintaining acceptable image quality.
2. Color creation images should use RGB mode, not CMYK mode for printing. Don't worry about browser safe colors, since almost no one uses 8-bit monitors anymore. Color selection should refer to unified standards, such as visual identity (VI) systems. The number and effect of colors are important factors in determining the image format. For example, color gradients often produce a large number of colors. If saved as GIF, distortion will occur and the file size will also increase significantly. In this case, you should consider using PNG-24, PNG-32 or JPEG. Format.
3. Size Images produced using vector creation tools are often suitable for saving in PNG format, and their size should be determined in the vector drawing tool. Once it is converted into a bitmap, it cannot be easily scaled (especially it should not be enlarged). It is worth noting that PNG files created in Fireworks contain editable information such as layers, and the lines, shapes, and text in them are all vector graphics. Applying such an image to a web page should first perform an output operation to compress the file size, and the output PNG image will also be converted to a bitmap because editable information is lost. Therefore, image size adjustment should be completed before the output operation. The bitmap is not scaled to ensure that the outlines and gradients of the image are clear enough.
For existing bitmaps and photos, you should use Photoshop and other software to adjust the size before inserting them into the web page. Instead of using the width and height attributes in HTML language to change the image size. Directly using HTML language to control image size may cause serious image distortion.
Generally, images placed on web pages should be controlled to a relatively small size. If mixed with text, the width should be around 300 px. Even if it appears alone, the width should be less than 600 px. As for the height, it is appropriate not to exceed one screen.
4. Transparent GIF and PNG both support transparency, but in different ways. GIF simply sets one or several colors to be completely transparent, without considering the transparency of adjacent gradient colors. This means that if the background color changes significantly (or contains several contrasting colors), the transition to the transparent part will not be smooth and there will be 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 as (or close to) the background color of the target effect. PNG does not have this problem and can also be set to be translucent.
However, IE6 cannot display transparent PNGs correctly by default, and appropriate measures need to be taken.
5. Animations on animated web pages usually include Flash and animated GIF. Flash has powerful functions, rich effects, high image quality, and powerful creation software. It is the preferred form of web animation in most cases. The disadvantage of animated GIF is that it can only use no more than 256 colors, and it is difficult to create animations with complex effects. However, its advantage is that the file is small and can be played in any old or modern browser without plug-in support.