Picture loading speed problem

The production of HTML5 sliding screen page speed is very slow, find some articles, hope to solve the problem.

One

1. Control the quality of JPG images

Because the high quality JPG format picture is clearer, the color is more vivid, many people use this kind of picture to beautify the header, in fact this to the speed influence is very big, because opens a page to load first is Header,header the load time is too long, very easy makes the first time to the visitor disgusted, There is a situation is the small icon on the page, some webmaster too pursuit of beauty, so the small icons on the page also use high-quality pictures to do, this is not necessary.

2. Use GIF format as much as possible

JPG format in the display of large color-rich pictures is very good, but to do web icons, GIF is the best format. Because in the display of pixel-level details, GIF is better than jpg do not know how many times, you can try to intercept a picture containing 12px or 14px text, respectively saved as a 256-color GIF and the quality of 80 jpg, compared to the text display, GIF is certainly much clearer than JPG, And the volume is much smaller. Therefore, in the production of small icons or pictures with small fonts, the first use of GIF format, there is a question of the number of colors, the GIF format can display a maximum of 256 colors, in fact, does not contain a large number of color gradient of the picture, is already very enough, so in the production of less color GIF, Try to reduce the number of colors, as long as the effect can be passable.

3. How to insert decorative images

Here is not a simple way to insert the image with an IMG tag, and this method of inserting the page small icon and other decorative pictures of the drawbacks are very large. First of all, the image inserted with the IMG tag can not be a simple way to achieve the transformation effect, here, the beautification effect to make a discount, followed by the IMG insert image, if the picture is not in the browser cache, and does not appear repeatedly, will greatly increase the number of HTTP requests. Because the IMG tag is theoretically loaded once. Third, with the IMG tag is not conducive to adjust the position of the picture, if a picture needs to be in the header on the right and footer left these two positions appear two times, you need to write two times for it CSS. Its four, with the IMG tag inserted image is not conducive to integration, integration of pictures can greatly reduce the number of HTTP requests, in the end, the integration of the picture is what skills? Look at the next section.

4, the page background image processing method

Many people like to use the image to do page elements of the hover transformation effect, but did not integrate the relevant pictures, resulting in some changes in the effect of the image will be lost due to the failure. We can combine images for an effect into a single file and use the Background-position property to adjust the position of the image in CSS. The advantage of this approach is that the background requires only one HTTP request, the image can be repeated, and the image transformation is beneficial. See here, do you know how the decorative picture should be inserted? Yes, with CSS.

5, illustrations as far as possible using the outside chain

Due to server performance constraints, generally non-independent host will limit the number of HTTP requests for single IP, if a page of HTTP requests too much, the page will often have to wait a long time to fully loaded. In particular, if the image is too long to load, the browser will be disconnected from the server, which is the need to click on the display image to display, better support outside the chain of photo albums have Picasa, Flickr and domestic yupoo and so on. This will not only reduce the server pressure, save traffic, more importantly, I do not believe that most of the webmaster with the server than those professional online albums faster.

Two

Links:http://www.zhihu.com/question/29764566/answer/45527133
Source: Know

one is the memory limit. The available memory for each app is limited, and the image is more resource-intensive, so it can only be loaded at a time, loading a fixed number of images at a time, and releasing the unused images when loading new images. This will save memory.
The second is asynchronous loading. The page is displayed first, and the picture is downloaded (or hit) before it is displayed. (There are some cache policies, not tables)
The third is the paging request. That is, on-demand requests, only requests the picture that appears in the current page at a time, when the page scrolls or switches, then requests the remaining picture. Links: http://www.zhihu.com/question/19762217/answer/18047143
Source: Know

cache (Cache.manifest; also consider using localstorage or IndexedDB, etc.)
-Asynchronous loading
-use DATA:IMAGE/GIF;BASE64 to embed directly into CSS files to reduce HTTP requests
-Load response image size on demand according to screen size (CSS media query, etc.)
-Compress image quality by adding a layer of texture masks to make it less harsh
-For faster servers or CDN

Three, 25 ways to improve the load speed of Web pages and techniques (turn)

Lazy load, assign load

Picture loading speed problem (RPM)