服务器端图像大小调整性能

Question

我越来越多地从大型网站(Google,Facebook,Youtube和co)注意到他们正在调整图像"靠近"他们想要的测量客户端,我想知道这是否是人们思考方式的转变他们很懒.

对于一组产品(电子商务),将特定大小的标准图像集添加到新的图像大小的场景中,这些产品的数量可达数百甚至数百万.

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

容纳这种新尺寸的服务器端的工作和问题是否真的值得客户端受益？

如果没有,那么判断何时应该预处理一定大小的好方法是什么？

如果是的话,是否曾经有一段时间服务器端处理和缓存可能变得过度(即包含8个图像的110x220,120x230,150x190等)？

Answer 1

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

• 我在这个测试中使用了 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 等网站之所以不太担心存储所有图像的精确测量值，是因为“接近测量值”缩放总体上可以提高性能。