7

我越来越多地从大型网站（谷歌、Facebook、Youtube 和 co）中注意到，他们正在将图像的大小调整为“接近”他们所需的测量客户端，我想知道这是否是人们思维方式的转变，或者他们很懒惰。

假设为一组产品（电子商务）以特定尺寸将新图像尺寸添加到一组标准图像中，这些产品的数量达到数千甚至数百万。

想象一下，我有一个 300x350 或其他尺寸的原始图像的副本，以及客户端，将其大小调整为 200x250。我为每个产品在一个页面上的 20 个产品执行此操作。

适应这种新大小的服务器端的工作和问题真的值得客户端的好处吗？

如果不是，那么判断何时应该预处理某个尺寸的好方法是什么？

如果是，是否曾经有过服务器端处理和缓存可能变得过度的时候（即容纳 8 个 110x220、120x230、150x190 等的图像）？

4

2 回答 2

1

考虑以下几点： 图像大小调整是服务器的繁重过程。首先，它本身是昂贵的。其次是硬盘 IO 操作非常慢。所以这一切都取决于您的服务器的负载情况。

对于客户来说，它有两个方面的意义：

1) 缩略图的文件大小更小，因此下载速度更快。所以它们会出现得更快。但这一切都取决于互联网连接的速度，而互联网连接的速度每天都在增加。你见过加载多大的图像吗？它们不会一次全部显示，而是按“线条”显示

2）如果您尝试以小尺寸显示大图像，质量会低得多。这是因为浏览器如何处理它。他们没有 Photoshop 的功能，也无法进行适当的质量调整。

3）单个页面上的许多大图像会增加该页面的内存使用量。在一些不太强大的计算机上，滚动打开它时可能会出现可怕的延迟。

作为这个问题的解决方案，我更倾向于做我在 Drupal 模块之一中看到的（imagecache如果我是对的）。

它不会在图像上传时创建缩略图。相反，它使用 .htaccess 和 mod_rewrite 功能在请求时创建它们。它检查请求的文件是否不存在，如果不存在，它将请求重定向到小型轻量级 PHP 脚本，该脚本将创建缩略图，将其写入文件系统，然后输出到客户端。

因此，下一位访问者将已经获得先前创建的缩略图。

因此，您实现了延迟/延迟图像大小调整，这将使加载更平滑（及时拉伸）。

于 2012-11-23T13:25:02.990 回答
0

我决定首先在页面上的单个图像上进行测试，然后进行一些乘法运算来预测多个图像。我应该注意：

  • 我在这个测试中使用了 png，但是 png 看起来很标准。
  • width我正在使用一个特定的函数来调整图像的大小，以便height始终适合我调整大小的图像的原始纵横比。

我得到一张 450x450（大约）的图像，并决定在客户端将其缩小为 200x200（此答案中的所有测量值都是像素）。尽管调整大小超过图像总大小的一半，但我发现它的 CPU 跳跃很少。

所有现代浏览器的质量也很好，Chrome、Opera、Firefox 和 IE 都显示图像清晰，就好像它是在 Photoshop 或 GD 中完成的一样。

在 IE7 上，我没有注意到 CPU 跳动太多，而且质量很好，前提是我使用了基于图像大小限制的百分位调整大小。

总体而言，即使是这种大小的缓存服务器端所需的额外存储、计算和编码似乎也不利于用户端所暗示的能力。

话虽如此，如果我要开始多次进行这种类型的调整（比如我的问题中的 20 次），我可能会开始遇到问题。

经过一些调整后，我发现任何小于原始图像尺寸 1/3 的东西，只要图像的宽度或高度低于 1000 像素，对 CPU 和一般计算机性能的影响似乎都可以忽略不计。

通过我使用的附加功能，我从调整客户端大小获得了与服务器端一样好的质量。我使用的特定功能（针对相关方）是：

function pseudoResize($maxWidth = 0, $maxHeight = 0){

$width = $this->org_width;
$height = $this->org_height;

$maxWidth = intval($maxWidth);
$maxHeight = intval($maxHeight);

$newWidth = $width;
$newHeight = $height;

// Ripped from the phpthumb library in GdThumb.php under the resize() function
if ($maxWidth > 0)
{
    $newWidthPercentage = (100 * $maxWidth) / $width;
    $newHeight          = ($height * $newWidthPercentage) / 100;

    $newWidth = intval($maxWidth);
    $newHeight = intval($newHeight);

    if ($maxHeight > 0 && $newHeight > $maxHeight)
    {
        $newHeightPercentage    = (100 * $maxHeight) / $newHeight;

        $newWidth = intval(($newWidth * $newHeightPercentage) / 100);
        $newHeight = ceil($maxHeight);
    }
}

if ($maxHeight > 0)
{
    $newHeightPercentage    = (100 * $maxHeight) / $height;
    $newWidth               = ($width * $newHeightPercentage) / 100;

    $newWidth = ceil($newWidth);
    $newHeight = ceil($maxHeight);

    if ($maxWidth > 0 && $newWidth > $maxWidth)
    {
        $newWidthPercentage = (100 * $maxWidth) / $newWidth;

        $newHeight = intval(($newHeight * $newWidthPercentage) / 100);
        $newWidth = intval($maxWidth);
    }
}

return array(
    'width' => $newWidth,
    'height' => $newHeight
);
}

因此，从我自己的测试来看，似乎可以容纳您要使用的每张图像的每种尺寸，即正如我在问题中所问的那样：

如果是，是否曾经有过服务器端处理和缓存可能变得过度的时候（即容纳 8 个 110x220、120x230、150x190 等的图像）？

在现代计算中似乎有点矫枉过正，如果您打算使用许多不同大小的图像，您应该进行近距离测量。

但是，我发现，如果您有一组标准的大小并且它们很小，那么优势实际上是服务器端调整大小和存储所有大小，因为强制客户端调整大小总是会减慢他们的计算机速度，但缩小它的原始尺寸的 1/3 似乎没有太大的区别。

因此，我认为 FB、Google 和 Youtube 等网站之所以不太担心存储所有图像的精确测量值，是因为“接近测量值”的缩放总体上性能更高。

于 2012-11-27T12:26:59.207 回答