我们正在开发一个网站，并注意到 GIF 图像（100kb - 200kb）的加载速度非常慢。
该站点是具有 CSS/HTML 的静态站点。
有没有人指出为什么图像加载缓慢？
使用 JPG 会提高性能吗？
这是该图像的 HTML 代码：
<div><img src="images/mainImg_3.gif">
问问题
2345 次
8 回答
12
它们加载缓慢，因为它们很大。200KB 是一个非常大的图像文件。我不确切知道网络图像的推荐是什么，但将它们保持在 50K 以下是一个非常好的主意。
GIF 图像对于摄影图像不是很有效。您应该尝试使用 JPG 和 PNG 等其他格式，看看是否可以用更小的文件大小获得相同的质量。您应该能够在保持质量的同时大大缩小文件大小。
另一个技巧：使用缩略图。保存每个图像的两个版本，一个是另一个大小的 25%（按分辨率）。如果您的网站访问者想要查看更多内容，可以单击缩略图。这将加快加载时间并减少您的带宽费用。
于 2009-03-23T14:51:31.573 回答
2
你的图片尺寸合适吗？如果您在网页上将它们显示为 300x300 像素，请确保原始图像的大小相同。
这有两方面的帮助，一是要下载的数据更少，二是不需要额外的处理能力来调整浏览器的大小。此外，如果图像尺寸准确，图像看起来会更清晰。
至于 GIF 和 JPG 之间的区别（除了透明度，JPG 不支持），它归结为您的图像包含的内容。GIF 使用颜色表和该颜色表的映射来存储图像，而 JPG 使用压缩算法。因此，如果您的图像包含很少的颜色变化，您将从 GIF 中获得较小的文件大小。相反，如果您有一张颜色变化很大的照片，您将需要使用 JPG。
于 2009-03-23T14:51:18.360 回答
2
也看看YSlow
它将为您分析您的网站并告诉您瓶颈可能在哪里。
于 2009-03-23T14:58:29.420 回答
1
为图像文件启用缓存（下面的示例还添加了 css 和 js 缓存），这将确保用户不会下载文件两次。如果您使用的是 apache 1.3 或 2：
ExpiresActive On
<FilesMatch "\.(ico|gif|jpe?g|png|js|css)$">
ExpiresDefault "access plus 1 year"
</FilesMatch>
为 html 和 css 启用 gzip 压缩可能是一个合理的想法。在阿帕奇 2：
SetOutputFilter DEFLATE
在 Apache 1.3 中：
mod_gzip_on Yes
于 2009-03-23T15:01:32.017 回答
0
这取决于图像的大小，如果您以 100kb 显示壁纸大小的图像，那还不错。如果您要显示这种大小的缩略图，那么您就有问题了。
JPEG 图像有损，但可以轻松压缩。根据您选择的压缩程度，您可以使用 JPEG 真正减小图像尺寸。
于 2009-03-23T14:52:01.180 回答
0
加载速度最快的资源始终是根本不需要加载的资源。即除了将图像缩小到合理的大小之外，您还应该阅读有关 HTTP 缓存的信息。
您应该指示您的 Web 服务器传递带有适当缓存信息的响应，以便用户代理可以重用本地缓存版本。
Mark Nottingham 写了一篇关于 HTTP 缓存的教程。这是一个很好的起点。这是一个关于 HTTP chaching 上的 apache 配置的教程。
于 2009-03-23T15:20:55.340 回答
0
您应该为 img 标签指定 height 和 width 属性，请参阅下面的 W3C Schools 解释为什么应该这样做。有关更多信息，请参阅http://www.codinghorror.com/blog/archives/000807.html以了解更多更激进的技术。
提示：最好同时指定图像的高度和宽度属性。如果设置了这些属性，则在加载页面时会保留图像所需的空间。但是，如果没有这些属性，浏览器就无法知道图像的大小，也无法为其预留适当的空间。效果将是页面布局将在加载期间更改（同时加载图像）。
提示：不要使用高度和宽度属性重新缩放图像！缩小具有高度和宽度属性的大图像会迫使用户下载大图像（即使它在页面上看起来很小）。正确的方法是在页面上使用图像之前，使用程序重新缩放图像。
于 2009-03-23T15:25:30.273 回答
0
查看免费工具：Smush It！
它由 Stoyan Stephanov、Nicole Sullivan（来自 Yahoo!）共同开发，并结合了来自YSlow（来自 Yahoo!）和 Yahoo Developer Network 调查结果的所有图片花絮。
它将分析您的图像并从一组服务器端工具中确定最佳图像类型是什么（例如 PNG8、PNG24、GIF、JPG 等），并创建优化的图像......例如，即使您提供它是一个PNG图像，它会找到最好的方法来压缩它，并将它“粉碎”到尽可能小的文件大小。
然后获取输出图像，然后从（无 cookie 域）提供它，如果可以的话，最好是在CDN上，带有远期过期标头，使用gzip 压缩。
于 2009-03-23T17:44:42.500 回答