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

Question

在响应式 css 设计的情况下，假设您有几个不同大小的图像版本，并且您的屏幕宽度达到了 900 像素。

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

从我的立场来看，各有优劣：

使用缩小，作为专业人士，图像应该有更好的质量（至少我是这么认为的，我对不同浏览器的缩小算法了解不多）。作为 CON，下载图片需要更长的时间，如果您还针对移动设备，这一点很重要。

使用升级可以提高下载速度，但会降低质量。

当然，您不会将 500 像素的图像放大到 1000 像素的宽度，就像您出于显而易见的原因不会缩小 2000 像素的图像一样，前提是您可以选择。 但是，如果您有相似的值，是否有一种经验法则可以帮助您做出决定，或者它并没有真正产生影响，这取决于开发人员？

或者，至少，有没有更重要的因素？例如，通过使用升级，您可以从下载时间减少中获得更大的收益，然后从质量下降中获得更大的收益，反之亦然。

Answer 1

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

• 您想要覆盖哪些受众（移动（例如最大宽度为 640 像素）或桌面（任何大于 640 像素的设备）面向）
• 您将使用的最大图片是多少（宽度和高度）
• 您的移动网站是否需要您的图片（即，您能否制作网站的简化移动版本，而不会丢失太多内容？）

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

我认为，当您专注于移动受众时，最好是高档的。不过，我不认为您的网站仅适用于移动设备，并且您希望使您的网站在宽屏设备上也看起来不错，所以我会进行缩减！另外，不要忘记优化您的图片（JPG 压缩到 80% 应该会大大减小尺寸，但不会对质量造成太大影响）。

---

编辑： 所以我一直在考虑这个问题，你还可以做其他事情：使用两个不同的图像。我可以听到你在想：但这听起来不合逻辑，浏览器如何检测尚未加载时需要更改的图像（加载两个图像会很愚蠢）。好吧，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 被禁用时，将显示一条消息告诉用户，请求的图像无法显示。

我希望这是正确的方向。