衡量客户端图像大小调整与带宽考虑因素的相对重要性

Question

我的网站正在使用 php 函数来调整图像大小，因此浏览器不必这样做：

function resizeImg($img, $newW, $newH, $rotateTrue) {
  //image resize code, then

  return base64_encode($image_data);
}

函数是这样调用的：

<img src="data:image/png;base64,<?= resizeImg('myImg', newWidth, newHeight, 1); ?>" alt="pic">

没问题。但是，返回的图像数据很大。当我检查 Chrome 中的元素时，每个调整大小的图像都会返回 > 1kB 的编码数据。

这对于四处散乱的图像来说很好，但是如果你有一个巨大的 table 怎么办？例如，我网站上的 table 超过 1500 行，每行一张图片。每个图像当前都由浏览器调整大小，我知道这并不理想。但是，如果我使用我的服务器端调整大小功能调整这 1500 张图像中的每一张的大小，我将大致添加以下数量的编码数据：

1500 images x ~1.1 kB encoding data per image = 1650 kB

到这个table。

对于高性能站点，我应该更重视带宽节省（即调整客户端大小）还是节省浏览器（即调整服务器端大小）？

Answer 1

tl;两个博士

您的方法的主要问题是，由于您正在动态生成新图像，因此您很容易受到 DDoS 攻击，方法是将页面请求对服务器的计算影响成倍增加。不用说，由于这个问题，您发布的代码和术语 高性能 不能很好地结合在一起。

另一个问题是客户端无法缓存您发送给它们的图像（除非您缓存您发送的完整网页），因为它们是通过 base64 内联的。

解决方法很简单。将图像调整为一组预定义的大小并将它们存储在您的服务器上。将这些不同的尺寸交付给客户，让客户完成其余的工作。当然，您必须正确配置服务器以在客户端缓存这些图像文件。

您可以在客户端使用新的 <picture> 元素（picturefill 用于旧浏览器）以支持具有不同分辨率的多个设备。当然会发生一些缩放，但您不能为所有设备都生成图像。

如果您的问题只是关于升级，根本就不要这样做。不在服务器上，也不在客户端。放大后的图像看起来很难看。

Answer 2

我更喜欢保存调整大小后的文件并只使用它们的 URL。您当前的解决方案绝对没有缓存，然后您使用 HTML.

中的 base64 编码使图像尺寸更大

只有当你同时显示原始图像并且它们不大时，才可以在客户端调整它的大小。

衡量客户端图像大小调整与带宽考虑因素的相对重要性

Gauging the relative importance of client-side image resizing vs bandwidth considerations

php

bandwidth

image-resizing