Image Type:
png8--256 support transparent color, 8 bits
png24--2 24 th color, transparency is not supported, 24 bits
png32--2 24 th color, transparent support 32 bits
png lossless compression, JPEG is a lossy compression, different image formats is important for each image format has its own characteristics, choose for different business scenarios.
Different picture formats commonly used in business scenarios:
jpg lossy compression, compression rate, does not support transparency, most require no clear picture of the business scene
png support transparency, good browser compatibility, most business scenarios require transparent picture of
better webp compression, there are compatible in ios webview issues, Andrews all
svg vector code embedded, relatively small, relatively simple scene style pictures, picture style is relatively simple business scenarios
How to compress pictures:
For the real picture situation, give up some color information is relatively insignificant.
1, CSS Sprite figure: the use of some images on your website integrated into a single picture
Benefits: reduce your site's number of HTTP requests
Cons: The combined image is too large, a load more slowly, so if it does not load the entire page lost icons.
Solution: Sprite map can not be too large, icons divided in multiple Sprite figure. The business-related, the split Sprite FIG.
Production Sprite Figure style: www.spritecow.com, select a region generates style, size, width and height is desired that the icons. left, top is relative to the upper left corner that point, our icons to how the offset, the upper left corner to the upper left corner and the whole picture icons overlap.
2, Image inline: the contents of the picture embedded in html which (base64)
Benefits: reduce your site's number of HTTP requests
Cons: overall size becomes large
Small and 4kb or 8kb picture of it should go inline
3, using vector graphics: vector graphics using SVG to draw, using iconfont icon to solve the problem.
4, in the Andrews webp: WebP advantage is reflected in it having superior image data compression algorithm , can bring a smaller image size, and has no difference in visual identification image quality ; along with the lossless and lossy characteristics compression mode, Alpha transparent and animated, transforming effect on JPEG and PNG are very good, stability and unity.