防止移动用户下载桌面轮播图像

Question

我希望静态背景图像成为特定（桌面版）断点处的轮播。我是否可以阻止移动用户下载这些轮播图像？据我所知，媒体查询在这里还不够。

我不是指用户手动下载图像以保存到他们的设备，我的意思是他们的浏览器会自动执行此操作。

Answer 1

Media Queries 将完美解决此问题。

/* Mobile-first */
element {
   background-image:url("small image here");
}


/* Desktop */
@media screen and (min-width: 1024px) {

  element {
     background-image:url("large image here");
  }
}

如果您使用此代码并使浏览器的大小超过1024px并使用开发人员工具，请检查该元素，您将看到该图像的大版本被用作背景源。如果您将浏览器缩小到1024以下，您将看到源代码更改为小版本。浏览器只会下载图像来源的值，因此移动用户永远不会下载大版本。