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

Question

我运行的 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 图像的实际文件大小会对我们的页面速度产生巨大的负面影响？

Answer 1

确实会大大增加加载时间

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

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

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

替代方案：

Wordpress 有一个名为ImageMagick Engine的插件

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

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

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

Answer 2

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