In website optimization, if the pictures are optimized well, it can not only increase the loading speed of the page and improve the user experience of the website, but also save the bandwidth of the website through image optimization. So as a page construction engineer, what method should be used to optimize images, which can not only ensure the restoration of the UI, but also make the images the most streamlined? Let me briefly introduce the image optimization method based on my personal experience. First, we understand some aspects of images. Knowledge:
1. Vector graphics and bitmaps.
Vector graphics: An image format that can be scaled and rotated without distortion. No matter how close you look, you cannot see the smallest unit of the graphic. The stored files are smaller, but it is difficult to express realistic image effects with rich color gradations. You can understand it as a perfect circle, parabola and other shapes.
Bitmap: Also called raster map and pixel map, the smallest unit is composed of pixels, and scaling and rotation will cause distortion. For example, a bitmap is like a cross-stitch. When viewed from a distance, the picture is delicate and colorful, and when viewed up close, the color transition of each stitch can be seen.
Cross-stitch Cross-stitch enlargement The following table shows the comparison between vector images and bitmaps:
2. Lossy compression and lossless compression.
Lossy compression: Characterized by maintaining gradual changes in color, sudden changes in the real world as observed by the human eye, and then using nearby colors to fill in through gradients or other forms. Because of the data information of pixels, the storage capacity will be reduced, and the restoration quality of the image will not be affected. JPG is a lossy compression format. When storing images, the image will be decomposed into an 8*8 pixel grid and individually optimized. For example: the small white block is 8*8px and the black background block is 32*32px. When the small white block is no longer pure white, the small white blocks around it are very sharp, as shown in the following figure:
The white grid in the upper right corner happens not to be in the 8*8 pixel grid unit, so when it is saved, it will be color-blended with the surrounding 8*8 grid unit. The effect in the picture below:
This is the reason why the image will be blurry when saving JPG pictures. The following is the partial comparison effect of several color pictures:
Lossless compression: Compress using the statistical redundancy of data to truly record the data information of each pixel on the image. His principle is to first determine which colors are the same and which are different, compress and record the data information of the same color, and save the different data separately. The quality of the picture will not degrade after being saved multiple times.
Why are lossless compressed images also distorted? Because his compression principle is to compress and restore by indexing the colors in the same area on the image. That is to say, it can only be true when the number of colors in the image is less than the number of colors we can save. record and restore images, otherwise some image information will be lost. For example, PNG-8 and GIF formats:
PNG24 is true color, so the color table is empty and will not be distorted.
3. Comparison of PNG, GIF and JPG images.
Before we proceed with image optimization techniques, we need to learn some technical details about image formats. Each graphics format has its own strengths and weaknesses, and knowing them will help you get better visual quality and compression quality.
Web page image optimization is a very important step in web page acceleration. Compressing images can not only save bandwidth, but also speed up web pages. Our commonly used image editing software can compress images.
The high compression ratio of PNG-8 When cutting images, sometimes choosing PNG-8 can achieve a higher compression ratio. Note, it is PNG-8, not PNG-24. However, in some cases, GIF or JPG will be smaller, and it needs to be debugged according to the actual situation to choose the best solution.
Optimization tips for PNG-24, using Posterization:
Take the small icon on the left navigation of Weibo as an example. The compressed image size comparison is as follows:
The steps for PS tone separation are as follows:
Compare size:
After using tool optimization, it can be smaller:
Please note that the image above was originally in GIF format
Was changed to PNG format
Therefore, when using tools to optimize, you need to check whether the file format has been changed to avoid missing some pictures that are not optimized.
Application of image optimization on Weibo homepage:
1. Graphic type and photo type When choosing image formats, we also need to consider the usage scenarios or functions of the image, which can be summarized into two categories: graphic type and photo type. Graphic type: graphic symbols, which are highly condensed and can quickly convey information. , easy to remember features, with a small number of colors.
Graphic classes generally use PNG format or GIF format. When optimizing, the PNG format can be PNG8 or PNG24, and the quality can be 32. If there is color loss, the quality can be 64 or 128.
For example: the icons in the left navigation of the homepage, the icons in the feed area, medal pictures, and emoticon animations are all graphics.
Photo category: Photos usually contain millions of colors, including smooth color transitions and gradients. If the graphics are more complex, real photos sometimes appear in the pictures.
PNG and JPG are generally used for photos. It can be determined according to the richness of the color of the picture.
The quality of PNG is generally 128. The quality of JPG should generally be between 70-80, determined by the degree of noise.
For example: skin background image, publisher, button background, tips below the publisher, ads on the right, user avatars, and pictures posted by users.
2. The general category and the random category are divided into general category and random category according to the frequency of the pictures on the homepage. General category: Everyone will see icons, buttons, and small backgrounds on the homepage.
For example, top tray icon, left guide icon, feed area icon, publisher icon, identity icon, operation icon, status icon, and button. Save in PNG format as much as possible, the file will be relatively smaller.
The picture below shows the size comparison of Weibo’s buttons and the left navigation icon in GIF and PNG formats:
The picture below shows the size comparison of Weibo’s button background images saved in GIF and PNG formats:
Random category: Depends on what you define and publish.
A. Emoticon GIF
You can use FireWorks or ImageReady, and ImageReady is recommended.
It is best to manually adjust one by one, because the color values of these expressions are relatively small, and if larger colors are used, the storage capacity will be larger.
In addition, batch processing also requires one folder for processing. There are too many folders for expressions, so basically batch processing is still very slow. If you use FireWorks for batch processing, some animations will become faster or have missing edges.
When processing manually, store according to the number of index colors. Generally speaking, 4-128 index colors are stored.
B. Skin resurfacing pictures:
Use JPG format or PNG format.
If the main background image of the skin contains real photos or text, it can be in JPG format. In order to ensure that it is closer to the design, a quality compressed image of 85 or above must be used. If the background image has a small color span, it can be in PNG format.
C. Medal category:
Currently, there are two formats: GIF and PNG. GIF is a small image, and PNG is a medium and large image. Just choose 128 for quality.
Batch processing of this directory is faster. Because they are all in the same folder. But it will be smaller if used manually.
D. Various advertisements:
Tips, ads on the right, and ads at the bottom of the publisher. Use JPG format or PNG format.
E. User related graph:
Avatars and images posted by users need to control the compression quality in the background. Use JPG format or PNG format.
Introduction to image optimization tool Smush.it
Smush.it is an online image optimization tool based on YUI produced by the YUI team.
It is a service based on the following four image optimization suggestions:
Remove meta data from JPG.
Optimize the compression rate of JPG.
Convert specific GIF images to indexable PNG format images.
Remove unused color information from indexable images.
So using Smush.it to compress images can remove excess bytes from the image without changing the visual effect and quality of the image.
Found in actual use:
It can also convert some JPG images into PNG images.
For PNG24 true color images, it can remove some color information that is not detectable by the naked eye, making up for the shortcomings of photoshop and firework that cannot optimize PNG24 images.
GIF animated images can be optimized.
Smush.it usage method 1: Use All Smush.it in the Tools tool in the Firefox plug-in Yslow
Take the Weibo homepage as an example:
Firebug, use Yslow tool, after running, select Tools
Click All Smush.it and it will automatically jump to http://www.smushit.com/ysmush.it/ to get the following picture:
After clicking the button Download Smusshed Images, a zip file will be downloaded.
Method 2: Log in directly to the Smush.it website, paste the URL of the image that needs to be compressed into the input box (or select the image from the local computer), click Smush to compress the image, and then Smuch.it will provide an optimization report , displays the image compression ratio and how many bytes are saved, and provides a downloadable compressed package containing the compressed image files.
The figure below shows how to directly fill in the online URL (separated by commas):
The following figure shows how to select images from your local computer:
The picture below shows the optimization results:
induction:
Let’s review the key points again:
1. Choose the appropriate format: use JPG to save photos, use GIF to save animations, use PNG to save other pictures, and use PNG8 as much as possible.
2. Compression techniques for PNG24 images.
3. Use of Smush.it.