1倍图、2倍图、3倍图是指在不同分辨率下的图片大小。在高分辨率设备上，同样大小的图片会显示得更小，因此需要提供更高分辨率的图片来保证显示效果。
1倍图：指图片的大小与屏幕分辨率相同，一般为 1 像素对应 1 像素。
2倍图：指图片的大小是 1 像素对应 2 像素，即在同样大小的屏幕上，图片的分辨率是原来的两倍。
3倍图：指图片的大小是 1 像素对应 3 像素，即在同样大小的屏幕上，图片的分辨率是原来的三倍。
在前端开发中，我们通常会根据设备的屏幕分辨率来选择合适的图片，以保证显示效果。例如，在一个 Retina 屏幕上，如果使用 1 倍图，图片会显示得模糊不清，而使用 2 倍图则会显示得清晰。因此，可以通过 CSS 媒体查询或 JavaScript 来判断设备的屏幕分辨率，然后选择合适的图片进行显示。
示例：
假设我们有一张图片，它的原始大小是 100x100 像素，我们需要在不同分辨率下进行显示。
1. 在 1x 分辨率下，直接使用原图即可：
<img src="image.png" width="100" height="100">
2. 在 2x 分辨率下，使用 2x 图片：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
<img src="image@2x.png" width="100" height="100">
}
3. 在 3x 分辨率下，使用 3x 图片：
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
<img src="image@3x.png" width="100" height="100">
1倍图、2倍图、3倍图是指在不同的设备像素密度下，需要提供不同分辨率的图片。例如，在普通的电脑或手机屏幕上，1倍图就足够了；但在高清屏幕或视网膜屏幕上，就需要提供2倍图或3倍图。
使用时，需要在HTML或CSS中指定图片的尺寸和分辨率，如下所示：
<img src="image.png" width="100" height="100" srcset="image@2x.png 2x, image@3x.png 3x">
这里的srcset属性指定了不同分辨率的图片文件，2x和3x表示2倍图和3倍图。浏览器会根据当前设备的像素密度自动选择最合适的图片进行显示。
示例：
假设有一张图片文件image.png，它的尺寸是100x100像素。如果需要在高清屏幕上显示，就需要提供2倍图和3倍图：
- image@2x.png，尺寸为200x200像素；
- image@3x.png，尺寸为300x300像素。
在HTML中使用时，可以这样写：
<img src="image.png" width="100" height="100" srcset="image@2x.png 2x, image@3x.png 3x">
这样，浏览器会自动选择最合适的图片进行显示。如果当前设备是高清屏幕，就会选择2倍图或3倍图进行显示，否则就会选择原始的1倍图进行显示。
