0

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

4

2 回答 2

2

它肯定会大大增加加载时间

更新: 假设您的文件系统上有一个图像(603x339)。使用这里给出的类。然后使用

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

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

替代解决方案:

Wordpress 有一个名为ImageMagick Engine的插件

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

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

或者简单地使用图像压缩工具(如Cesium或任何其他工具),这将减少系统本身的图像大小

于 2013-03-14T03:04:00.170 回答
1

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

于 2013-03-14T03:09:01.223 回答