Why is it not recommended to use the img label to control the image size?

A customer once told me that a news image was uploaded in the background of the website. It was taken by a camera and uploaded but beyond the display range of the webpage. A scroll bar appeared and asked me how to deal with it, I told him to use the image processing software to process the image to a proper size and then upload the image. For example, to process the image to a 600 pixel width, the height is scaled proportionally, he told me that the previous websites do not need to process images, and the uploaded files are of the same size. This will not happen. Later, after some explanations, he understood the benefits of doing so.

 

When using div and css to create a template for a website content page, we will fix the style of some of the content, such as the number of characters and the color of the title, the font, color, and so on of the release time are naturally indispensable for images on the Content Page. These images are uploaded to the server through the corresponding website content management system, the reference using the img label on the content page can be displayed on the webpage.

The pixels of images taken by cameras are generally much larger than the browsing range of the webpage content area, and the image size is about 1 MB. Sometimes the images are directly transmitted for convenience, then, css is used to uniformly control the image width and the height is automatically adapted. However, this can only make the pixels of the images seen by PAGE viewers decrease, and it seems to be very consistent with the content, in fact, the webpage has already loaded a picture of about 1 MB. If there are several news images on one page, we need to load pictures of about 1 MB continuously. At this time, the webpage opens slowly, in addition, some images may be distorted to some extent.

In addition, if the size of the image in the content is left empty, sometimes there will be a small icon in front of the Attachment When uploading some attachments, because this small icon is also introduced with the img label, therefore, it will also be "magnified". To solve this problem, you must modify the style of the icon separately, which is very troublesome. In addition, the updaters of general content often do not understand these technical activities.

When the website is being revised, it may not be the responsibility of the original company. If the images uploaded to the server have not been processed, the problem of "Slow image loading" still cannot be solved, because the person in charge of the revision cannot process all your images one by one.

There are many technical effects, but not all solutions are reasonable. Therefore, as a website construction technician, we need to develop this habit of processing and uploading images first, that is, the number of pixels required for webpage display can be processed in advance before uploading. This not only saves disk space, but also increases the page access speed of the browser.

From: http://www.sunfei.net