1

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

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

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

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

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

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

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

4

1 回答 1

2

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

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

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

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

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

我希望这是朝着正确的方向发展。

于 2012-06-12T10:10:37.230 回答