Why not use img tag to control image size in html?

A customer once told me that he uploaded news pictures in the background of the website. They were taken by a camera. However, they were uploaded but exceeded the display range of the web page. A scroll bar appeared. He asked me how to deal with it. I told him to use image processing first. The software processes the image to a suitable size and then uploads it, such as processing it into a width of 600 pixels, and scaling the height proportionally. He told me that previous websites did not need to process images, and the size would be the same when uploaded, so this would not happen. After some explanation, he understood the benefits of doing so.

When using div and css to create the template for the website content page, we will fix the style of some of the content, such as the size and color of the title, and the release time. Fonts, colors, etc., of course, there are pictures in the content page. These pictures are uploaded to the server through the corresponding website content management system, and are referenced in the content page using the img tag to display on the web page.

The pixels of the pictures taken with the camera generally far exceed the size of the browsing range of the web content area, and the size of the picture itself is also about 1M. Sometimes for convenience, the picture is uploaded directly and then used css. The width of the image is uniformly controlled and the height is automatically adapted. However, this only makes the pixels of the image seen by web viewers become smaller, which seems to be in harmony with the content. In fact, the web page has already loaded this image of about 1M. If a page There are several news pictures, so many 1M-sized pictures must be loaded continuously. At this time, the opening speed of the web page will obviously slow down, and some pictures will have a certain degree of distortion.

In addition, if the size of the image in the content is written down, sometimes when uploading some attachments, there will be a small icon in front of the attachment. Since this small icon is also introduced using the img tag, it will also be " "Enlarge", to solve this problem, you must modify the style of this icon separately, which is very troublesome, and general content update personnel often do not understand these technical tasks.

When the website is revised, the original company may not be responsible, and if the pictures uploaded to the server have not been processed, the problem of "slow picture loading" will still not be solved, because It is impossible for the person responsible for revision to process all your images one by one.

There are many effects that can be achieved technically, but not all solutions are reasonable. Therefore, as website construction technicians, we must develop the habit of processing images first and then uploading them. That is, how many pixels are needed to display the web page are processed in advance and then uploaded. This not only saves disk space, but also increases the speed at which viewers open the page.

The above is the detailed content of Why not use img tag to control image size in html?. For more information, please follow other related articles on the PHP Chinese website!