防止将图像下载到移动网站上的页面

Question

我怎样才能在我的网站的移动版本中将图像从Web服务器上下载,因为这些是不需要和不使用的大文件,因此严重影响了网站的移动版本的使用.看过这种性质的先前线程后,我看到使用下面的代码隐藏图像的父级可以受益.

.parent {display:block;}
.background {background-image:url(myimage.png);}

@media only screen and (max-width:480px) {
.parent {display:none;}
}

问题是我不想将背景图像CSS用于与它们相关的SEO问题,因为我喜欢使用Schema标记等.所以如何防止IMG标记被下载,如display:none; 只隐藏图像而不是停止下载.

注意:这不是针对版权保护问题,例如防止右键单击等,而是针对移动的下载内容的速度和最终大小.

Answer 1

我建议将 @import 和 @media 命令组合起来，仅 @import 包含图像的样式表，前提是 @media 标签符合您的标准（例如，超过特定分辨率）。

因此，默认情况下，您不会导入应用 BG 图像的样式表，如果您确定该网站是“非移动”的，您最终只会这样做……如果这是有道理的！

W3c 网站有一些结合规则的不错的示例：