Responsive Image Processing in Web Development

At present, there are relatively good solutions for website development for mobile devices such as mobile phones. One is responsive website, like the author's blog, the PC website is the mobile website, and the other is to separate the mobile website from the PC website, similar to Taobao. From the perspective of website SEO, there is no difference between the two, and each has its own advantages and disadvantages. No matter which method is adopted, the problem of browsing on mobile devices can be solved. With the increasing number of mobile devices and types, it is almost impossible for us to build a separate website for a certain type of device. Regardless of whether the PC website and the mobile network are built separately, it means that our mobile website will face more and more different devices to access it. That is to say, even if we build a separate mobile website, we must consider the website's compliance with the user's device characteristics.

[[196761]]

Generally speaking, it is easy to make a website adaptive. My blog is a fully adaptive website. However, there is a difficulty in adaptive websites, that is, the problem of pictures. The importance of pictures in web pages is self-evident. So how do we show users appropriate pictures on mobile websites? Generally, there are the following methods:

1. Directly add the highest quality images to HTML. When users access them with different devices, control their sizes through CSS or JavaScript. This will directly ignore the sizes of different devices, but it may increase access time and consume too much mobile traffic because loading too large images will occupy too much bandwidth.

2. Asynchronous loading: load a smaller image page in advance, then obtain user device information through javascript and load the image on demand. This solves the speed problem but may be detrimental to website rankings.

3. Use javascript to generate a cookie in the HTML header, which contains information such as device resolution and pixel ratio. When the user agent requests an image, this cookie will be sent to the server together with other request information. After the server obtains the cookie, it processes the image and then sends it to the client. This solves the image size and optimization problems, but it is less flexible and may fail to work because the user does not support cookies. In addition, adding javascript to the header of the web page always makes people feel a little strange.

In order to solve the problem of image responsiveness in mobile development, the HTML5 standard specifically adds the srcset and sizes attributes of the img tag. srcset is a comma-separated list of one or more strings indicating a series of possible images used by user agents. Each string list contains an image URL and an optional width descriptor (pixel plus "w") and a pixel density descriptor (pixel ratio + "x", the default is 1x). w and x cannot be used at the same time. sizes is one or more comma-separated strings representing resource sizes. Each resource size includes a media condition and a resource size value, which is used to specify the expected size of the image. When srcset uses the 'w' descriptor, the user agent uses the current image size to select a suitable image URL in srcset. If img does not contain srcset or there is no 'w' descriptor in srcset, sizes will not take effect. The selected size affects the display size of the image (if no CSS style is applied). If the srcset attribute is not set or has no value, the sizes attribute will also have no effect. It is difficult to read. To understand it thoroughly, you must understand three concepts: device CSS pixels, device physical pixels, and device pixel ratio. If you are not clear about it, you can check out my previous article on pixel and width issues in responsive website construction.

If you understand the above three concepts, and know that some high-end devices will compress images at the bottom of the browser to make the images clearer, and use two or more physical pixels to display one CSS pixel on the image on the display, you can understand that w refers to the physical pixel width of the device, and x refers to the device pixel ratio of the device, then the meanings of the following two codes are:

<img src="demo-small.jpg" srcset="demo-small.jpg 300w,demo-medium.jpg 600w,demo-big.jpg 750w"> 
Devices with a physical pixel width of 300 load demo-small.jpg, devices with a physical pixel width of 600 load demo-medium.jpg, and devices with a physical pixel width of 750 load demo-big.jpg.
<img src="demo-small.jpg" srcset="demo-small.jpg 1px,demo-medium.jpg 2x,demo-big.jpg 2.5x">
1 device pixel ratio loads demo-small.jpg, 2 loads demo-medium.jpg, 2.5 loads demo-big.jpg

We have encountered a problem here. Using w to control pixels is more flexible, because the same device pixel ratio may have a huge difference in pixels, which will cause the display size to change. For example, there are two devices, one with a CSS pixel width of 720 and a pixel ratio of 2, and the other with a CSS pixel width of 1024 and a pixel ratio of 2. There are two pictures, with resolutions of 360*200 demo-small.jpg and 720*400 demo-big.jpg respectively. Use pixel ratio to control the display: <img src="demo-small.jpg" srcset="demo-small.jpg 1px,demo-big.jpg 2x">, then demo-big.jpg with a resolution of 720*400 will be displayed on both devices, and the screen width they occupy is:

Device 1: ([image pixels]720 ÷ [pixel ratio]2) ÷ [CSS pixels]720 = 50%

Device 2: ([image pixels]720 ÷ [pixel ratio]2) ÷ [CSS pixels]720 = 35%

The 'w' descriptor provides a very flexible way to control the size of loaded images and displays. For the above device, you can specify the appropriate image through w, or specify the display size of the image through sizes.

In summary, we can know that by using srcset and descriptors, the browser can automatically select the images that need to be loaded according to the client's situation and perform targeted loading. Compared with the three responsive image solutions mentioned at the beginning of the article, it is more flexible, saves traffic, and has a faster website loading speed. It is a better responsive image solution.

Dynamic Responsive Image Generation Solution

One drawback of the srcset solution is that it requires specifying multiple images for different screen conditions. If these images are generated manually, it is time-consuming and laborious. Using the Responsive Image tool, you can dynamically and automatically generate images. The operation is as follows:

1. Download the code and redirect all requests to access images to the plm.php file of Responsive Image.

2. Create an image cache directory, open the plm file, and configure it according to the prompts.

3. The operations to obtain the specified picture are as follows:

Crop:example.com/example.jpg/(crop:[x[,y,]]width[,height])

Scale:example.com/example.jpg/(reduce:[x[,y,]]width[,height])

The brackets contain actions, which can be used multiple times in a row:

example.com/example.jpg/(crop:[x[,y,]]width[,height])/(reduce:[x,[y,]]width[,height]) is to crop first and then compress

The values ​​in [] are optional. If x and y are not filled in, the default is 0. If height is not filled in, the default is the image height (cropped) and the image height after the width is reduced (zoomed)

You can refer to the index.html file of Responsive Image for configuration.

References

1. Responsive image srcset new interpretation of the sizes attribute w descriptor
2. HTML img element
3. Responsive Image