媒体查询和性能与在小屏幕上显示大文件大小的图像

Question

我刚刚从另一个开发者手中接手了一个 WordPress 网站作为开发者，所以很多东西已经就位了。目前，该网站正在提供相同的大尺寸（和大文件大小，单个文件超过 500KB） - 图像，我想得到它，因此移动设备上的性能和加载速度要快得多（那里也是几张大图）。

我的第一个想法是可能覆盖事物并仅使用一个简单的媒体查询 - 一个用于“更大”屏幕（例如桌面）和一个用于小 iPad 及以下屏幕。

但是，我不确定媒体查询有多“昂贵”，以及哪种方法（或完全其他方法）会带来最佳的性能提升：

a) 保持现状，只为较小的设备提供较大的图像。

b) 在主样式表中使用 2 个媒体查询 - 一个用于较大的屏幕，一个用于较小的屏幕（中间的任何内容都会得到它所得到的）。

c) 别的？

WP 网站非常定制，并使用了一些额外的插件和代码，因此 WP 不会像往常那样自动提供较小的尺寸，这不是我可以真正改变的东西，至少现在不能。

我的主要问题是，CSS 媒体查询有多“昂贵”？我查看了很多帖子，但无法为这种情况找到明确的答案。

我想知道媒体查询的处理最终是否会比只让用户下载一个相当大的图像（并且有几个）需要更多的时间？

使用类似的东西：

/* This would be for the mobile or at least smaller screens across the board */
@media only screen and (max-width: 600px){
    imageOne img {
        background-image: url("smallerFile.jpg");
    }
}

/* Then, this would be for larger screens, across the board */
@media only screen and (min-width: 601px){
    imageOne img {
        background-image: url("LARGERFile.jpg");
    }
}

我的客户非常坚持使用 Google PageSpeed Insights 并获得大量数据的想法。这就是我想到使用媒体查询的地方，因为目前该网站在桌面端得分很高，但在移动端得分很低（其中很多与大图像尺寸有关） .

我知道 PageSpeed Insights 分数并不总能转化为现实世界的速度提升，但我的客户就是我的客户。

最后，我想知道我是不是在把事情追到一个兔子洞里，试图获得一个高排名/数字。但是手机上的几张 500KB+ 的图片绝对不是很优化，不管怎么看。有什么想法吗？

这是我在 Stack Overflow 上的第一篇文章，所以我希望我已经正确填写了所有内容，并且这很有意义。对不起，如果我写得太长了，试图融入细节或太多背景。

我知道这是一个半基本的问题，并且我尝试过使用浏览器测试工具进行测试，但我不是这些方面的专家，所以我很容易读错或什至看不到正确的东西价值。

而且，我确实浏览过无数的网站和帖子，但仍然无法真正确定一个明确的答案——因为我不知道事情是如何处理的，以及多少“税”媒体查询需要处理（这就是为什么我考虑将其保持为 2，而不是更复杂 - 除非我应该？）。抱歉，乱七八糟，

非常感谢大家，我真的希望有人能指出他们认为最好的方法吗？

Answer 1

我遇到了一个和你非常相似的问题。

我决定使用 Wordpress 的内置函数 wp_is_mobile() 来解决我的问题。

在我的主题模板文件中，我只需添加一个 if else 语句来检查用户是否在移动设备上，并根据设备提供不同的内容。

if (wp_is_mobile()) {
    ... smaller mobile content ...
} else {
    ... larger PC content ...
}