Front-end performance optimization------------image processing CSS Sprites&base64

Css Sprites

CSS Sprites we call sprite or CSS Wizard, the principle is to combine many small pictures into a large picture, and then use Background-image to refer to the image, using background-position to locate the small picture in the large picture of the specific location, Implement a small picture in a large picture that references a location.

Advantages

① reducing HTTP requests for pages

② reduces the number of bytes, the sum of multiple small graph size is larger than a large picture

Disadvantages

① picture merging processing time-consuming, relatively troublesome

② if the page frequently changes the picture, later maintenance will be more troublesome

Base64

Base64 is one of the most common encoding methods for transmitting 8Bit bytes of code on the network, and can be used to pass long identification information in an HTTP environment, BASE64 encoding is the process of binary to character. You can use some online tools to generate BASE64 images, but this is relatively cumbersome. We can use Webpack's picture loader, which is url-loader to perform this process, Base64 conversion of images over a certain size. The following form:

For images in JPG format, each load of a picture is equivalent to sending an HTTP request, if a lot of pictures, the performance will be very large, Base64 image is a text format, can be placed directly in HTML or CSS, with the visited page to download to the browser, which reduces the HTTP request. Base64 for a few K-size pictures, if the picture is too large, the number of characters after encoding too much, will greatly increase the size of the CSS file, and not be optimized.

Advantages

① reduced HTTP Requests

② some files to avoid cross-domain issues

③ when using Base64, avoid cache cleanup when images are updated to be re-uploaded

Disadvantages

① using BASE64 encoded images as background images is not supported in Ie6/ie7 browser

② increases the size of the CSS file because the image is Base64 encoded and is completely embedded in the CSS file.

If there are errors in the text, please point out the corrections!

Front-end performance optimization------------image processing CSS Sprites&base64