Question

在响应式css设计的情况下，让我们假设您有一些不同大小的图像版本，并且您可以达到屏幕宽度为900像素的点。

在这种情况下，最好的做法是什么？情况a）缩小950像素图像或情况b）放大850像素图像（这些值当然是虚构的，我不是在讨论特定情况）

从我的立场来看，每个人都有自己的优点和缺点：

使用缩减，作为PRO，图像应该具有更好的质量（至少我是这么认为的，我不太了解不同浏览器的缩减算法）。作为CON，下载图片的时间会更长，如果您还要定位移动设备，这一点非常重要。

使用upscaling，您可以获得下载速度，但质量会下降。

当然，假设您有一个选择，您不会将500像素图像放大以填充1000像素宽度，就像您不会因为显而易见的原因而缩小2000像素图像一样多。但是，在你有类似价值的情况下，有一种经验法则可以帮助你做出决定，或者它并没有真正有所作为，这取决于开发人员？

或者，至少，是否有一个因素会更重？例如，通过使用升级，您可以从下载时间减少中获得更大的好处，然后从质量下降中获得更多好处，反之亦然。

Answer 1

我认为你可以用不同的方式看待它。另外，你应该问自己一些问题：

您想要覆盖哪些受众群体（移动（最多宽度为640px）或桌面（宽度超过640px）取向）
您将使用的最大图像（宽度和高度）是什么
您的移动网站上是否需要您的图片（即您是否可以制作简化的网站移动版本，而不会丢失太多内容？）

当您的重点放在如上定义的桌面环境时，我不会过多地关注您的问题。当然，较大的图像需要一些时间来加载，但不要忘记大多数移动浏览器都有两个非常简洁的功能：1。设备检索的数据首先被服务器压缩（想想 Blackberry ， Opera ...）和2.大多数时候浏览器允许选择图像质量（低，正常，高）。因此，用户仍然可以选择他们想要的质量，而无需您自己决定！

我认为，当您专注于移动受众时，最好是升级。我不认为你的网站只是移动设备，并且你想让你的网站在宽屏设备上保持良好状态，所以我会去缩小尺寸！此外，不要忘记优化您的图像（80％的JPG压缩应该减少很多，但不应该太大地损害质量）。

编辑：所以我一直在考虑这个问题，你还可以做其他事情：使用两个不同的图像。我可以听到你的想法：但这听起来不合逻辑，浏览器如何检测到尚未加载时需要更改的图像（加载两个图像会很愚蠢）。好吧，here你走了。（积分在this问题中转到jAndy）

jQuery代码（注意我链接到我自己的网站空间。这个小提琴因此不会继续工作！）

$(document).ready(function() {
    $("#jsDisabledMessage").hide(); // HIDES MESSAGE THAT TELLS USER TO ENABLE JS

    if ($(window).width() < 480) {
            $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-mobile.jpg"; // FOR MOBILE DEVICES
        });
    }
    else {
        $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-not-mobile.jpg"; // FOR DESKTOP
        });
    }

   $("img").show();
});

那么，会发生什么：

浏览器读取HTML
浏览器不想找到图像（而且图像被CSS隐藏）
jQuery找到适当的URL（取决于屏幕大小）并相应地调整HTML
jQuery显示图像
当禁用JS时，将显示一条消息告诉用户，无法显示请求的图像。

我希望这是正确的方向。

使用CSS升级图像或缩小图像之间是否存在性能差异？

1 个答案: