imgThe tag's srcsetattribute is an attribute used in responsive web design that allows developers to provide images with different sizes and resolutions so that the most appropriate image is automatically selected for display based on the device's screen size and pixel density. By using srcsetthe attribute, you can provide the best visual experience on different devices, avoiding unnecessary image deformation and performance problems loading large-size images.
srcsetSyntax and usage of attributes:
srcsetThe attribute accepts a comma-separated set of descriptors and image paths. Each descriptor consists of image width, pixel density and other information. These descriptors are used to specify different versions of the image, and the browser will select the appropriate image to load based on this information.
The syntax for a basic srcsetattribute is as follows:
<img src="default-image.jpg" srcset="image1.jpg 1x, image2.jpg 2x, image3.jpg 3x">
In the example above, srcsetthe properties contain three different versions of the image, corresponding to different pixel densities. Numbers in the descriptor represent multiples of pixel density. For example, 2xmeans twice the pixel density.
The browser will select an appropriate image to load according to the pixel density of the device, for example, on a device with a pixel density of 2x, it will choose to load image2.jpg.
srcsetHow the attribute works:
-
The browser checks the pixel density of the device: When the page is loaded, the browser checks the pixel density of the device, usually represented by DPR (Device Pixel Ratio). For example, a standard Retina display has a DPR of 2, meaning it has twice the pixel density of a normal screen.
-
Browser chooses image based on descriptor: The browser uses
srcsetthe descriptor in the attribute to choose the most appropriate image based on the device's pixel density. It tries to find the descriptor closest to or slightly higher than the current device DPR. -
Image Loading: Once the browser has selected the most suitable image, it will load that image for display.
for example:
Suppose there is a website that contains a thumbnail image of a product. The website needs to provide a good user experience on different devices. Here is an srcsetexample using the attribute:
<img src="thumbnail.jpg"
srcset="thumbnail-1x.jpg 1x,
thumbnail-2x.jpg 2x,
thumbnail-3x.jpg 3x"
alt="Product Thumbnail">
In this example, srcsetthe attribute specifies three different versions of the thumbnail, corresponding to different pixel densities. When the page is loaded on different devices, the browser will choose the appropriate image according to the pixel density of the device.
- If the device has a pixel density of 1x, the browser will choose to load it
thumbnail-1x.jpg. - If the device has a pixel density of 2x, the browser will choose to load
thumbnail-2x.jpg. - If the device has a pixel density of 3x, the browser will choose to load
thumbnail-3x.jpg.
In this way, no matter what type of device the user visits the website on, they can get the appropriate image version, thus ensuring the best visual experience and performance.
Let's look at another example:
srcsetThe basic usage of attributes is as follows:
<img srcset="example-small.jpg 600w, example-medium.jpg 900w, example-large.jpg 1200w"
src="example.jpg"
alt="示例图片" />
In this example, srcsetthe attribute has three values, each consisting of an image URL and a width descriptor ( w). This means example-small.jpgthat the width of 600px, example-medium.jpgthe width of 900px, example-large.jpgthe width of 1200px.
The browser will choose the most appropriate image according to the resolution of the device and the size of the current viewport. For example, if the device has a resolution of 2x and the browser viewport width is 800px, then the browser will choose example-medium.jpgbecause 900px is the closest value to 800px * 2.
srcThe attribute is a fallback option for srcsetolder browsers that don't support the attribute.
In addition to the width descriptor, srcsetthe pixel density descriptor is also supported, indicating the number of physical pixels corresponding to each CSS pixel. This is useful for high resolution (high DPI or Retina) devices. For example:
<img srcset="example-standard.jpg 1x, example-highres.jpg 2x"
src="example-standard.jpg"
alt="示例图片" />
In this example, if the device has a pixel density of 2x (that is, 2 physical pixels per CSS pixel), the browser will choose example-highres.jpg. Otherwise, it will choose example-standard.jpg.
srcsetThe attribute is often sizesused together with the attribute to further instruct the browser on how to choose an appropriate image. For example:
<img srcset="example-small.jpg 600w, example-medium.jpg 900w, example-large.jpg 1200w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
src="example.jpg"
alt="示例图片" />
In this example, sizesthe properties specify three media conditions and corresponding slot widths. That means, if the width of the viewport is at most 600px, the width of the image will be 100% of the viewport; if the width of the viewport is at most 900px, the width of the image will be 50% of the viewport; otherwise, the width of the image will be 33% of the viewport %.
Summarize:
srcsetAttributes are an important tool for optimizing the display of images in responsive web design. It allows developers to provide images of different sizes for different pixel densities to fit various devices. By using srcsetthe attribute, image distortion and performance issues can be avoided, providing a better user experience. In front-end development, reasonable use of srcsetattributes can make the website present the best visual effect on various devices.