Images in a Webview, not native;

From the picture format:
1. Large, colorful pictures cut into JPG;
2. Small size, not rich color and transparent background cut into GIF or PNG8;
3. Translucent cut into PNG24.
Png8 is smaller; However, for images with small size, similar to ICONS, SVG is more recommended (iconFONT is used for solid colors);
Smaller image format webP, but not very well supported;
So webP is better than JPG, which is smaller than PNG, but only PNG supports transparency;
Each picture format has its own characteristics and applicable scenarios;


Other aspects:
Try not to use empty SRC, this will cause page reloading, use a one pixel image, set the width and height for space; Try to avoid using dataURL, because there is no image compression algorithm, it will be too large, less than 3K images can be used.
  • *** For different models of resolution and screen density adaptation, download different sizes of pictures
  • – Added extreme mode to download only normal quality images under 2G and weak networks.
  • Add different picture quality options to the user
Image preloading and lazy loading;
  • Image preloading is the use of cache, the image is preloaded to the page can not be seen, until the image into the user’s field of view, the way of cache only needs to simply request the image resources in advance, (pure JS or use CSS background property can be) after use, obtain the same image. The browser will use the cached image directly. Preloading can improve the performance of subsequent pages, but will increase the rendering time of the home page, generally speaking, the first screen should be opened as soon as possible, so do not use preloading;
  • Lazy loading of pictures can save traffic, put some network resources in the back of the request, can make the home page rendering time reduced;
Progressive images, which are almost the same size as normal images, have a better user experience, the size frame is set at the beginning, and there is no backflow – improved rendering performance – due to the unset size of baseline images


Long graphic display:
  • Scheme 1: Image segmentation similar to wechat. A long picture can be divided into multiple pictures for display. Loading is used.
  • Scheme 2: Similar to word of mouth, using progressive picture display;

PS: Add base64 encoding of two placeholder maps:

<! -- 1 pixel transparent --> <img SRC ="data:image/gif; base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"> <! -- 1 pixel black --> <img SRC ="data:image/gif; base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">Copy the code