[分享]css不同的dpi加载不同图片

随着移动设备的广泛使用，如何在不同的 DPI 值下为不同的设备加载优化的图片变得更加重要。为了实现这一目标，CSS 提供了几种方法，本文将为您介绍其中的两种方法。第一种方法是使用 CSS Media ...

随着移动设备的广泛使用，如何在不同的 DPI 值下为不同的设备加载优化的图片变得更加重要。为了实现这一目标，CSS 提供了几种方法，本文将为您介绍其中的两种方法。

第一种方法是使用 CSS Media Queries 。通过在 stylesheet 中加入媒体查询，我们可以根据不同的设备分辨率和像素密度来加载不同大小的图片。以下是一个示例：

@media (min-resolution: 192dpi) {
  .image {
    background-image: url("high-resolution.png");
  }
}

@media (max-resolution: 191dpi) {
  .image {
    background-image: url("low-resolution.png");
  }
} 

以上代码表示，在 192 dpi 的设备上，加载高分辨率图片 high-resolution.png；在低于 192 dpi 的设备上，加载低分辨率图片 low-resolution.png。

第二种方法是使用图片集合。图片集合是一组不同大小和分辨率的图片，为了适应不同设备和屏幕，浏览器会选择合适的图片进行加载。

<picture>
  <source media="(min-width: 650px)" srcset="large.jpg">
  <source media="(min-width: 465px)" srcset="medium.jpg">
  <img src="small.jpg" alt="image">
</picture> 

以上代码表示，在设备宽度大于 650px 时，加载宽度为 1000 像素的图片 large.jpg；在设备宽度在 465px 和 649px 之间时，加载宽度为 750 像素的图片 medium.jpg；在设备宽度小于 464px 时，加载宽度为 500 像素的图片 small.jpg。

以上就是 CSS 在不同 DPI 值下加载不同图片的两种方法。应该根据实际情况选择适合的方法来实现更高效的图片加载。