Question

我们正在开发一个网站，并注意到GIF图像（100kb - 200kb）的加载速度非常慢。

该网站是一个包含CSS / HTML的静态网站。

是否有任何人指出图像可能加载缓慢的原因？

使用JPG会改善性能吗？

以下是该图片的HTML代码：

<div><img src="images/mainImg_3.gif">

Answer 1

他们加载缓慢因为它们很大。 200KB是一个非常大的图像文件。我不确切知道Web图像的建议是什么，但将它们保持在50K以下是一个非常好的主意。

GIF图像对于摄影图像效率不高。您应该尝试其他格式，如JPG和PNG，看看是否可以使用较小的文件大小获得相同的质量。您应该能够在保持质量的同时缩小文件大小。

另一个技巧：使用缩略图。保存每个图像的两个版本，一个是另一个的25％（按分辨率）。如果他们想要查看更多内容，您的网站访问者可以点击缩略图。这将加快加载时间并减少带宽费用。

Answer 2

阅读以下文章，题为加速网站的最佳做法：

http://developer.yahoo.com/performance/rules.html

Answer 3

您的图片尺寸合适吗？如果您在网页上以300x300像素显示它们，请确保原始图像的大小相同。

这有助于双重，一个可以下载更少的数据，2它不需要额外的处理能力来让浏览器调整大小。此外，如果图像的确切大小，图像看起来会更清晰。

就GIF和JPG之间的差异而言（除了透明度，JPG不支持），它归结为图像所包含的内容。 GIF使用颜色表和该颜色表的地图来存储图像，而JPG使用压缩算法。因此，如果您的图像包含很少的颜色变化，您将从GIF获得较小的文件大小。相反，如果你有一张有很多颜色变化的照片，你会想要使用JPG。

Answer 4

另请查看YSlow

它将为您分析您的网站，并告诉您瓶颈可能在哪里。

Answer 5

启用图像文件的缓存（下面的示例还添加了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压缩可能是一个合理的想法。在apache 2中：

SetOutputFilter DEFLATE

并在apache 1.3中：

mod_gzip_on Yes

Answer 6

这取决于图像的大小，如果您以100kb显示壁纸大小的图像，那也不算太糟糕。如果您要显示此尺寸的缩略图，则表示您遇到问题。

JPEG图像有损，但可以轻松压缩。根据您选择的压缩程度，您可以使用JPEG真正减少图像尺寸。

Answer 7

加载速度最快的资源始终是根本不需要加载的资源。即除了将图像缩小到合理的大小之外，您还应该阅读有关HTTP缓存的内容。

您应该指示您的Web服务器使用正确的缓存信息传递响应，以便用户代理可以重用本地缓存版本。

Mark Nottingham写了tutorial about HTTP caching。这是一个很好的起点。并且this is a tutorial关于HTTP chaching上的apache配置。

Answer 8

您应该为img标签指定高度和宽度属性，请参阅下面的W3C Schools解释为什么要这样做。有关更多信息，请参阅http://www.codinghorror.com/blog/archives/000807.html了解更多更激进的技术。

提示：指定是一个好习惯   高度和宽度属性   对于图像。如果这些属性是   设置，图像所需的空间   加载页面时保留。   但是，没有这些属性，   浏览器不知道的大小   图像，并不能保留   适当的空间。效果   将是页面布局   在装载期间改变（而在   图片加载）。

提示：请勿使用重新缩放图像   高度和宽度属性！   缩小大图像   高度和宽度属性强制a   用户下载大图像（甚至   如果它在页面上看起来很小）。该   正确的方法是重新缩放图像   一个程序，在使用它之前   页。

这是从http://www.w3schools.com/tags/att_img_height.asp

复制的

Answer 9

查看免费工具：Smush It!

它由Stoyan Stephanov，雅虎的Nicole Sullivan共同开发，并整合了来自YSlow（来自Yahoo!）和雅虎开发者网络调查结果的图像的每一个细节。

它将分析您的图像并从一组服务器端工具确定最佳图像类型是什么（例如PNG8，PNG24，GIF，JPG等）并且还创建优化图像......例如即使你输入一个PNG图像，它也会找到压缩它的最佳方法，并将“Smush It”设置为尽可能小的文件大小。

然后拍摄输出图像，然后根据{cookie-less domain）提供，最好是CDN，far-future expires headers，gzip compression。

如何在静态HTML网站上改善加载时间？

9 个答案: