Image optimization:
- Image Quality Requirements and Image File Size determine the format of the image you use, and use a smaller image file to present a better image quality.
- When the image color is too rich and there is no transparency requirement, it is recommended to use jpg format and save it as high quality.
- When the image color is too rich and transparent or translucent, or the shadow effect is required, we recommend that you use the png24 format and perform png8 degradation for IE6 (or use a filter as a last resort ).
- When the image color is not rich, use the png8 format, regardless of whether it is transparent or not. This format is recommended in most cases.
- When an image has an animation, it can only be in gif format.
- You can use a tool to compress the image, provided that the color and transparency are not affected.
Merging multiple images: CSS Sprites Technology
- Gaps must be retained between individual icons. The gap size is determined by the container size and display mode. The advantage of this is that both fault tolerance and maintainability of images are taken into account.
- The arrangement of icons is also determined by the container size and display mode. Horizontal arrangement (container width is limited), vertical arrangement (container height is limited), diagonal line arrangement (container width and height are not limited), and left-side arrangement (container background is left), right (right of container background), horizontal center (horizontal center of container background), vertical center (vertical center of container background ).
- The size of the merged image cannot exceed 50 kb. the recommended size is between 20-50 kb.
- To ensure the quality of the Modified Image, keep the original PSD image, modify and add it in the PSD, and export the png image.
Classification merge:
It is best not to merge all icons into one image. In addition to controlling the image size, pay attention to the following methods.
- Merge images in the same arrangement according to the image arrangement to facilitate style control.
- Merge images of the same module or component according to the module or component to facilitate the maintenance of the module or component.
- Merge images of the same or similar sizes Based on the image size to make full use of the image space.
- Merge images of the same or similar colors based on the image color to ensure that the colors of the merged images are not rich enough to prevent color distortion.
- Combine the above methods.
========================================================== ======================================
There are many png images without considering low-end browsers. Now we recommend a white-tree article [original]. How to Use PNG?
