[Vernacular Popular Science] The pictures on the website don’t show up, do you know the reason behind it?

What is the most important thing when browsing the web? Is it text full of information? Unexpectedly, it was my picture! In this fast-paced era, pictures are the easiest to convey information in fragmented time. Therefore, pictures are indispensable in web pages. However, friends often respond that pictures are not displayed when opening the webpage. Why is this? What caused the picture to fail to load?

Common reasons why pictures don’t show up

speed problem

If you cannot open the picture when opening the webpage, the first thing you should check is the network speed. If the network speed is too slow or a picture is mentioned too large, the picture will fail to load.

Check method: You can directly feel that the internet speed is too slow. For example, opening Baidu, Sina and other websites is relatively slow. If possible, you can directly search for "Internet speed test" on Baidu to directly test your internet speed online.

Flash Player issue

Sometimes after opening the website, the picture will show that Flash Player is required. After encountering this kind of prompt, we can click the control panel, double-click the Flash Player option, the computer desktop shows the Flash Player setting manager, and then select Advanced, click to test now . We click on the tool in the upper right corner of the browser. Select Manage add-ons, enable shockwave flash object, and click OK.

Internet options are set improperly

When the browser filters the pictures, or adds the websites we visit to restricted sites, it may also cause the pictures not to be displayed. We can click on the browser tool, click on the Internet option, for the first case, we select the advanced option, click on the display picture, and finally select the application, and then revisit the website. If it is the latter case, we can choose the security option, click on the restricted site, delete the website we visited in the list of restricted sites, and finally select the application.

In addition to refreshing the visit, we can also use the browser's built-in packet capture tool to see the visit effect. You can press F12 on the page or right-click "check" on the page to see the content of the developer tools.

Then open the Network panel, which records information about each network operation on the page, including detailed time-consuming data, HTTP request and response headers, and cookies.

Click the resource name to view more information about the resource.

The available tags will vary depending on the type of resource you choose, but the following four tags are the most common:

• Headers: HTTP headers associated with the resource. The Headers tag can display the request address, HTTP method, and response status code of the resource. In addition, the tag also lists the HTTP response and request headers, their pointers, and any query string parameters.
• Preview: Preview of JSON, image and text resources. The Preview tab will display the preview information of the resource, or it may not be displayed, depending on the type of resource you selected.
• Respones: Display the unformatted HTTP response content of the resource (if it exists).
• Timing: Fine breakdown of the resource request life cycle.

You can check the status of the picture response and the response time on the console to determine the reason for the non-display, so as to solve the problem faster.

Of course, there are also some special reasons. For example, the very popular WebP format pictures are not supported by all browsers. Sometimes pictures are not displayed. Let's take a closer look.

browser does not support WebP

In order to reduce the sending time and traffic consumption of pictures on the Internet, many websites now choose WebP format pictures. WebP integrates the characteristics of a variety of image file formats. It is suitable for compressing photos and other detailed pictures like JEPG, it can display dynamic pictures like GIF, and it supports transparent images like PNG. At the same time, WebP is also more powerful than other formats in performance. According to Google's test, WebP losslessly compressed images have 45% less file size than PNG images.

Using WebP can indeed bring many benefits to practical applications, but because not all browsers support WebP, such as: IE, some versions of Firefox, etc. So when the browser does not support it, there will be a problem that the picture cannot be displayed.

In the face of this situation, is there a way to allow a browser that supports WebP format to view WebP pictures, but is it possible to display pictures in the original format that does not support WebP format?

Here we are going to introduce the WebP adaptive function of Pingyun.

The WebP adaptive function will determine whether the client browser supports WebP decoding. If it does, it will return the WebP format picture, otherwise it will return to the original picture. There is no need to change the client and the origin site. The WebP adaptive opening method is also very simple. Just click the open button in the backstage of YouPaiyun.

Recommended reading

Do you have these emoticons? Come to Battle,

is behind 1608c45aa1710e Doge.jpg, do you know?