如何通过调整图像大小和应用 attr 来减少页面加载时间？答案

【问题标题】：how to reduce page load time with image resizing and apply attr?如何通过调整图像大小和应用 attr 来减少页面加载时间？
【发布时间】：2016-02-24 09:29:46
【问题描述】：

朋友的网站在加载时非常缓慢。我使用 gtmetrix.com（即使页面不是 wordpress）检查，页面加载时间为 8.4 秒，2.09MB，分数为 C。

结果指出了一些机会以提供更好的加载时间

以下图片缺少宽度和/或高度属性。
以下图像在 HTML 或 CSS 中调整大小。提供缩放图像可以节省 1007.9KiB（减少 70%）。
应使用 CSS 精灵将以下从网站提供的图像组合成尽可能少的图像。

该页面没有使用 wordpress 并且是响应式的，它说宽度和高度 attr 缺失的部分，我无法设置静态高度和宽度，但它提到调整已经完成的图像大小到最大.我的意思是图像尺寸是 424x424，但使用的最大尺寸是 300x300，如果我将所有图像缩小到 300x300，这真的很重要吗？作为第三点，这是否意味着我真的应该将所有图像合二为一并使用 CSS 来获得相同的图像但位置不同？因为这些图像是箭头、按钮、x

提前感谢您的任何回复。

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

每一点都很重要。尝试以页面上实际呈现的大小保存图像。

确保在加载每个图像之前通过 imageoptim 之类的工具运行它们。

页面怎么这么重？仅仅是图像吗？

【讨论】：

当我运行测试时，它主要是在说图像，即使有一个项目符号说 js defer parsing 但是有三个项目符号说图像

【解决方案2】：

图像应保存为每英寸 72 像素，因为这是 Web 将它们呈现的样子。如果您需要支持视网膜显示（高分辨率）类型的设备并希望使图片看起来不错（您应该这样做）。使它们的大小是您在网络上需要它们的 2 倍。然后按宽度和高度缩小它们。

例如。

您在页面上有一个图像，该图像将显示为 300 x 300 像素。

您保存的图像应为 600 x 600 像素，像素为 72ppi。

然后在浏览器中定义图像的宽度和高度。

 <img src="randomimage600x600x.jpg" width="300px" height="300px">

这将使图像在网络上得到更好的显示。

【讨论】：

【解决方案3】：

您可以使用 gzip 提供静态文件并在客户端解压缩，这将节省一些时间。我的最佳猜测

【讨论】：