使用媒体查询加载base64编码的图像

Question

我的移动网站上有很多小图像。 因此，我加载它们在CSS中编码的base64。

<link rel="stylesheet" media="max-resolution: 239dpi" href="small-images-base64.css" />
<link rel="stylesheet" media="min-resolution: 240dpi" href="big-images-base64.css" />

问题在于无论如何都会同时加载small-images-base64.css和big-images-base64.css。 有什么方法可以只加载我真正需要的数据吗？

Answer 1

只要您链接CSS，它们就会一直加载。

一种解决方案是制作更多的CSS文件，并根据页面仅加载所需的文件。

另一个可能是，如果您将图像从CSS中取出并直接将其加载到html中，就像...

<img src="data:image/gif;base64,AAAAAAAA........"/>