使用缩小到 1/2 大小的大图像？对加载时间不利？

Posted 2023-02-25

【中文标题】使用缩小到 1/2 大小的大图像？对加载时间不利？

【英文标题】：Using Large Images That Are Scaled Down to 1/2 the size? Bad for Load Times?

【发布时间】：2013-03-14 02:49:52

【问题描述】：

我运行的 Wordpress 网站有数千篇文章，每个文章至少有一个主要 jpeg 图像，我们已将其裁剪为 240 像素高 x 135 像素宽，并使用“保存为 Web”功能在 Photoshop 中减小了其文件大小。因此，对于存档页面，我们可以在一个页面上加载 20 到 30 张这样的图像。

因为我们正在围绕网站设计一个应用，并且希望我们的图像看起来质量很高，所以 240 x 135 尺寸不会在更高分辨率的屏幕上削减它，所以我们需要更新尺寸.

我的问题是：如果我们将每个帖子设置为在其各自页面中使用 603 x 339 的图像，然后设置归档页面列出具有较小图像的帖子以使用 CSS 将这些 603 x 339 图像缩小到 240 x 135 .加载时间会有多糟糕？由于存档页面仍将加载 20-30 个设置为以 240 x 135 显示的图像，我们可以吗？或者源 603 x 339 图像的实际文件大小会对我们的页面速度产生巨大的负面影响？

【参考方案1】：

确实会大大增加加载时间

更新： 假设您的文件系统上有一个图像 (603x339)。使用给定的类here。 然后使用

$resizeObj -> resizeImage(240 ,135 , 'crop');
$resizeObj -> saveImage('sample-resized.jpg', 100);

创建调整大小的图像并在存档页面中使用该图像。您可以删除此图像以节省文件系统大小，但每次都需要更多计算。 但是，对于您的主页，您仍然可以使用文件系统中的图像，因为它没有被修改

替代方案：

Wordpress 有一个名为ImageMagick Engine的插件

使用它，您可以在实际将图像发送到客户端之前重新调整图像大小。因此，您可以发送具有您想要显示的大小的图像（无需在客户端再次调整大小）。

因此将负载限制在所需的范围内。

或者只需使用图像压缩工具（如 Caesium 或任何其他工具），这将减少系统本身的图像大小

【讨论】：

Funtime：您能解释一下在将图像发送到客户端之前调整图像大小是什么意思吗？在我上面提到的示例的情况下，这将如何工作，我们的 Wordpress 帖子将使用 603x339 的主图像，然后我们希望在存档页面上调用时使用按比例缩小的相同图像。

【参考方案2】：

使用 CSS 缩放仍然需要加载整个图像，然后浏览器必须在显示它之前将其缩小，因此它可能会比以原始大小显示图像要慢一点。为了提高速度，您需要将预先缩放的图像发送到客户端。