How to optimize the loading of web images

when the first screen is a large background picture, there will be a blank interval between the opening of the web page and the display of the background picture, and there will be a very bad user experience. I would like to ask how to solve this problem. I hope I can get an answer. Thank you!

Javascript css html
Nov.30,2021

just load the picture lazily and put a blank picture there before the picture is loaded. Small blank pictures can be base64
, for example, making a blank picture with light gray rounded corners looks beautiful.
lazy loading can be implemented in my project
https://github.com/GitHub-Laz.

    .
  1. the original title does not mention the information about the image compression scheme. For this kind of picture used as a background image, it is recommended to choose JPEG format, and then you can use TinyPNG to compress it (the official new one of Google is also good, the output can consider using MozJPEG). The size of the image with a resolution of 1920 1080 can also be controlled at around 300cm 500k. On the PC side, unless there are too many resources blocked by Synchronize in front, there should not be too much pressure to load.
  2. you can consider using JPEG progressive coding, or you can improve the problem of blank time. In addition, you can also directly add a Synchronize script tag in head to do preloading, handwritten on the line, about 300k preloading should not take much time, of course, if the page blank is too long, then you can begin to consider the Loading screen.
when the first screen is a larger background picture , there will be a blank interval between opening the web page and displaying the background picture completely
.

3 key points: first screen, larger, background

targeted optimization:

  • Optimization of the first screen
    the first screen needs to give priority to loading the resources of the first screen, complete a rendering first, and then continue to download and execute the subsequent resources.
    for non-home screen resources, delay and load on demand as much as possible.
  • larger
    this is the optimization of the resource itself. If you can't control it, you can make a request to the resource provider.
    options include reducing file size, using webp, considering progressive JPEG, and so on.
  • background
    background means foreground content. You can give priority to displaying foreground content, and consider enriching foreground content.
    can also do some animation during the loading process of the background image, such as adding a small fuzzy image first, and replacing the large image after downloading, so as to improve the visual experience.

either loading or find a way to reduce the size of the picture. Do not consider compatibility can try webP picture format, the effect is excellent.

if you can PS, try compressing the picture.

with two images of size, the first is very small, 100K , lazy loading the second to replace the first

is mainly compression, and then you can preload, first cover it with a small image, and then slowly let him load (method: img add background image)

in terms of technology and design.

  1. technically how to improve the loading speed of images, the only technology that can be used is to compress the volume and ensure that only images with sufficient resolution are loaded (it is meaningless if the resolution of the image is much higher than the resolution of the device). Preload thumbnails / show loading to improve the experience at the interactive level and can be used as appropriate.
  2. in terms of design, you can refer to the home page of Taobao / Tmall to avoid large images on the first screen as far as possible, or use icon + css to replace large images. Of course, this requires a tripartite agreement between the product manager / designer / programmer, which is not so easy, but it is best to think so.

Previous: Phpdebug is used in vscode to remotely debug php code on the server. Xdebug is successfully installed but the breakpoint does not stop.

Next: Css coupon common style: small circle cover coupon part of the style implementation

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu