Question

我越来越多地从大型网站（Google，Facebook，Youtube和co）注意到他们正在调整图片大小＆＃34;关闭＆＃34;我们想知道这是否是人们思考或懒惰的方式的转变。

将一个新图像尺寸添加到特定尺寸的标准图像集中，用于一组产品（电子商务），其数量为数百甚至数百万。

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

适应这种新规模的服务器端的工作和问题是否真的值得客户方的利益？

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

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

Answer 1

考虑以下事项：图像大小调整是服务器的重要过程。首先它本身就是昂贵的。其次，硬盘IO操作非常慢。所以这一切都取决于您的服务器的加载方式。

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

1）缩略图的文件大小较小，因此下载速度更快。所以它们看起来会更快。但这完全取决于互联网连接的速度，这种情况日益增加。你看过加载大图像了吗？它们不会一次显示，而是通过'lines'

显示

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

3）单页上的许多大图像会增加该页面的内存使用量。在一些不那么强大的计算机上，当滚动打开它时可能会产生可怕的滞后。

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

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

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

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

Answer 2

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

我正在使用png进行此测试，但png似乎非常标准。
我正在使用一个特定功能，该功能可以自动调整图像大小，以便width和height始终符合我调整大小的图像的原始宽高比。

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

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

在IE7上，我没有注意到CPU的跳跃，质量很好，只要我根据图像大小限制使用百分位调整大小。

总的来说，即使是这种大小的缓存服务器端所需的额外存储，计算和编码似乎也不利于用户端可以隐含的功能。

话虽如此，如果我开始做这种调整大小的倍数（比如20，就像我的问题一样），我可能会开始遇到问题。

经过一些调整后，我发现任何低于原始图像尺寸的1/3，只要图像的宽度或高度低于1000px，似乎可以忽略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和谷歌以及Youtube这样的网站不太担心存储所有图像的精确测量值的原因是因为“接近测量”缩放可能会更加高效。

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

2 个答案: